Static Rendering

Deliver pre-rendered HTML content that was generated when the site was built

Static Rendering#

Overview#

With static rendering, the HTML contents are pre-generated at build time.

When a user requests a statically rendered application, the server responds with the HTML file.

Once the client receives this HTML file, the HTML parser parses the content and renders the non-interactive content to the screen. If a script tag is present, the client sends an additional request to fetch this bundle.

When the client has downloaded the JavaScript, it executes its contents and adds event listeners to the HTML elements to make them interactive.

Implementation#

The bare minimum required for a static rendered application is to have one single HTML file that contains all the contents of the elements that need to be rendered to the screen.

const listings = [
  { id: 1, address: "..." },
  { id: 2, address: "..." },
];

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

There can also be an optional JavaScript file, which is only necessary if the components are interactive, to bind event listeners to the already rendered HTML elements.

Tradeoffs#

Dynamic data#

There are several ways to add dynamic data to statically rendered pages, the difference being when this data is fetched.

Fetch dynamic data at build time#

Overview#

We can fetch data server-side at build time, and generate the HTML based on the fetched data. When you're working with frameworks, they usually offer methods to easily add dynamic data to static pages.

Implementation#

If you're using Next.js, you can do this with the getStaticProps method.

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

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

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

  return { props: { listings } };
}

This method runs server-side at build time, generating HTML that contains the fetched data.

Tradeoffs#

Fetch dynamic data client-side#

Overview#

One approach to add dynamic data to a staticaly rendered page, is to use a client-side fetch. This is usually a great pattern for pages that contain data that should be updated on every request.

Implementation#

We can use SWR to fetch the data client-side, and show a skeleton component while the data is being fetched.

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

export default function Home() {
  const { data, loading } = useSWR("/api/listings", (...args) =>
    fetch(...args).then((res) => res.json())
  );

  if (loading) {
    return <ListingsSkeleton />;
  }

  return <Listings listings={data.listings} />;
}

Tradeoffs#