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

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

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

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.

TTC

Theo's Typesafe Cult•4y ago

JLN

Why does that work? - Runtime Config with Nextjs

publicRuntimeConfig

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

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

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.

Why does that work? - Runtime Config with Nextjs

Similar Threads

Why does that work? - Runtime Config with Nextjs

Similar Threads

Similar Threads

Similar Threads