Next.js 13中'use client'指令的工作原理及预渲染疑问

你忽略了Next.js 13+对Client Component的预渲染逻辑——哪怕加了'use client'指令，组件依然会在构建阶段（静态站点生成）或请求阶段（服务器端渲染）被预渲染成完整HTML，而非只输出空的React根容器。

• Client Component的混合渲染模式
  传统纯客户端React应用（CSR）是浏览器下载JS后才开始渲染，所以页面源码里只会看到空的<div id="root"></div>。但Next.js的Client Component采用的是"预渲染+客户端注水"的混合模式：

  1. 先在服务器/构建时把组件渲染成静态HTML，直接输出到页面源码里（这就是你看到"Hello World"的原因）；
  2. 浏览器加载页面后，会下载对应的客户端JS，把静态HTML"激活"成可交互的React组件，此时组件才能响应客户端事件、调用浏览器API。

• 验证Client Component的客户端特性
  你可以给Client Component添加依赖客户端环境的逻辑，就能看到预渲染和客户端动态内容的区别：

  'use client';
  
  import { useEffect, useState } from 'react';
  
  export default function ClientHello() {
    const [clientOnlyText, setClientOnlyText] = useState('');
  
    useEffect(() => {
      // 这段代码只会在浏览器端执行
      setClientOnlyText('（客户端已激活）');
    }, []);
  
    return <div>Hello World {clientOnlyText}</div>;
  }
  

  查看页面源码时，只会看到Hello World ，而（客户端已激活）是浏览器加载JS后才会显示的内容，这就能直观区分预渲染部分和客户端动态部分。

• Server Component与Client Component的核心差异

  • Server Component：仅在服务器端渲染，不会向浏览器发送任何React客户端JS，页面源码里的内容就是最终渲染结果，没有后续的注水步骤；
  • Client Component：预渲染静态HTML + 发送客户端JS，既保证了SEO友好（搜索引擎能抓取到完整内容），又保留了客户端交互能力。

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