reactjs - nextjs13 中所有 mui 组件上的 'use client' 是什么？

Question

我是 React/nextjs 开发的新手。一直认为 React 组件在服务器中呈现并准备好缓存。

但是，如果 nextjs 13 将所有 mui 控件作为客户端组件，渲染发生在哪里？

客户端？同样，即使对于 2 行，您也可以看到， react 方式是 1000 行。

它将整个网站/应用程序下载到客户端移动设备或桌面。

我在“.next”目录中看到 260mb。

谁能解释一下最初下载的是什么部分？

Nextjs .next 目录大小为 260mb

Answer 1

“use-client”是一个约定:

To use a Client Component, create a file inside app and add the "useclient" directive at the top of the file (before any imports).

默认情况下，App 文件夹内的 NextJS 13 上的所有组件都是服务器组件。并且 Server Components 不能使用 useState、useEffect 等客户端特性。

目前，要使用第三方组件，解决方案是为每个不包含指令“使用客户端”的客户端组件创建一个包装器:

'use client';

import { ThirdPartyComponent } from 'third-party-component';

export default ThirdPartyComponent;

我不确定在所有组件中包含“use-client”是否是个好主意。只有带有 React Hook 的组件需要状态或效果。

这是指向 NextJS 13 Server vs Client Components 的链接文档