Next.js Server Components Vs Client Components: a Decision Framework
A look at server components vs client components, an explanation of when to use each, and explaining a common anti-pattern.
-
In Next.js, the general rule of thumb is to use client components as sparingly as possible.
-
This is because larger client bundles require more JS hydration, hurting your Interaction to Next Paint (INP) and Time to Interactive (TTI).
-
Meaning that the perceived performance of your website will suffer if client components are used excessively.
-
Sometimes client components will need to be used, as your site will likely have to make use of features that are only available in the clients’ browser. Such as:
-
In this case, when creating client components, it is important not to fall for a common anti-pattern that will negatively impact your sites performance:
- The "use client" directive opts all child components into client-side rendering.
- It is therefore very easy to accidentally opt several components into client-side rendering, even if they don’t necessarily need to be rendered on the client.
- This will affect your site's and , negatively impacting the performance for the end user.
Comments (0)