Next.js getStaticProps在Header组件中无法正常运行问题求助

• Next.js 中的 getStaticProps、getServerSideProps 这类服务端数据获取方法，仅支持在 pages 目录下的页面级组件中使用，普通的业务组件（比如你写的Header组件）无法识别和执行这类方法，所以你放在Header里的代码完全不会运行，自然也没有console输出。

方案1：在页面级组件调用getStaticProps，逐层传递数据 #

所有页面的getStaticProps都拉取Header需要的数据，通过pageProps传给_app.js，再传递给Layout、Header组件：

1. 修改_app.js，接收Header需要的数据，传递给Layout

import Layout from './layout'

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

2. 修改Layout组件，接收数据传给Header

import Header from './header'

export default function Layout({ children, headerData }) {
  return(
    <>
      <Header data={headerData}/>
      {children}
    </>
  );
}

3. 每个页面的getStaticProps中拉取Header需要的数据，放到props的headerData字段里

export async function getStaticProps() {
  console.log("test")
  const res = await fetch(`https://api.namefake.com`)
  const headerData = await res.json()

  if (!headerData) {
    return {
      notFound: true,
    }
  }
  // 页面自身需要的其他数据也可以一起返回
  return {
    props: { 
      headerData,
      // 其他页面数据
    }, 
  }
}

方案2：Header组件用客户端方式拉取数据 #

如果Header的数据不需要服务端渲染、对SEO没有强要求，可以直接在Header组件里用useEffect客户端拉取：

import { useEffect, useState } from 'react'

export default function Header() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      console.log("test")
      const res = await fetch(`https://api.namefake.com`)
      const result = await res.json()
      setData(result)
    }
    fetchData()
  }, [])

  // 后续渲染逻辑
  return <div>{data?.name}</div>
}

方案3：使用getInitialProps在_app.js全局拉取 #

如果每个页面都需要这个Header数据，可以直接在_app.js中用getInitialProps全局拉取，一次拉取所有页面通用，不用每个页面都写一遍：

import Layout from './layout'

function MyApp({ Component, pageProps, headerData }) {
  return (
    <Layout headerData={headerData}>
      <Component {...pageProps} />
    </Layout>
  );
}

MyApp.getInitialProps = async () => {
  const res = await fetch(`https://api.namefake.com`)
  const headerData = await res.json()
  return { headerData }
}

export default MyApp

注意：使用_app的getInitialProps会关闭所有页面的自动静态优化，对性能有一定影响，需要根据自身项目场景选择

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