Module 57: HTML in Server-Side Rendering (SSR)
Lecture Overview
In this lecture, we will cover:
What is Server-Side Rendering (SSR)?
How HTML is generated in SSR
Differences between SSR and Client-Side Rendering (CSR)
Implementing SSR with a complete method
Deep explanation of how the process works
Advantages and disadvantages of SSR
Practical example with code implementation
1. What is Server-Side Rendering (SSR)?
Server-Side Rendering (SSR) is a technique where the server processes the HTML of a web page before sending it to the browser. This allows the page to load with content already in place, improving SEO and the initial user experience.
When a request is made to a website using SSR:
The server generates the full HTML page dynamically.
The browser receives and displays the HTML.
JavaScript enhances the interactivity after the page has loaded.
SSR vs CSR (Client-Side Rendering)
Feature
Server-Side Rendering (SSR)
Client-Side Rendering (CSR)
Performance
Faster initial load
Slower initial load
SEO
SEO-friendly
SEO issues without pre-rendering
Complexity
More backend logic
More frontend logic
Interactivity
Requires JavaScript hydration
Immediate interactivity
2. How HTML is Generated in SSR
Process Flow:
A user requests a page (e.g., https://example.com/home).
The server processes the request, fetches data, and generates an HTML response.
The server sends the fully-formed HTML to the browser.
The browser renders the page immediately.
JavaScript runs and enhances interactivity.
3. Implementing SSR with a Complete Method (Using Node.js and Express.js)
Setup and Code Implementation
Step 1: Install Required Packages
sh
code
mkdir ssr-example && cd ssr-example npm init -y npm install express ejs
Step 2: Create Server File (server.js)
javascript
code
const express = require('express'); const app = express(); const path = require('path'); // Set EJS as the templating engine app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')); // Sample data const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Charlie", age: 28 } ]; // Route that renders the HTML server-side app.get('/', (req, res) => { res.render('index', { users }); }); // Start the server const PORT = 3000; app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });
Step 3: Create HTML Template (views/index.ejs)
html
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Server-Side Rendering Example</title> </head> <body> <h1>Server-Side Rendered Users</h1> <ul> <% users.forEach(user => { %> <li><strong><%= user.name %></strong> - Age: <%= user.age %></li> <% }); %> </ul> </body> </html>
Step 4: Run the Server
sh
code
node server.js
Now, open http://localhost:3000/ in your browser to see the rendered HTML page.
4. Deep Explanation of the SSR Process
1. Server Processes the Request
The server listens for incoming requests (app.get('/')).
When the request is received, it fetches data (users array).
2. HTML is Generated on the Server
The res.render('index', { users }) function generates the final HTML by replacing placeholders in index.ejs.
EJS dynamically injects data into the template.
3. Fully Rendered HTML is Sent to the Browser
The server sends back a fully-formed HTML document.
The browser immediately displays content without waiting for JavaScript execution.
5. Advantages & Disadvantages of SSR
✅ Advantages
Faster Initial Load – Users see content immediately.
Better SEO – Search engines can crawl the page easily.
No JavaScript Dependency – Works even if JavaScript is disabled.
❌ Disadvantages
Increased Server Load – Server processes every request.
Longer Response Time – Every request requires fresh HTML generation.
Limited Interactivity – Requires additional JavaScript for dynamic content updates.
6. Summary
SSR generates full HTML on the server before sending it to the browser.
It improves SEO and the initial load speed.
We implemented a basic SSR setup using Node.js and EJS.
SSR is useful for content-heavy websites but can increase server load.
💡 Assignment for Students:
Modify the project to fetch users dynamically from an external API (e.g., https://jsonplaceholder.typicode.com/users).
Compare the SSR response time with a CSR implementation using React.js.
No comments:
Post a Comment