Rendering

Reference

• Pre-rendering: Fetching of external data and transformation of React components into HTML before the result is sent to the client.
  • By default, NextJS pre-renders every page.
• Client-side rendering - when the initial rendering work happens on the user’s device.
• Server-side rendering: The HTML of the page is generated on the server for each request.
  • On the client, the HTML is used to show a non-interactive page, then react uses the JSON and JS instructions to make components interactive (such as attaching event handlers to a button) - hydration.
  • getServerSideProps.
• Static site generation: There is no server at runtime, instead, content is generated once, at build time, when the application is deployed, and the HTML is stored in a CDN.

Static and Dynamic Rendering

Reference

• For a route to be statically rendered, the data requests are cached and there are not dynamic functions.
• Dynamic data fetching - makes Next render the whole route dynamically, at request time.
• By default, Next will cache the result of fetch() requests that do not specifically opt out of caching behavior.