Next.js页面与组件为何同时在服务端和浏览器运行？及判定方法

问题场景 #

用户创建了如下Next.js页面组件：

function MyPage({ props }) {
    console.log('page')
    return (<>
        <MyComponent />
    </>)
}

以及子组件：

export function MyComponent() {
    console.log('component')
    return (
        <>
            
        </>
    );
}

执行yarn dev并访问http://localhost:3000后，终端（服务端）和浏览器控制台（客户端）均输出日志：

page
component

用户提出两个问题：

1. 这一现象的原因是什么？
2. 如何准确判定一个组件/页面是服务端产物还是动态组件？

问题解答 #

1. 现象原因 #

Next.js 默认采用**服务端渲染(SSR) + 客户端水合(Hydration)**的核心机制：

• 服务端：首次请求页面时，Next.js会在服务端执行页面组件及所有子组件的代码，生成包含内容的静态HTML并发送给浏览器，因此终端会打印page和component。
• 客户端：浏览器接收到HTML后，会加载对应的JS bundle，执行水合过程——重新运行组件代码，把静态HTML转化为可交互的React应用，所以浏览器控制台也会输出相同的日志。

这种双端执行是Next.js平衡首屏加载速度和客户端交互性的默认行为，除非明确指定组件的渲染策略，否则所有未特殊标记的组件都会在服务端和客户端各执行一次。

2. 准确判定渲染环境的方法 #

方法一：通过环境对象判断

利用服务端不存在window对象的特性，直接在组件中添加判断：

function MyComponent() {
  if (typeof window !== 'undefined') {
    console.log('当前在客户端执行');
  } else {
    console.log('当前在服务端执行');
  }
  return <>...</>;
}

这样可以清晰区分组件在哪个环境运行。

方法二：明确指定渲染策略

Next.js支持通过指令或配置强制指定组件的渲染方式：

• 仅服务端执行：在App Router中，给组件顶部添加'use server'指令；在Page Router中，结合getServerSideProps使用，且组件内的敏感逻辑仅在服务端环境执行。
• 仅客户端执行：使用next/dynamic导入组件并禁用SSR：

import dynamic from 'next/dynamic';

// 该组件只会在客户端运行，服务端不会执行
const MyClientComponent = dynamic(() => import('./MyComponent'), {
  ssr: false,
});

方法三：查看终端渲染日志

在yarn dev的终端输出中，Next.js会标注每个页面的渲染类型（如SSR、Static、Client Component），通过这些标记可以直接判断页面/组件的渲染策略。

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