I'm currently refactoring a project with Next.js 15 and I'm struggling with where to draw the line between server components and client components.
For example, data fetching should happen on the server, while interactions (button clicks, form submissions) need to be handled on the client. How should I structure this within a single page for best practices?
Right now, I'm importing only the necessary parts as client components inside a large server component, but the props drilling is getting quite heavy. Would it be better to separate them at the layout level instead? I'd appreciate advice from anyone with experience.
Personally, I approach it as 'server components as containers, client components as presentational.' Using a pattern where the server receives data and passes it to client components as children reduces props drilling. For example, fetching data in ServerComponent, wrapping ClientComponent, and rendering it as {children}. The use hook in Next.js 15 can also help, so check it out. I only separate layouts at a very high level (e.g., sidebar vs. main content).
by 무한도전러371 · ▲0