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

Question

在 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 中体现出来

Answer 1

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

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

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