如何让子Server Component动态渲染且页面其余部分静态SSR？

云上老周

2026-6-25

问题场景

现有以下Next.js组件代码：

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

当前给页面添加force-dynamic后，DynamicChild能正常动态渲染，但我们希望页面除DynamicChild外的内容在构建时静态生成，同时所有组件保持服务器端渲染，该如何调整？

解决方案

1. 移除页面级全局动态配置

删掉page.tsx中的export const dynamic = "force-dynamic";，让页面默认采用静态生成（SSG）策略，这样页面的非动态部分会在构建时完成渲染。

2. 单独让`DynamicChild`实现请求时服务器渲染

在DynamicChild组件中使用Next.js的noStore()方法禁用缓存，强制该组件在每次用户请求时都在服务器端重新渲染，确保读取到最新的运行时环境变量：

修改后的DynamicChild.tsx：

import { noStore } from 'next/cache';

export default function DynamicChild() {
  // 禁用组件缓存，强制每次请求都在服务器端重新渲染
  noStore();
  
  return <div>
      {process.env.imporantEnvVar ? "cat" : "dog"}  
  </div>
}

修改后的page.tsx：

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

export default function Page({children}: any) {
  return <div>
      <DynamicChild />  
  </div>
}