In Next.js, a route can be statically or dynamically rendered.
Static rendering (default) improves performance because all the rendering work is done ahead of time and can be served from a Content Delivery Network (CDN) geographically closer to the user.
You can opt into dynamic rendering by using a dynamic function or dynamic data fetching in a layout or page. This will cause Next.js to render the whole route dynamically, at request time.
This table summarizes how dynamic functions and static data fetching (caching) affect the rendering behavior of a route.
|Data Fetching||Dynamic Functions||Rendering|
Note how, for a route to be statically rendered, the data requests are cached and there are no dynamic functions.
By default, Next.js will cache the result of
fetch() requests that do not specifically opt out of caching behavior. This means that fetch requests that do not set a
cache option will use the
If any fetch requests in the route use the
revalidate option, the route will be re-rendered statically during revalidation.
To learn more about caching data fetching requests, see the Caching and Revalidating page.
During static rendering, if a dynamic function or a dynamic
fetch() request (no caching) is discovered, Next.js will switch to dynamically rendering the whole route at request time. Any cached data requests can still be re-used during dynamic rendering.
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:
headers()in a Server Component will opt the whole route into dynamic rendering at request time.
useSearchParams()in Client Components will skip static rendering and instead render all client components up to the nearest parent Suspense boundary on the client.
<Suspense/>boundary. This will allow any client components above it to be statically rendered. Example.
searchParamsPages prop will opt the page into dynamic rendering at request time.
Note: This behavior is implemented in this pending PR. You previously had set the dynamic segment config option to
force-dynamicto get this behavior
Dynamic data fetches are
fetch() requests that specifically opt out of caching behavior by setting the
cache option to
The caching options for all
fetch requests in a layout or page can also be set using the segment config object.
To learn more about Dynamic Data Fetching, see the Data Fetching page.