getServerSideProps 与直接在 React 中获取

Posted 2023-03-30

【中文标题】getServerSideProps 与直接在 React 中获取

【英文标题】：getServerSideProps vs fetching directly in React

【发布时间】：2021-05-03 20:00:36

【问题描述】：

我对 NextJS 的 getServerSideProps 有点困惑。

您可以在文档中找到此说明。

例如，假设您的页面需要经常预渲染 更新的数据（从外部 API 获取）。你可以写 getServerSideProps 获取此数据并将其传递给 Page

我的困惑是，如果您可以简单地在 React 组件本身中每 x 秒获取一次数据（在通过 getStaticProps 获取初始数据之后），为什么还要使用 getServerSideProps。

使用 getServerSideProps 是否比仅使用 React 方式有优势？

例如这样：

 useEffect(() => 
    const interval=setInterval(()=>
      const fetchdata = async () => 
        const res = await fetch("url")
        const data = await res.json()
        setsongs(data)
      
      fetchdata()
     ,15000)
     return()=>clearInterval(interval)
  , [])

【参考方案1】：

由于文档的原因，getServerSideProps 会获取每个请求的 API 数据。因此，以时间间隔请求（如您在反应版本中提到的）或使用 getServerSideProps 之间存在差异。 另外，请记住getServerSideProps 是在服务器端实现的，在 SEO 很重要的情况下可能很有用。但是，如果在您使用 getServerSideProps 的情况下服务器出现故障，则将不再提供整个页面。 https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

同时，当 SEO 不相关时，在客户端（或 React 方式）获取数据很有用，页面不需要预渲染。 https://nextjs.org/docs/basic-features/data-fetching#fetching-data-on-the-client-side

在我看来，当显示的数据经常变化并且用户应该看到最新的数据时，如果您使用getServerSideProps 会更好，SEO 至关重要并且更长的首字节时间 (TTFB) 是可以接受的。

【讨论】：

感谢您的回答，但我不完全明白，如果我可以在预渲染页面时使用 getStaticProps 然后通过 React 在客户端每 x 秒获取一次，为什么我还要使用 getServerSideProps ？ SEO 仍然会很好，因为初始加载带有正确的标签（当 react 重新渲染组件时这些标签不会改变）