getServerSideProps 与直接在 React 中获取

Question

我对 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)
  }, [])

Answer 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) 是可以接受的。