javascript - 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

Wouldn't Next.JS just sent a pre-transpiled HTML file to the Browser?

是的，这是正确的。但是要将其转换为 html，它首先需要运行您的应用程序并使用 ReactDOMServer.renderToString 呈现它。方法。
所以它不是专门的 Next.js 特性，而只是一个 React SSR 的东西，每个类似的框架都会做同样的事情。