NextJS中同时实现服务端预取和客户端请求数据的推荐方案是什么

你的需求是「服务端预渲染携带完整数据保证SEO效果，同时支持用户交互后客户端侧刷新数据」，NextJS 官方目前已经不推荐使用getInitialProps实现该需求，优先推荐以下方案，根据你使用的路由模式选择即可：

Pages Router 适用方案 #

如果你用的是 Next12 及更早版本，或者 Next13+ 仍在使用 Pages 路由：

• 首次预渲染数据获取优先使用getServerSideProps：该方法只会在服务端执行，每次页面请求时都会调用第三方API获取数据，返回给页面组件做预渲染，返回的HTML自带完整数据，完全满足SEO需求
• 客户端侧更新逻辑单独封装：在页面组件内部使用useSWR/React Query或者原生useEffect封装第三方API请求逻辑，用户触发交互（比如筛选、翻页、刷新按钮点击）时，调用该请求方法获取最新数据，覆盖初始传入的props数据即可
• 如果第三方API数据实时性要求不高，优先选择getStaticProps+ 增量静态再生（ISR）：只需要在getStaticProps中返回revalidate: 数字（单位秒），即可实现静态页面的后台自动增量更新，性能比getServerSideProps更高，同样不影响客户端交互后的手动刷新逻辑

示例代码参考：

// pages/xxx.js
export async function getServerSideProps() {
  const res = await fetch('第三方API地址')
  const initialData = await res.json()
  return { props: { initialData } }
}

export default function Page({ initialData }) {
  const [data, setData] = useState(initialData)

  const refreshData = async () => {
    const res = await fetch('第三方API地址')
    const newData = await res.json()
    setData(newData)
  }

  return (
    <div>
      <div>{data.content}</div>
      <button onClick={refreshData}>刷新数据</button>
    </div>
  )
}

App Router 适用方案（Next13+ 官方推荐路由模式） #

如果你用的是 Next13+ 默认的 App 路由：

• 首次预渲染直接用服务端组件拉取数据：第三方API请求直接写在服务端组件顶层，天然在服务端执行，预渲染返回的HTML自带完整数据，不需要额外的特殊数据获取方法即可满足SEO需求
• 把需要交互更新数据的模块拆成客户端组件：在客户端组件顶部添加'use client'指令，初始数据从父级服务端组件作为props传入，客户端组件内部封装请求逻辑，交互触发时重新拉取数据更新状态即可

注意：getInitialProps之所以不被推荐，是因为它会导致页面无法自动静态优化，且服务端/客户端逻辑混合容易出现边界问题，以上方案实现的效果和你现在用getInitialProps的效果完全一致，且符合官方规范，性能表现更好。

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