When is publicRuntimeConfig in Next.js available?

Viewed 27

According to the Next.js docs:

Generally you'll want to use build-time environment variables to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with Automatic Static Optimization.

and

A page that relies on publicRuntimeConfig must use getInitialProps or getServerSideProps or your application must have a Custom App with getInitialProps to opt-out of Automatic Static Optimization. Runtime configuration won't be available to any page (or component in a page) without being server-side rendered.

This is confusing for me to read. The 2nd paragraph tells me a page has to be server-side rendered if using runtime config, so you have to opt out of Automatic Static Optimization. The 1st paragraph tells me runtime config is incompatible with Automatic Static Optimization.

If I do this:

const Page = (): JSX.Element => {
    const config = getConfig().publicRuntimeConfig;
    console.log(config);

    return (...);
}

export default Page;

This seems to work no problem. Also when building the app, the build result never indicates that any page is server-side rendered at runtime, except the API endpoints. All the pages are either rendered as static HTML (no initial props) or automatically rendered as static HTML + JSON (uses getStaticProps).

I want all pages that can be rendered at build time to be rendered at build time, but the documentation confuses me regarding if I can use runtime configuration or not combined with static generation. Can I? And can someone clarify what the documentation means here? Can someone elaborate on why not recommend runtime configuration?

0 Answers
Related