Skip to content

Next.js Rendering Techniques.

Next.js rendering techniques.

Static Site Generation

  • Better performance
  • Server has less load.
  • Instant Page Load.

Should not use if dynamic content needs to be viewed.

Server Side Rendering

  • Downside of SSR is performance.
  • The server will attempt to render the page on the server.

Incremental Static site generation.

  • Pre-Building ( SSG ) + Fresh Content ( SSR )

Client Side Rendering

  • Entire javascript bundle is loaded in the browser.

Next.js Rendering Patterns

  • React Client Component
  • React Server Component
  • RSC Payload

Hydration

In React, "hydration" refers to the process of transforming server-rendered HTML into a fully interactive client-side React application.

Interactive components are called client components.

Components that only render data and have no interactivity is called Server Components.

When rendering the app, react looks through the react tree and renders the server components first and leaves a placeholder for the client components and let the browser render the client component.

RSC Payload

  • Which component is a child of which
  • who the parent is
  • their internal connections.

Caching

  • Router cache
  • Full Route Cache
  • Request Memoization
  • Data cache

3W & 3H Framework

  • What is the strategy ?
  • Where is cache stored ?
  • Why caching or what is the benefit of this strategy ?
  • How long is the cache valid ?
  • How to refresh ( revalidation ) cache ?
  • How to ignore or opt out of this caching strategy ?

Request Memoization

By default, next.js uses force-cache option, to refetch every time use 

cache: "no-store"

option.

On using the no-store value for the cache, the page won't be Static site generated, but server side rendered.

Points to Remember

  • Request Memoization : Not a next.js feature, core React.js feature.

  • Memoization applies to GET requests only - not POST, PUT, PATCH, DELETE etc.

  • Works inside React tree only - generateMetadata, generateStaticParams, layout.ts, page.ts, other server components - not inside route handlers.

  • fetch caching is not supported in middleware.

Data Cache

Time based revalidation is done by passing the following in the data fetch request : 

next : { 
    revalidate : REVALIDATE_SECONDS
}