How to avoid using "use client" in next 13 with material ui?

Question

I'm trying to build a server-rendered app in next.js 13. When I try to import any material ui component inside the layout.jsx or any other file I get an error.

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

Is there a way to resolve this without using "use client" in the layout.jsx file? I don't want my app to be mostly client-rendered and instead would prefer it to be mostly on the server side with a few client components, however mui won't let me do that

as Ahmed already said, if the component that you are importing makes use of a hook, you'll be forced to make that component a client component with "use client" directive — Fer Toasted, Mar 20 '23 at 01:07

score 1 · Answer 1 · answered Mar 19 '23 at 23:03

This is not possible, if the component is using useLayoutEffect or any other hook it connot be used inside a server component, it is the case here

You're importing a component that needs useLayoutEffect. It only works in a Client Component

and as it is mentioned in docs

Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc)
Server Component ❌ Client component ✅

so you should do it in a client component you have no choice, however you can still move all the backend stuff to a server component.

Note: this won't affect you app and make it slower

How to avoid using "use client" in next 13 with material ui?

1 Answers1