What is 'use client' on all mui component in nextjs13?

Question

I am new to react/nextjs development. Always thought react component render in server and ready as cached to go.

But if nextjs 13 make all mui controls as client component where is the render happening?

Client side? Also as you can see even for 2 line , react way of doing it is 1000 lines.

It would download whole website/app to client mobile or desktop.

I see 260mb in my ".next" directory.

Can someone explain what portion is downloaded initially?

Nextjs .next directory size is 260mb

Embolus

Answer 1

"use-client" is a convention:

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

By default, all components on NextJS 13 inside the App folder are server components. And Server Components cannot use client features such as useState, useEffect, etc.

For now, to use third-party components the solution is to create a wrapper for each client component that doesn't include the directive 'use client':

'use client';

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

export default ThirdPartyComponent;

I'm not sure if including 'use-client' in all components is a good idea. It is only required for components with react hooks, which require state or effects.

Here's a link to NextJS 13 Server vs Client Components docs

Squeak

I want to use MUI for dashboard layout. I cant compile any of them without use client under app directory. so i am kinda stuck. Whole idea of react is server side rendering. otherwise no use of react. I do have x-datagrid with use client. its fine but just basic mui graphics also need "use client" directive. all mui import asking for "use client" – Embolus

Here is a page with 3 buttons. why it has to be rendered in client? levelup.gitconnected.com/… basically if we render all in client and write 10000 line code for 10 line html elements. I need a solution. – Embolus

Client Components enable you to add client-side interactivity to your application. In Next.js, they are pre-rendered on the server and hydrated on the client. You can think of Client Components as how components in the Pages Router have always worked. nextjs.org/docs/getting-started/react-essentials – Alston