当用户路由到另一个使用 getServerSideProps 的页面时，Next.js 如何获取数据？答案

【问题标题】：How Next.js fetch data when user route to another page which uses getServerSideProps?当用户路由到另一个使用 getServerSideProps 的页面时，Next.js 如何获取数据？
【发布时间】：2021-10-17 09:17:57
【问题描述】：

我来自 React 背景。在第一次请求时响应应用程序服务器整个网站，然后使用 useEffect() 挂钩进行数据获取。我听说 Next.js 也做同样的事情。但我的疑问是：

Next.js 服务的方式和文件。它是只服务器请求的页面还是整个 Web 应用程序（所有页面）？
如果它服务于整个网络应用程序，那么当我们路由到使用 getServerSideProps 的某个页面时它如何获取数据？

【问题讨论】：

它只提供请求的页面。执行next build 时可以看到生成的页面。在服务器呈现页面的情况下，getServerSideProps 在每个请求 上被调用。请参阅文档以获取更多信息。 nextjs.org/docs/basic-features/data-fetching

标签： javascript reactjs next.js server-side-rendering getserversideprops

【解决方案1】：

React 是客户端，getStaticProps 用于 SSG（服务器端生成），仅在静态页面生成（或重新验证）时调用，getServerSideProps 用于 SSR（服务器端渲染），它将重新渲染整个页面在每个请求上，并可能使用来自react-dom/server 的renderToNodeStream 之类的东西为它提供服务，之后它将hydrate 它客户端。

getServerSideProps 一旦请求到达服务器就会被调用，然后你可以在那里获取你的数据，从那里返回它，之后它将作为道具传递给你的页面组件，然后将被渲染到服务器端并传递给客户端。

或者你不需要在服务器端做所有事情，如果你只是想像往常一样获取数据，使用你习惯的useEffect，你仍然可以像往常一样做，它也会执行客户端一如既往。在这种情况下，它只会在客户端重新呈现组件本身，而不是整个页面。

如果您确实希望请求到达服务器并使用来自该函数的数据重新生成整个页面，您应该使用getServerSideProps。如果您只想在客户端获取数据，请照常进行。

【讨论】：

【解决方案2】：

我终于得到了答案！

文档：https://nextjs.org/docs/basic-features/data-fetching#only-runs-on-server-side

当您通过 next/link 或 next/router 在客户端页面转换请求此页面时，Next.js 会向运行 getServerSideProps 的服务器发送 API 请求。它将返回包含运行 getServerSideProps 的结果的 JSON，该 JSON 将用于呈现页面。所有这些工作都将由 Next.js 自动处理，因此只要您定义了 getServerSideProps，您就不需要做任何额外的事情。

【讨论】：