Take a look at the following code snippet
// layout.tsx
export default function Layout({children}: any) {
return <div>
{children}
</div>
}
// page.tsx
export const dynamic = "force-dynamic";
const DynamicChild = dynamic(() => import("@/DynamicChild"), {
ssr: true,
})
export default function Page({children}: any) {
return <div>
<DynamicChild />
</div>
}
// DynamicChild.tsx
export default function DynamicChild() {
return <div>
{process.env.imporantEnvVar ? "cat": "dog"}
</div>
}
When a page is set as
export const dynamic = "force-dynamic";<DynamicChild> component.
How can you achieve this objective while still ensuring that all components remain server-side rendered?