Server-side vs. Client-side Rendering with Express and EJS Documentation

1. Introduction

This documentation explores the concepts of Server-side Rendering (SSR) and Client-side Rendering in web development, with a focus on implementing SSR using Express and EJS templating engine.

2. Server-side Rendering (SSR)

Server-side Rendering involves generating HTML on the server and sending the fully-rendered page to the client. Express, combined with EJS, can achieve SSR easily. 

// Install necessary dependencies
npm install express ejs

// Implement SSR with Express and EJS
const express = require('express');
const ejs = require('ejs');
const app = express();
const PORT = 8080;

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { message: 'Hello from the server!' });
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

In this example, the server renders the 'index' EJS template and sends the HTML to the client with the provided data.

3. Client-side Rendering

Client-side Rendering involves sending minimal HTML to the client and using JavaScript to dynamically render content. This approach shifts rendering responsibilities to the client's browser. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Client-side Rendering</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    $(document).ready(function() {
      // Fetch data from the server and render dynamically
      $.get('/api/data', function(data) {
        $('#app').html('<p>' + data.message + '</p>');
      });
    });
  </script>
</body>
</html>

This example uses jQuery to make an asynchronous request to the server, fetches data, and dynamically updates the content on the client side.

4. Server-side Rendering (SSR) vs. Client-side Rendering (CSR)

When considering Server-side Rendering (SSR) versus Client-side Rendering (CSR), several factors come into play:

  • Load Time: SSR typically results in faster initial load times because the server sends fully-rendered HTML to the client. In contrast, CSR might have a slower initial load time as it requires downloading JavaScript files and executing them to render content.
  • Resources Spent: SSR may require more server resources as it processes each request to generate HTML. CSR shifts processing to the client's browser, potentially reducing server load but increasing client-side resource usage.
  • SEO: SSR is advantageous for SEO because search engine crawlers can easily parse the fully-rendered HTML content. CSR might require additional steps, such as server-side rendering for crawlers or dynamic rendering, to ensure proper indexing.
  • CORS Problems: SSR inherently avoids Cross-Origin Resource Sharing (CORS) problems as all content originates from the same server. CSR might encounter CORS issues when making requests to external APIs or resources.

Ultimately, the choice between SSR and CSR depends on the specific requirements and constraints of your project, balancing factors like performance, scalability, and SEO considerations.

Back

Home

Arrow