Rendering
Converting react code into HTML representation
Takes place on either server or client
Methods available on NextJS
Pre-Rendering
fetching of external data and transformation of code happens before sending to client
1: Server-Side Rendering
HTML of page generated for each request on server
- Generated HTML / JS / JSON data to make pages interactive sent to client
- Hydration: using JSON data and JS to make pages interactive e.g. attaching event listeners
2: Static Site Generation
HTML generated on server, no server on runtime
- stored in a CDN
- re-used for each request
- Incremental Static Regeneration
Client-Side Rendering
browser receives empty HTML shell with javascript instructions to construct UI
- Standard React application uses client-side rendering
- NextJS Pre-Renders by default
tip
On NextJS, you can decide the rendering method on a page-by-page basis depending on your use case
To learn more about which rendering method is right for your specific use case, read data fetching docs