Theo's Typesafe Cult•3y ago

Why does that work? - Runtime Config with Nextjs

(unsure about the tag, so I am just going with both, feel free to correct me on it tho) Could some please explain why this working? I am working with runtime environment variables right now. As noted in the docs of nextjs it says that the page is required to be ssr'ed in order to use the publicRuntimeConfig (https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) My page looks like this:

const LazyComponent = dynamic(() => import('path/to/component'), {
  ssr: false
});

const Page = () => {
   ...
   <LazyComponent />
   ... 
}

// Force SSR
export const getServerSideProps = () => {}

export default Page;

const LazyComponent = dynamic(() => import('path/to/component'), {
  ssr: false
});

const Page = () => {
   ...
   <LazyComponent />
   ... 
}

// Force SSR
export const getServerSideProps = () => {}

export default Page;

The runtime enviroment variables are only needed inside the LazyComponent which is dynamically imported on the client.
Steps I went through: - Build the Project - Start the Project with some Env Vars -> works ✅ - Change Env Vars and restart the project -> works ✅ So its working like I want it to be, but I cant grasp why. Is it because during the SSR the publicRuntimeConfig gets populated and is available for all the others components? Even if they just get rendered on the client?

next.config.js: Runtime Configuration | Next.js

Add client and server runtime configuration to your Next.js app.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Why does that work? - Runtime Config with Nextjs