EJS - intro to SSR

Snehal Pradhan — Wed, 18 Jun 2025 03:32:55 +0000

What is SSR?

SSR (Server-Side Rendering) is when HTML is generated on the server (not in the browser) and sent fully rendered to the client. It improves SEO and initial load speed."

This simple explanation is enough to get the idea.
In easy words — your page can be built on either:

Client-side (CSR) → in the browser, or
Server-side (SSR) → on the backend, using something like EJS.

Each has its pros and cons:

SSR: Fast initial load, great SEO but not ideal for complex UIs
CSR: Great for rich, dynamic UIs but poor SEO and slow first load

Many modern apps use a hybrid approach (e.g., Next.js). But for now, let’s stick to SSR with EJS.

Basic EJS Setup (Hello World)

Learn how to render a basic EJS template using Express.

Step 1: Initialize the Project

Create a folder (name it whatever you want).
Inside it:

  npm init -y
  npm install express ejs

In package.json, add:

  "type": "module"

(This is optional but needed to use import instead of require.)

Step 2: Create `index.js`

import express from "express";
import path from "path";
import { fileURLToPath } from "url";

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

// Required to get __dirname in ES modules
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// Set view engine
app.set("view engine", "ejs");

// Set views folder path explicitly
app.set("views", path.join(__dirname, "views"));

// Route
app.get("/", (req, res) => {
  res.render("index", { name: "World" });
});

app.listen(PORT, () => {
  console.log(`App listening at http://localhost:${PORT}`);
});

Step 3: Create Views Folder

Make a folder named views/ and inside it create a file:

views/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>Hello EJS</title>
  </head>
  <body>
    <h1>Hello, <%= name %>!</h1>
  </body>
</html>

Why `__dirname` is Needed?

In ES Modules, __dirname and __filename don’t exist by default like in CommonJS.
You need them to tell Express where to look for your EJS files (views).
Hence the use of:

import { fileURLToPath } from "url";
import path from "path";

DEV Community: Snehal Pradhan