在Next.js中使用'use client'仍看到预渲染HTML的原因

为什么用了'use client'仍能看到预渲染的HTML？ #

Next.js App Router的默认逻辑是所有页面都会先进行服务端预渲染，哪怕你给组件加上了'use client'指令。你看到的初始HTML是页面的基础框架（包括html、head标签，以及客户端组件的静态标记），这些都是服务端生成后返回给浏览器的——'use client'只是标记这个组件需要在客户端激活交互逻辑，并不是让它完全不在服务端生成任何内容。

Next.js如何处理预渲染与客户端渲染的结合？ #

• 服务端预渲染阶段：不管是服务端组件还是客户端组件，Next.js都会在服务端生成对应的初始HTML。对于客户端组件，这里生成的是静态的DOM结构，没有交互逻辑。
• 客户端hydrate阶段：浏览器加载完客户端组件对应的JS chunk后，会把预渲染的静态HTML“激活”——绑定事件、初始化状态，把静态页面变成可交互的动态组件。
• 简单说：预渲染负责首屏内容展示，客户端渲染负责交互逻辑运行。

'use client'组件是否涉及服务端预渲染？ #

是的，完全涉及。Next.js不会因为你标记了'use client'就跳过服务端预渲染步骤，反而会先在服务端生成该组件的初始HTML，再在客户端完成hydrate。

这种处理方式的益处是什么？ #

• 更快的首屏加载速度：用户不用等所有JS下载完成，就能先看到完整的页面内容，感知上加载更快。
• 更友好的SEO：搜索引擎爬虫能直接抓取到预渲染的完整HTML内容，不会因为内容是纯客户端渲染而无法索引。
• 减轻客户端压力：服务端已经完成了DOM结构的生成，客户端只需要处理交互逻辑和状态更新，首次渲染的工作量更少。

你提供的预渲染HTML示例 #

<!DOCTYPE html>
<html id="__next_error__">
  <head>
    <meta charSet="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-6ccd546df7026715.js"/>
    <script src="/_next/static/chunks/fd9d1056-50156f73129e00b3.js" async=""></script>
    <script src="/_next/static/chunks/7023-cc046719c82ee6d4.js" async=""></script>
    <script src="/_next/static/chunks/main-app-55bbd77d79f9187f.js" async=""></script>
    <meta name="robots" content="noindex"/>
    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
    <script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
  </head>
  <body>
    <script src="/_next/static/chunks/webpack-6ccd546df7026715.js" async=""></script>
    <!-- More pre-rendered code here -->
  </body>
</html>

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