Skip to main content

Nextjs Rendering Strategies

With Next.js you can choose which strategy to use on a page (route) by page basis.

Client Side Rendering​

Use Case: When content is very dynamic. For example, a check-out shopping cart where state is dependent on a user's interaction.

Data is fetched within a useEffect hook inside the Page component.

Data is fetched after the app is loaded.

Server Side Rendering​

Use Case: Ecommerce search; when you know what fetch and how present ahead of time.

Need to use getServerSideProps

Instead of fetching data from within a useEffect hook, create a getServerSideProps function that is called when the page is rendered on the server.

Return data using the props object.

Static Site Generation​

Use Case: Marketing Pages and Ecommerce details page with a few details that need to be updated relatively infrequently where some latency is acceptable.

Need to use:

  • getStaticProps
  • getStaticPaths

getStaticProps requires getStaticPaths to provide a list of paths to generate.

getStaticProps Options

  • revalidate: number of seconds to wait before revalidating the data.
  • res.unstable_revalidate: an api endpoint that forcefully revalidates the data after post request from a service that knows data has been update. Available from 12.1.0.

Context​

Questions​

When does each rendering strategy fail?

  • What if multiple sources of static data — can you control revalidation per source?
  • Where is the boundary between SSR and streaming in practice?
  • What signals tell you CSR is the wrong choice for a route?
  • How does ISR interact with personalized content?