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 的东西，每个类似的框架都会做同样的事情。