How Websites Are Rendered

Developers can design websites to be rendered in a lot of different ways.

The stoats built this site using Next.js, which has this flexibility built-in.

By default, pages served from a Next.js application are rendered server-side and cached so that they only ever need to be rendered once. This can (and in Next it does) happen at build-time, so the entire website is pre-rendered and ready to be served faster than a stoat down its hidey-hole.

This gives great performance but there are many many cases where this simple default model does not work, motivating the use of many other rendering methods.

When deciding how to render a page, you might ask yourself the following questions:

How long do you want server-side caches to persist?

• SSG - Cache until the server code is built again
• ISR - Cache for some amount of time (e.g. 10 minutes)
• SSR - Do not cache at all

How do you want interactive (client-side) components to fetch their data?

• No Client Components
• Pass Data to Client Components - Upon initial render by the server
• Fetch Data in Client Components - Components do it themselves after being hydrated
• Pass and Fetch in Client Components - Both of the above, e.g. components can do more fetches to update themselves after initial render

What lazy loading do you want on client-side components?

• No Lazy Loading
• Lazy Hydrate - Hydrate immediately with a separate code bundle
• Conditional Hydrate - Hydrate with a separate code bundle once a condition is met
• Lazy Load - Load immediately with a separate code bundle
• Conditional Load - Load with a separate code bundle once a condition is met

This leads to a 3-D matrix of possibilites. Click on each one to read about it! You can change the lazy-loading option by clicking on the labels in the bottom-right. The stoats recommend you start by reading the "No Client Components" options first, as well as the SSR-with-use-client and traditional react pages:


And if you want to read even further:

• Streaming Server Rendering
• The content fetched server-side can be sent in chunks. For example, you can send a "skeleton" page ahead of time while a longer process happens on the server, to display something to your user as soon as possible.
• Composition Patterns with Server/Client Components
• When should you use these different methods? How do you mix them in a large application?