提问人：Michal 提问时间：3/20/2023 最后编辑：Michal 更新时间：3/20/2023 访问量：2878
如何避免在 Material UI 的 next 13 中使用“use client”？[复制]
How to avoid using "use client" in next 13 with material ui? [duplicate]
问：
我正在尝试在 next.js 13 中构建一个服务器渲染的应用程序。当我尝试在layout.jsx或任何其他文件中导入任何材质ui组件时，我收到错误。
You're importing a component that needs useLayoutEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
...
Maybe one of these should be marked as a client entry with "use client":
./node_modules\@emotion\use-insertion-effect-with-fallbacks\dist\emotion-use-insertion-effect-with-fallbacks.esm.js
./node_modules\@emotion\styled\dist\emotion-styled.esm.js
./node_modules\@mui\styled-engine\node\index.js
./node_modules\@mui\system\index.js
./node_modules\@mui\material\node\styles\index.js
./node_modules\@mui\material\node\index.js
./app\layout.jsx
有没有办法在不使用 layout.jsx 文件中的“use client”的情况下解决这个问题？我不希望我的应用程序主要是客户端渲染的，而是希望它主要在服务器端使用一些客户端组件，但是 mui 不允许我这样做
答：
1赞
Ahmed Sbai
3/20/2023
#1
这是不可能的，如果组件正在使用或任何其他钩子，它不能在服务器组件中使用，这里就是这种情况useLayoutEffect
您正在导入需要 useLayoutEffect 的组件。它仅适用于客户端组件
正如文档中提到的
使用状态和生命周期效果（useState（）、useReducer（）、useEffect（） 等）
服务器组件 客户端组件 ❌ ✅
因此，您应该在别无选择的客户端组件中执行此操作，但是您仍然可以将所有后端内容移动到服务器组件。
注意：这不会影响您的应用程序并使其变慢
评论