Next.js 13 Server Components为何同时在客户端执行？MUI场景疑问

为什么console.log在服务端和客户端都会执行？ #

Next.js 13 App Router的渲染机制决定了：

• 不管是Server Component还是标记了"use client"的Client Component，组件函数内的渲染代码都会先在服务端执行一次，用于生成静态HTML（SSG）或服务器渲染（SSR）内容，再发送给客户端。
• 客户端拿到HTML后会进行「水合（Hydration）」，绑定交互逻辑，这时候组件代码会再次执行。所以你看到的日志会在两端都出现——"use client"只是标记组件需要在客户端运行交互逻辑，但服务端仍会先渲染一次组件的静态内容。

另外，你不用加"use client"就能用MUI组件，是因为MUI v5.11+已经针对Next.js 13 App Router做了适配：它的核心组件内部已经添加了"use client"标记，自动处理了客户端边界，所以你的父组件即使是Server Component，也能正常渲染MUI组件。

处理令牌等敏感操作是否安全？ #

绝对不安全，原因如下：

• 不管是Server Component还是Client Component，只要代码会在客户端执行（比如组件渲染逻辑、客户端交互逻辑），敏感信息（如令牌、密钥）都会被暴露给客户端。
• 即使是Server Component，若直接在组件里写入敏感信息，打包后的代码仍可能包含这些内容（若未被Next.js正确剔除）。

正确的敏感操作处理方式： #

• 用Server Components处理服务端逻辑：在无"use client"的Server Component里，通过async/await调用服务端专属的逻辑（比如直接查询数据库、调用内部服务），这部分代码只会在服务端执行，不会传到客户端。
• 使用Server Actions：把敏感逻辑封装在标记"use server"的函数里，这类函数只会在服务端运行，客户端只能触发调用，但看不到函数内部的代码和敏感信息。
• 用API路由：将敏感操作放在app/api/下的API路由中，客户端通过请求API来执行操作，敏感逻辑完全在服务端处理。

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