When to use Server and Client Components?
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
In Next.js, data fetching is recommended in server components for better performance and SEO. However, in some cases, we need to manage client-side states like loading or error states. How can we handle such scenarios while keeping data fetching on the server?
Answered by B33fb0n3
correct, use server components most of the time and if you need interactivity use client components 🙂
7 Replies
use can use the files
In general you can say:
Server components handle SSR with server side fetching
Client components handle the user input and all it's interactivity
loading.tsx and error.tsx for that.In general you can say:
Server components handle SSR with server side fetching
Client components handle the user input and all it's interactivity
Asian black bearOP
let's say we have a subscribe form:
- So we need to fetch data in parent component (server component) and pass the fetch data to the child parent (client component) to handle interactivity like showing errors ?
- So we need to fetch data in parent component (server component) and pass the fetch data to the child parent (client component) to handle interactivity like showing errors ?
yes, pass fetched data via props down to client components. Either show errors there via the client component or you can also handle expected error directly inside your server components. Both ways are fine
Asian black bearOP
i think i have misunderstanding of server/client components , i have an idea that we have not use client component and avoid it as possible
correct, use server components most of the time and if you need interactivity use client components 🙂
Answer
Asian black bearOP
thanks sir, you helped me a lot today , i appreciate it a lot !
happy to help