Next.js应用如何实现全页面通用动态Header，兼顾SSR、SEO与体验？

你遇到的是Next.js Pages Router下全局公共组件服务端渲染的经典场景，可通过以下方案完全解决所有问题：

1. 全局数据服务端拉取 #

在_app.js中通过getInitialProps拉取Header、Footer等全局公共数据，该方法会在服务端执行，拉取到的数据会随SSR请求直接返回，保证Header内容可被搜索引擎抓取，首屏无加载闪动。

import Layout from "../components/Layout";
import { getGlobalHeaderData } from "../api/global";
// 内存缓存，可根据业务需要替换为LRU缓存实现过期淘汰、容量控制
let globalDataCache = null;
let cacheExpire = 0;

export default function MyApp({ Component, pageProps, globalData }) {
  return (
    <Layout globalData={globalData}>
      <Component {...pageProps} />
    </Layout>
  )
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  // 先获取页面自身的业务数据
  const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

  // 拉取全局公共数据，加缓存避免重复请求API
  let globalData;
  const now = Date.now();
  if (globalDataCache && now < cacheExpire) {
    globalData = globalDataCache;
  } else {
    globalData = await getGlobalHeaderData(ctx.req); // 服务端请求可透传Cookie、UA等信息
    globalDataCache = globalData;
    cacheExpire = now + 10 * 60 * 1000; // 缓存有效期10分钟，可按需调整
  }

  return { pageProps, globalData };
};

2. Layout透传数据给公共组件 #

Layout组件接收_app传入的全局数据，直接传递给Header、Footer即可：

import Header from "../Header/Header";
import Footer from "../Footer/Footer";

export default function Layout({children, globalData}) {
    return (
        <>
            <Header data={globalData.header} />
            {children}
            <Footer data={globalData.footer} />
        </>
    )
}

3. 全局状态保留Header临时数据 #

Header的搜索框输入等临时状态，用轻量全局状态管理库（如Zustand、Jotai）存储即可，Layout组件不会随页面跳转卸载，全局状态不会丢失：

// store/useHeaderStore.js
import { create } from 'zustand'

const useHeaderStore = create((set) => ({
  searchInput: '',
  setSearchInput: (val) => set({ searchInput: val }),
}))

export default useHeaderStore;

Header组件直接引入该store读写状态即可。

App Router原生支持Layout服务端渲染，无需额外适配：

1. 根Layout默认是服务端组件，直接在组件内请求Header、Footer数据即可，Next.js会自动做同请求去重，无需手动写缓存
2. Header的交互部分拆分为独立客户端组件，顶部加'use client'标记，临时状态仍用全局状态管理即可

该方案覆盖所有需求点：

• Header内容随SSR返回，支持SEO，无首屏加载延迟
• 全局数据加缓存，不会重复请求API服务端
• Header临时状态存在全局，页面跳转不会丢失

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