Next.js Rendering

Rendering = from code to HTML

Next.js has three types of rendering:

1. Server-Side Rendering
2. Client-Side Rendering
3. Static Site Generation

These can be grouped into two categories: Pre-Rendering (Server-Side and Static site) and Client-Side Rendering.

Pre-rendering fetches the data and transforms the React components before the result is sent to the client (i.e. generates it in advance on a server). Whereas Client-Side Rendering does the process on the user's device.

Now what's the difference between the two types of Pre-rendering? Server-side rendering generates the HTML of the page on a server for each request and then sends it to the client. Static site generation also generates the page on a server however, content is generated once and is stored then re-used for each request.

So how do we decide which rendering method to use with Nextjs? Stay tuned for my next post!

Cheers,
Rosa