Next.JS 代码如何同时在服务器和客户端上运行？答案

【问题标题】：How come Next.JS code runs on both the Server and the Client?Next.JS 代码如何同时在服务器和客户端上运行？
【发布时间】：2021-10-02 06:04:38
【问题描述】：

在 Next.JS 应用程序中，您会看到组件的代码同时在服务器和客户端上运行。

所以如果你有以下代码：

const Title = () => {
  console.log('--> Hello')

  return (<h1>Some title</h1>)
}

并且您在开发环境 (npm run dev) 中运行它，您将看到 console.log 语句打印到终端中的服务器以及浏览器的控制台。

首先，这里发生了什么？为什么每次页面加载时页面上的所有代码都在这两个地方运行？

Next.JS 不会只是将预编译的 HTML 文件发送到浏览器吗？为什么console.log 语句会在服务器中运行，即使我们不在getServerSideProps 或类似的地方？

现在，这可能是我忽略的 React 的一个核心特性，所以请告诉我它是否只是在 Next.JS 中表现出来的

【问题讨论】：

如果你不做 SSR，那么它只会在开发模式下发生。从未投入生产。

标签： javascript reactjs next.js

【解决方案1】：

Next.JS 不会只是将预编译的 HTML 文件发送到浏览器吗？

是的，这是正确的。但要将其转换为 html，首先需要运行您的应用并使用 ReactDOMServer.renderToString 方法呈现它。

所以它不是专门的 Next.js 功能，而只是一个 React SSR 的东西，每个类似的框架都会做同样的事情。

【讨论】：

好的，但是在Dev模式下，为什么刷新页面时，它会退出到Server终端窗口？那是因为服务器在每次页面加载时都创建了一个新版本吗？那么它每次都运行ReactDOMServer.renderToString？此外，如果您在生产模式下运行它（npm start），那么它显然不会在服务器上运行，对吗？因为 Next 只是将预编译的 HTML 发送到浏览器。对吗？
是的，在开发模式下，它通常会在每次页面加载时进行新构建。在生产中，一切都取决于您的页面使用的模式，例如，没有任何数据获取的简单页面将在构建时呈现一次，而在npm start 之后，它将仅从文件系统提供。你可以在这里阅读更多内容nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering
@Ben 是的，你是对的。这与在开发过程中导致道具不匹配的原因相同。是的，它发送的是在您运行npm run build 时构建的 HTML，除非您执行 SSR，否则它不会在生产环境中运行。如果您启用了 React Strict Mode，它还将在服务器上执行两次（在开发模式下）。
所以我有一个与阿波罗有关的类似问题。在 Prod 模式下运行时，Apollo 查询是在服务器上运行还是在浏览器中运行？从您上面的答案中，我可以推断只有在 Prod 模式下运行时才会在浏览器中发生调用，对吗？ stackoverflow.com/questions/68289281/…
@Ben 请求总是从浏览器（在生产和开发中）发生，除非您在 getServerSideProps 或类似的地方使用它。在开发中，它可能在服务器和客户端上都被获取，尽管我觉得我需要先检查一下。在您的特定问题中，在生产模式下，useMutation 代码将从浏览器执行。如果要从服务器获取它，请执行 SSR。如果您不想在服务器中执行，请使用动态导入或将代码放入 useEffect 钩子中。