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

Question

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

1. Next.js 如何以及提供哪些文件。它是仅服务器请求的页面还是整个 Web 应用程序（所有页面）？

2. 如果它服务于整个 Web 应用程序，那么当我们路由到使用 getServerSideProps 的某个页面时它如何获取数据？

Answer 1

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

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

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

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

Answer 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，您就不需要做任何额外的事情。