Client Side Rendering (CSR) Web components

Posted by : on

Category : Client Side Rendering, CSR, Web Component, HTML Web Component, Javascript Web Component

Web components:

Web Components are a set of web platform APIs that allow you to create reusable custom elements with encapsulated functionality. They are a collection of technologies that can be used together to create reusable, encapsulated, and interoperable HTML elements. These components can be used in web applications without the need for any additional frameworks or libraries.

Client Side Rendering:

Client Side Rendering (CSR) is a web development approach where the bulk of the page rendering process is handled by the client’s browser using JavaScript. In CSR, the server typically sends a minimal HTML document, and then JavaScript code is executed in the browser to dynamically generate and render the content.

Express JS:

Fast, unopinionated, minimalist web framework for Node.js

Sample Web component

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components | CSR (Client side rendering Webcomponents, Needs Javascript)</title>
<custom-paragraph text="Custom Paragraph"></custom-paragraph>
class CustomParagraph extends HTMLElement {
template = document.createElement("template");
constructor() {
const text = this.getAttribute('text');
this.attachShadow({ mode: "open" });
this.template.innerHTML = `
p {
font-size: 65px;
font-weight: 400;
font-style: italic;
background-image: linear-gradient(to left, #007f4c, #53e3a7);
color: black;
render() {
customElements.define("custom-paragraph", CustomParagraph);
</html> ([]

Rendering Webcomponents in Client served via Express JS:

const express = require("express");
const fs = require('fs');
const app = express();
const port = 3000;
const content = fs.readFileSync("./csr.html","utf-8").toString();
app.get("/csr", async(req,res) => {
app.listen(port, ()=>{
console.log(`Example Client side rendering Webcomponents running on ${port}`);
app.listen(port, ()=>{
console.log(`Example Server side app running on: ${port}`);

### Code Reference:

This post can be read along with Server side rendering web components post. To get a good picture of difference between client side rendering and server side rendering

About Pradeep Kumar Saraswathi
Pradeep Kumar Saraswathi

PMTS UI at Salesforce, based in California, United States

Email :

Website :

About Pradeep Kumar Saraswathi

Hi, Pradeep Kumar Saraswathi is PMTS (UI) at salesforce with 17+ years of experience in building UI (Builders) with multiple UI technologies that builds experiences and AI/ML, Generative AI enthusiast.