Rendering = from code to HTML
Next.js has three types of rendering:
- Server-Side Rendering
- Client-Side Rendering
- 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
Top comments (0)