SSR Demystified

Don't let lingo like SSR/ CSR confuse you -- there's really just two major ways to serve HTML over an HTTP server in JS - either the server sends the HTML to the client (ssr) or the client generates the HTML for itself (csr/ spa) by using the Web API.

To demystify SSR we are going to look at the world's simplest dynamic SSR example:

// Let's create a server
import express from 'express';

const app = express();

function generateHTML() {
  const date = new Date();
  const localTime = date.toLocaleTimeString();
  const localDate = date.toLocaleDateString();
  const doc = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wow</title>
  </head>
  <body>
    <span>Hello World!</span>
    <span> The date is ${localDate}</span>
    <span> It's currently: ${localTime} </span>
  </body>
</html>
`;
  return doc;
}

// Every get request to the '/' page will send the current date and time to the client
app.get('/', (req, res) => {
  const doc = generateHTML();
  res.send(doc);
});

const port = process?.env?.PORT ?? 3000;

app.listen(3000, () => {
  console.log(`🚀 Live on http://localhost:${port}`);
});

That's it.

SSR Demystified

SSR Demystified

Comments

More from this blog

perf overhead on context flattener?

Diving into SSR with bun & react 19

overview of cloudflare workers - part 1

Send iMessage to a loved one from the terminal!

Building Scalable WebSocket APIs with Socket.IO Syntax

Command Palette

Comments

More from this blog