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

Question

这是我pages/index.js的next.js项目

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

export default Index;

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

Answer 1

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