Server-Side Rendering Vs Client-Side Rendering

Server-Side Rendering (SSR) and Client-Side Rendering (CSR) differ in where and how content is generated, affecting performance, user experience, and application behavior.

• SSR sends fully structured HTML for faster first-time display while CSR loads a minimal HTML shell and builds UI dynamically.
• SSR is suitable for content-heavy websites while CSR is ideal for single-page applications with frequent updates.
• SSR handles routing and data fetching on the server while CSR manages them in the browser.

Steps to Initialize Node Application and Install Required Modules

Step 1: Create a NodeJS application using the following command:

npm init -y

Step 2: Install required Dependencies:

 npm i ejs express

The updated dependencies in package.json file will look like:

"dependencies": {
 "ejs": "^3.1.9",
 "express": "^4.19.2"
}

Folder Structure:
👁 ssr-csr-structure

Example: The below example demonstrate the SSR and CSR.

To run the application use the following command

node index.js 

Output: Now go to http://localhost:3000/ssr and http://localhost:3000/csr in your browser:

👁 ssr-csr

Difference between SSR and CSR

Here are some differences: