Server-Side Rendering

Generate HTML on every request

Overview#

With Server-Side rendering, we can generate HTML on the server (or serverless function) on every request.

When a user requests a server-side rendered application, the server generates the HTML, and returns this to the client.

The browser renders this content, which is initially just plain non-interactive HTML elements. To bind event listeners to the components, the client sends an additional request to fetch the JavaScript bundle to hydrate the components.

Implementation#

When server-side rendering an application, we need a method to render HTML from our React components on the server, and hydrate the non-interactive HTML on the client. One way to render HTML on the server, is by using the renderToString method. This function returns an HTML string corresponding to the React element. The HTML can then be rendered to the client for a faster page load, and hydrated with the hydrateRoot method on the client.

React frameworks such as Next.js, Remix and Astro make it easy to server-render (parts of) your application.

When using Next.js, we can server-render a page by using the getServerSideProps method.

import { Listings, ListingsSkeleton } from "../components";

export default function Home(props) {
  return <Listings listings={props.listings} />;
}

export async function getServerSideProps({ req, res }) {
  const res = await fetch("https://my.cms.com/listings");
  const listings = await res.json();

  return {
    props: { listings },
  };
}

This methods runs on every request, and passes the props to the page to be dynamically generated.

Tradeoffs#