如何使子服务器组件动态化

Question

考虑以下代码

// 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>
}

当页面被标记为

export const dynamic = "force-dynamic";

时，DynamicChild的动态渲染就起作用了。但并不是所有的页面都适合添加“强制动态”，除了

<DynamicChild>

之外，还应该在构建时尽可能地静态渲染它们。

如何在维护服务器端渲染的所有组件的同时实现这一点？

Answer 1

您不必

export const dynamic = "force-dynmaic"

来动态渲染页面，当您使用动态数据（例如

cookies

、

headers

、

searchParams

）时，Next.js 会自动计算出来，使用

revalidate: 0

或

 获取cache: "no-store"

等等。

如果您不使用任何这些 API 并且想要强制动态渲染，您可以在组件中调用

unstable_noStore

：

// dynamic-component.tsx

import { unstable_noStore as noStore } from 'next/cache';

export default function DynamicChild() {
 
  noStore();

  return <div>
      {process.env.imporantEnvVar ? "cat": "dog"}  
  </div>
}

这样，当执行

noStore

时，Next.js 会将其使用的页面标记为动态渲染或组件（如果您使用的是 PPR）。

---

除了 .

之外，它们还应该在构建时尽可能地静态渲染

似乎您正在尝试使页面在构建时静态呈现（动态组件除外）。如果是这样，您应该启用部分预渲染又名 PPR

---

为您提供的信息：

1. dynamic()

   与服务器组件无关

const DynamicChild = dynamic(() => import("@/DynamicChild"), {
    ssr: true,
})

在服务器组件中不执行任何操作。仅当您从客户端组件导入客户端组件时，它才有效。它与服务器组件无关。

2. 环境变量在构建时注入到输出块中，更改环境变量需要重新构建。我提到这一点只是为了防止您认为更改

   process.env.imporantEnvVar

   会影响输出。