为什么在 Next.js 中组件被调用两次?

Nam*_*dev 7 next.js

这是我pages/index.jsnext.js项目

const Index = () => {
  console.log('Index Component Called');
  return (
    <div>Hello</div>
  )
}

export default Index;
Run Code Online (Sandbox Code Playgroud)

控制台日志功能在CLIENT端调用两次,在 next.js 节点SERVER上调用一次

Nic*_*ani 3

我猜是因为Pagesnext.js服务器端渲染的(或预渲染的)。
因此,在这种情况下,当 next.js 渲染您的页面(服务器端)时,脚本将console.log("Index Component Called")在您的前端做出反应,因此 来自服务器的所有代码都应该再次执行。
在 next.js 中,您只能在页面中执行服务器端代码getInitialProps,而不能在组件中执行。