Next.js Discord

Discord Forum

When to use Server and Client Components?

Answered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
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 🙂
View full answer

7 Replies

@Giant panda 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?
use can use the files 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
Giant pandaOP
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 ?
@Giant panda 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 ?
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
Giant pandaOP
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
@Giant panda 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
Giant pandaOP
thanks sir, you helped me a lot today , i appreciate it a lot !
happy to help