Static and Dynamic Rendering
In Next.js, a route can be statically or dynamically rendered.
Static Rendering (Default)
By default, Next.js statically renders routes to improve performance. At build time, Server and Client components are rendered on the server, and the result of the work is cached and reused on subsequent requests.
Dynamic Rendering
With Dynamic Rendering, both Server and Client Components for a route are rendered on the server at request time.
During rendering, if a dynamic function or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route.
This table summarizes how dynamic functions and data caching affect whether a route is statically or dynamically rendered:
Route | Dynamic Functions | Data |
---|---|---|
Statically Rendered | No | Cached |
Dynamically Rendered | Yes | Cached |
Dynamically Rendered | No | Not Cached |
Dynamically Rendered | Yes | Not Cached |
From the table above, for a route to be fully static, all data must be cached. However, you can have a dynamically rendered route that uses both cached and uncached data fetches. This is useful when you have a page that mostly re-uses cached data, but has some uncached data. It allows you to opt into dynamic rendering without worrying about the performance impact of fetching all the data at request time.
In the future, Next.js will introduce hybrid server-side rendering where layouts and pages in a route can be independently statically or dynamically rendered, instead of the whole route.
Dynamic Functions
Dynamic functions rely on information that can only be known at request time such as a user's cookies, current requests headers, or the URL's search params. In Next.js, these dynamic functions are:
-
Using
cookies()
orheaders()
in a Server Component will opt the whole route into dynamic rendering at request time. -
useSearchParams()
:-
In Client Components, it'll skip static rendering and instead render all Client Components up to the nearest parent Suspense boundary on the client.
-
We recommend wrapping the Client Component that uses
useSearchParams()
in a<Suspense/>
boundary. This will allow any Client Components above it to be statically rendered.
-
-
searchParams
: Using the Pages prop will opt the page into dynamic rendering at request time.