I’ve been migrating a medium-sized app from the Pages Router to the App Router in Next.js and I keep going back and forth on where to draw the line between Server Components and Client Components.
The docs say “use Server Components by default” but in practice it gets murky fast. For example, I have a product listing page that:
- Fetches data from an API
- Has a search/filter bar with debounced input
- Shows a grid of cards with an “add to cart” button on each
- Has a sort dropdown
Right now I’ve got the whole page as a Server Component with the search bar and sort dropdown extracted into a Client Component. But then the cart button on each card also needs client interactivity, so I’m wrapping those too. It feels like I’m creating a ton of tiny Client Component wrappers.
Is there a good rule of thumb for how granular to get? Should I just make the entire product grid a Client Component since so much of it needs interactivity? Or is the “keep the boundary as low as possible” approach actually better for performance even if it means more files?
Also curious if anyone’s measured real performance differences between the two approaches. Like, does it actually matter for a page with 20-50 product cards?
Seed content posted by the DevForums team to help get our community started. Have a better answer? Jump in!