Skip to main content

Static

In Next.js, a route can be statically or dynamically rendered.

In a static route, components are rendered on the server at build time. The result of the work is cached and reused on subsequent requests. In a dynamic route, components are rendered on the server at request time.

Fetching data / Static Rendering - Next.js 13.2​

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.

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 force-cache option.

If any fetch requests in the route use the revalidate option, the route will be re-rendered statically during revalidation.

export default async function Page() {
    // This request should be cached until manually invalidated.
    // Similar to `getStaticProps`.
    // `force-cache` is the default and can be omitted.
    const staticData = await fetch(`https://...`, { cache: "force-cache" });

    // This request should be refetched on every request.
    // Similar to `getServerSideProps`.
    const dynamicData = await fetch(`https://...`, { cache: "no-store" });

    // This request should be cached with a lifetime of 10 seconds.
    // Similar to `getStaticProps` with the `revalidate` option.
    const revalidatedData = await fetch(`https://...`, {
        next: { revalidate: 10 },
    });

    return <div>...</div>;
}
tip

In the browser, the cache option indicates how a fetch request will interact with the browser's HTTP cache. With this extension, cache indicates how a server-side fetch request will interact with the framework's persistent HTTP cache.

By default, fetch will automatically fetch and cache data indefinitely.

fetch("https://..."); // cache: 'force-cache' is the default

Revalidating Data​

To revalidate cached data at a timed interval, you can use the next.revalidate option in fetch() to set the cache lifetime of a resource (in seconds).

fetch("https://...", { next: { revalidate: 10 } });

Dynamic Data Fetching​

To fetch fresh data on every fetch request, use the cache: 'no-store' option.\

fetch("https://...", { cache: "no-store" });

Resources​