nextjs13 中所有 mui 组件上的“使用客户端”是什么？

Question

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

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

客户端？正如你所看到的，即使对于 2 行，React 的做法也是 1000 行。

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

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

有人可以解释一下最初下载的是哪部分吗？

Nextjs .next 目录大小为 260mb

Answer 1

“use-client”是一个约定：

要使用客户端组件，请在应用程序内创建一个文件，并在文件顶部（在任何导入之前）添加“use client”指令。

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

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

'use client';

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

export default ThirdPartyComponent;

我不确定在所有组件中包含“use-client”是否是一个好主意。仅对于具有反应钩子的组件才需要，这些组件需要状态或效果。

这是NextJS 13 服务器与客户端组件文档的链接