NextJS页面导航或启动服务时console.log无响应问题排查

原因 #

在Next.js的App Router中，组件默认是服务器组件：

• 服务器组件的代码只会在服务器端执行，console.log的输出会打印在终端（服务器运行的控制台），而非浏览器的开发者工具控制台。
• 手动刷新页面时，服务器会重新渲染对应的服务器组件，所以终端能看到HELLO的输出；但使用Next.js的Link组件进行页面间导航时，是客户端侧的路由切换，不会触发服务器组件的重新渲染，因此既不会在终端产生新日志，浏览器控制台也看不到输出。

解决方法 #

根据需求选择对应的方案：

方案1：改为客户端组件（让日志输出在浏览器控制台） #

在组件文件的最顶部添加'use client'指令，将组件转为客户端组件，代码会在浏览器端执行，客户端导航时也会触发console.log：

'use client';

export default function Page() {
  console.log('HELLO');
  return <div></div>;
}

方案2：保留服务器组件（查看终端日志） #

如果不需要在浏览器控制台输出，只想确认服务器端的执行情况，直接查看运行Next.js服务的终端窗口即可。若希望客户端导航时也触发服务器组件的执行，可以通过设置数据重新验证（比如revalidate属性）或调用router.refresh()强制刷新页面，触发服务器端的重新渲染。

内容的提问来源于stack exchange，提问作者Sahl