What's the right pattern for code splitting?


I have next.js website that has a header using some profile data and pages that show the personal data e.g. profile/about, profile/settings, profile/items.

Header only retrieves login status and user display name.

Should I use fragments for splitting that code per page (every page will have to request its info + fragment for the profile header)? And profile header would be just a dummy component.

The profile header will fetch and render its data on every single page making a separate query. And webpage will run another query to retrieve per page data. If so, should it have a different query name and use a different storage key?

Which way is the better and why?
My key metrics: performance and good developer experience.

It’s difficult to address your performance concerns without knowing how much data you’re pulling in or how complex your queries are, but in terms of developer experience fragments can be really great! (and they can be great with respect to performance as well). See this blog post for the fragment approach we follow while building our SaaS: Using GraphQL Fragments for safer, cleaner, and faster code - Apollo Blog