Some Confusion about NextJS Things
New to Next, and kinda confused lol. Possibly dumb questions, sorry:
1. Is there a quick way to know whether the component I am looking at will be rendered on the server or client in my editor or in browser?
2. Although layouts and pages default to server, apparently regular components take the form of whatever component imports them. So is there some way to specify my components are server, to make sure they don't needlessly get client-side-rendered if imported into a client component?
3. In the image example, the yellow client side /app/listing/layout.tsx contains some server side components inside. Is it true that server rendered components get to the user's browser instantly, then the client sided ones are streamed in later? Wouldn't this cause big UI shifts as they come in? If so how do you minimize this?
4. NextUI uses the provider pattern and wants me to wrap my root layout in their provider. I doubt it, but, would that make my entire app CSR?
Thanks
1 Reply
About 2, yes with
'use server' or 'use client' on the first line of the component’s file
About 4, depends what the wrapper does. Their docs should specify, but also you can try to wrap it and see if you get an error. Next.js won’t just make your SSR into CSR without telling you. The opposite is possible, but SSR into CSR gives you an error because the code itself is different and can’t run on the client (like async functions, 'use server' and others)