如何在Next.js layout布局中实现getStaticProps获取服务端静态数据

核心结论 #

Next.js 目前不支持在 Layout 组件中直接调用 getStaticProps，但可以根据你使用的路由模式选择对应的服务端拉取布局数据的方案

分场景实现方案 #

1. 使用 Pages Router 时的方案 #

• 方案一：公共数据下沉到页面层获取，透传给Layout
  封装一个通用的工具函数用来拉取页脚、导航这类全局布局需要的静态数据，所有页面的 getStaticProps 调用该函数获取公共数据，和页面自身的业务数据合并后返回，再通过props传递给页面挂载的Layout组件即可，不需要重复写数据拉取逻辑。
• 方案二：在_app.js中通过getInitialProps拉取
  全局App组件的getInitialProps可以拿到全局公共数据，直接传递给全局Layout，注意该方案会导致全站默认失去自动静态优化能力，仅适合全栈服务端渲染的项目使用
• 轻量场景替代：如果是地址、备案号这类变更频率极低的静态数据，直接存在项目的JSON配置文件中，在Layout中直接import使用即可，连服务端请求都不需要。

2. 使用 App Router 时的方案 #

App Router 下默认所有组件都是服务端组件，你可以直接在Layout组件中编写异步拉取数据的逻辑，数据会在服务端渲染阶段或者静态构建阶段完成拉取，最终直接嵌入到返回的HTML中，完全不需要客户端通过useEffect或者SWR拉取，完全符合你的需求，示例逻辑如下：

// app/layout.js
async function getFooterData() {
  // 这里直接调用内部数据接口、CMS接口或者数据库拿页脚数据，只会在服务端执行
  const res = await fetch('你的数据接口地址', { next: { revalidate: 86400 } })
  return res.json()
}

export default async function RootLayout({ children }) {
  const footerData = await getFooterData()
  return (
    <html>
      <body>
        {children}
        <footer address={footerData.address} />
      </body>
    </html>
  )
}

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