Next.js v15能否静态预渲染页面主内容而非头部组件？

方案1：拆分层级布局，分离静态内容与动态头部 #

Next.js的布局支持嵌套结构，你可以通过拆分布局实现页面内容静态预渲染、头部动态渲染的需求：

• 根layout.tsx：保留动态头部组件，不设置dynamic配置（默认dynamic='auto'），让头部可以正常读取headers/cookies完成认证逻辑的服务端渲染。
• 创建静态页面专属的子布局（如app/static-section/layout.tsx），在该布局中导出dynamic = 'force-static'，且仅包裹静态页面的内容区域，不包含动态头部。
• 将需要静态预渲染的页面放在app/static-section/路径下，这样页面内容会被静态生成，而头部由根布局动态渲染，最终返回给用户的HTML中头部是完全渲染好的，无前端加载状态。

方案2：动态导入头部组件，页面内容强制静态 #

如果不想拆分布局，可对头部组件单独做动态导入并强制SSR，页面内容单独设置静态渲染：

// app/layout.tsx
import dynamic from 'next/dynamic';

// 动态导入头部组件，确保服务端渲染
const Header = dynamic(() => import('./components/Header'), { ssr: true });

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}
      </body>
    </html>
  );
}

在静态页面中配置强制静态：

// app/page.tsx
export const dynamic = 'force-static';

export default function StaticPage() {
  return <div>完全静态的页面内容</div>;
}

此方案中，页面内容会被静态预渲染，头部组件则在服务端渲染时读取headers/cookies完成认证，最终输出的HTML头部无加载状态。

方案3：增量静态再生（ISR）适配动态布局 #

若静态内容需要定期更新，可结合ISR实现：

// app/page.tsx
export const dynamic = 'force-static';
export const revalidate = 86400; // 每24小时重新生成静态内容

export default function StaticPage() {
  return <div>静态内容，自动定期更新</div>;
}

根布局保持动态逻辑处理头部，既实现页面内容的静态预渲染与自动更新，又保证头部在服务端完整渲染。

核心注意点 #

Next.js中路由的渲染模式由布局和页面中最“动态”的部分决定，只要布局包含headers()这类动态API，整个路由默认会转为动态渲染。但通过上述方案，可实现页面内容静态预渲染、头部动态服务端渲染的混合模式，同时满足无加载状态的需求。

内容的提问来源于stack exchange，提问作者randomuser5767124