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?How do you want interactive (client-side) components to fetch their data?What lazy loading do you want on client-side components?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:
No Client Components123
Pass Data to Client Components456
Fetch Data in Client Components789
Pass and Fetch in Client Components101112No Lazy Loading
192021Lazy Hydrate
282930Conditional Hydrate
373839Lazy Load
464748Conditional Load

And if you want to read even further: