如何为含useEffect异步初始化的页面实现NextJS SSR及边缘缓存？

我有一个NextJS应用，想用SSR渲染博客类页面来提速，重点要做边缘缓存。但现在遇到个问题：页面依赖的第三方库会在useEffect的setTimeout里异步初始化组件，导致SSR渲染的内容里变量是false，客户端加载后会明显闪烁，之后才切换成true。我想知道有没有办法在服务器端构建这些页面，然后把结果存在边缘缓存里给后续请求用？数据获取和缓存环节没问题。

示例组件代码（对应Content.tsx）：

export const Content = () => {
  const [isReady, setReady] = useState(false);

  useEffect(() => {
    setTimeout(() => setReady(true));
  }, []);

  return (
    <h1 className={isReady ? styles.ready : styles["not-ready"]}>
      Content component ready: <br /> {JSON.stringify(isReady)}
    </h1>
  );
};

注：示例用的是NextJS 13的App目录，但Next12的Pages目录也有同样问题。我找到的最接近的方案是useSSE库，但感觉不够规范，还得放弃Vercel部署的服务器处理。

1. 优先让第三方库支持服务器端初始化 #

如果第三方库提供了服务器端兼容的初始化API，直接在服务端完成初始化逻辑：

• Pages目录：在getServerSideProps中执行初始化，将结果作为props传给组件
• App目录：在Server Component中完成初始化，再传递给客户端组件

这样SSR渲染的就是最终状态的内容，客户端Hydration时初始状态与服务端一致，不会出现闪烁。示例代码：

// App目录的Server Component（page.tsx）
import { Content } from './Content';

// 服务端执行第三方库初始化
export default async function Page() {
  const isReady = await initThirdPartyOnServer();
  return <Content isReady={isReady} />;
}

// Content.tsx 客户端组件
'use client';
export const Content = ({ isReady }: { isReady: boolean }) => {
  // 初始值直接用服务端传来的结果，避免状态突变
  const [localReady, setLocalReady] = useState(isReady);

  useEffect(() => {
    // 若有客户端专属的后续逻辑，再更新状态
    setTimeout(() => setLocalReady(true), 0);
  }, []);

  return (
    <h1 className={localReady ? styles.ready : styles["not-ready"]}>
      Content component ready: <br /> {JSON.stringify(localReady)}
    </h1>
  );
};

2. 避免Hydration不匹配，优化闪烁体验 #

如果第三方库完全依赖浏览器环境，无法在服务端初始化，可通过以下方式减少闪烁：

• 用useRef标记Hydration完成状态，Hydration前渲染与服务端一致的内容，完成后再执行客户端初始化：

'use client';
export const Content = () => {
  const [isReady, setReady] = useState(false);
  const hasHydrated = useRef(false);

  useEffect(() => {
    hasHydrated.current = true;
    setTimeout(() => setReady(true), 0);
  }, []);

  // 服务端和Hydration阶段渲染与SSR一致的内容
  if (!hasHydrated.current) {
    return <h1 className={styles["not-ready"]}>Content component ready: <br /> false</h1>;
  }

  return (
    <h1 className={isReady ? styles.ready : styles["not-ready"]}>
      Content component ready: <br /> {JSON.stringify(isReady)}
    </h1>
  );
};

3. 配置边缘缓存 #

确保NextJS生成的页面能在边缘节点缓存：

• Pages目录：在getServerSideProps中设置缓存头

export async function getServerSideProps(context) {
  const isReady = await initThirdPartyOnServer();
  // 边缘缓存1小时，同时允许 stale 内容复用并后台更新
  context.res.setHeader(
    'Cache-Control',
    's-maxage=3600, stale-while-revalidate'
  );
  return { props: { isReady } };
}

• App目录：在page.tsx中设置ISR缓存时间

// 页面每3600秒重新生成一次，边缘缓存生成的内容
export const revalidate = 3600;

export default async function Page() {
  const isReady = await initThirdPartyOnServer();
  return <Content isReady={isReady} />;
}

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