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
getInitialPropsorgetServerSidePropsor your application must have a Custom App withgetInitialPropsto 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?