Server-Side Rendering with React: A Practical JavaScript Guide

import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import { createServer } from "node:http";

const app = express();
const PORT = Number(process.env.PORT) || 3000;

// Sample data keeps this demonstration independent of external services.
const products = [
  { id: 1, name: "Mechanical Keyboard", price: 2499 },
  { id: 2, name: "Wireless Mouse", price: 999 },
  { id: 3, name: "USB-C Hub", price: 1499 },
];

// This component is rendered on the server and hydrated in the browser.
function ProductPage({ items }) {
  return React.createElement(
    "main",
    { className: "container" },
    React.createElement("h1", null, "Developer Essentials"),
    React.createElement(
      "p",
      null,
      "Browse our curated collection of developer accessories."
    ),
    React.createElement(
      "ul",
      null,
      ...items.map((product) =>
        React.createElement(
          "li",
          { key: product.id },
          `${product.name} - ₹${product.price}`
        )
      )
    ),
    React.createElement(
      "button",
      {
        id: "refresh-button",
        type: "button",
      },
      "Show product count"
    ),
    React.createElement("p", {
      id: "message",
      "aria-live": "polite",
    })
  );
}

// Serve the browser bundle generated from client.js.
app.use("/assets", express.static("public"));

// Handle the home page and render its initial HTML on the server.
app.get("/", (req, res) => {
  console.log("Step 1: Received request for the home page.");

  try {
    // In production, load request-specific data from a trusted data source.
    console.log("Step 2: Preparing product data.");
    const initialData = JSON.stringify(products).replace(
      /[<>&\u2028\u2029]/g,
      (character) => ({
        "<": "\\u003c",
        ">": "\\u003e",
        "&": "\\u0026",
        "\u2028": "\\u2028",
        "\u2029": "\\u2029",
      })[character]
    );

    console.log("Step 3: Rendering the React component to HTML.");
    const appHtml = renderToString(
      React.createElement(ProductPage, { items: products })
    );

    // The JSON payload is escaped to prevent HTML parsing and script injection.
    const documentHtml = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Explore useful accessories for developers.">
  <title>Developer Essentials</title>
</head>
<body>
  <div id="root">${appHtml}</div>
  <script id="initial-data" type="application/json">${initialData}</script>
  <script src="/assets/client.js" defer></script>
</body>
</html>`;

    console.log("Step 4: Sending server-rendered HTML to the browser.");
    res.status(200).type("html").send(documentHtml);
  } catch (error) {
    // Log diagnostic details on the server without exposing them to clients.
    console.error("SSR rendering failed:", error);
    res.status(500).type("text").send("Unable to render the page.");
  }
});

// Provide a basic health endpoint for local testing and monitoring.
app.get("/health", (req, res) => {
  res.status(200).json({ status: "ok" });
});

// Create an HTTP server so the startup lifecycle is explicit.
const server = createServer(app);

server.listen(PORT, () => {
  console.log(`Step 5: SSR server listening at http://localhost:${PORT}`);
  console.log("Open the home page and inspect View Page Source.");
});

// Handle termination signals so the server can shut down gracefully.
function shutdown() {
  console.log("Shutting down the SSR server...");
  server.close((error) => {
    if (error) {
      console.error("Server shutdown failed:", error);
      process.exitCode = 1;
      return;
    }
    console.log("Server closed successfully.");
  });
}

process.on("SIGINT", shutdown);
process.on("SIGTERM", shutdown);

// CLIENT ENTRY POINT: place the following in client.js and bundle it
// to public/client.js with esbuild before starting the server.
//
// import React from "react";
// import { hydrateRoot } from "react-dom/client";
//
// function ProductPage({ items }) {
//   return React.createElement(
//     "main",
//     { className: "container" },
//     React.createElement("h1", null, "Developer Essentials"),
//     React.createElement("p", null,
//       "Browse our curated collection of developer accessories."),
//     React.createElement("ul", null, ...items.map((product) =>
//       React.createElement("li", { key: product.id },
//         `${product.name} - ₹${product.price}`))),
//     React.createElement("button", { id: "refresh-button", type: "button" },
//       "Show product count"),
//     React.createElement("p", { id: "message", "aria-live": "polite" })
//   );
// }
//
// const dataElement = document.getElementById("initial-data");
// const rootElement = document.getElementById("root");
//
// if (dataElement && rootElement) {
//   const items = JSON.parse(dataElement.textContent);
//   console.log("Step 6: Hydrating server-rendered HTML.");
//
//   hydrateRoot(rootElement, React.createElement(ProductPage, { items }));
//
//   // Attach the browser interaction after React hydration.
//   document.getElementById("refresh-button")?.addEventListener("click", () => {
//     document.getElementById("message").textContent =
//       `There are ${items.length} products available.`;
//   });
//
//   console.log("Step 7: The page is ready for interaction.");
// }