Next.js 14 App Router：静态页面如何按需加载Server Component？

答案是可以实现，核心是结合静态生成（SSG）和Server Component的运行时动态渲染特性，既让页面主体在构建时生成可缓存的静态内容，又让指定的Server Component在客户端访问时按需动态加载。

具体实现思路与代码示例 #

以Next.js（主流Server Component落地框架）为例：

1. 配置页面为静态生成
   确保Home页面在构建时生成静态HTML，这部分内容会被CDN缓存，无需每次请求都重新生成：

// app/page.js（App Router）
// 标记页面为完全静态，不自动重新生成
export const revalidate = false;

export default function Home(){
  return (
    <>
      <h1>Page title</h1>
      {/* 用Suspense包裹动态Server Component，提供加载状态 */}
      <Suspense fallback="Loading...">
        <DynamicServerComponent />
      </Suspense>
    </>
  )
}

如果使用Pages Router，通过getStaticProps配置静态生成：

// pages/index.js
export async function getStaticProps() {
  return {
    props: {},
    revalidate: false // 禁用增量静态再生
  };
}

export default function Home() {
  // 页面结构同App Router示例
}

2. 编写动态Server Component
   让Server Component的逻辑在运行时执行，而非构建时预渲染，关键是禁用数据缓存：

// app/components/DynamicServerComponent.js
// 默认就是Server Component，无需加'use client'
export default async function DynamicServerComponent() {
  // 禁用缓存，确保每次请求都获取最新动态数据
  const dynamicData = await fetch('https://api.example.com/dynamic-data', {
    cache: 'no-store'
  }).then(res => res.json());

  return <div>实时动态内容：{dynamicData.content}</div>;
}

关键细节说明 #

• 页面的静态部分（比如标题）会在构建时生成HTML，CDN直接返回这部分缓存内容，响应速度极快。
• 当客户端加载页面时，静态内容先渲染，同时浏览器会单独发起请求获取Server Component的渲染结果（通过流式传输），这部分是动态的，每次访问都会重新执行Server Component的逻辑并返回最新内容。
• 必须给Server Component的数据请求设置cache: 'no-store'或revalidate: 0，避免构建时缓存数据，确保运行时动态获取。

误区澄清 #

之前提到的“流式传输导致页面非静态”是指全页面SSR的情况，而这种方案中只有Server Component部分是流式动态加载，页面主体依然是静态生成的，完全可以被CDN缓存。不需要把动态部分改成客户端组件，用Server Component就能同时兼顾静态缓存和动态按需渲染的需求。

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