Express.js and Server-Side Rendering

Server-Side Rendering (SSR) improves SEO and performance by rendering pages on the server before sending them to the client. This guide covers key concepts, examples, and best practices for implementing SSR with Express.js.

Key Concepts of Server-Side Rendering

• Server-Side Rendering (SSR): Rendering web pages on the server and sending the fully rendered HTML to the client.
• Client-Side Rendering (CSR): Rendering web pages on the client-side using JavaScript.
• Hybrid Rendering: Combining SSR and CSR to leverage the benefits of both approaches.
• Template Engines: Tools that allow you to render dynamic content on the server-side (e.g., EJS, Pug, Handlebars).
• React SSR: Using React.js to render components on the server-side.

Using Template Engines

Template engines allow you to render dynamic content on the server-side:

Example: Using EJS

// Install EJS
// npm install ejs

// server.js
const express = require('express');
const path = require('path');

const app = express();
const port = 3000;

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.get('/', (req, res) => {
    res.render('index', { title: 'Home', message: 'Hello, World!' });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

// views/index.ejs



    


    
<%= message %>