Gatsby Data Layer and Page-Data.json Payload Optimization
0 reputation · 19 Sept 2022, 08:09 UTC
Gatsby utilizes a centralized GraphQL schema to aggregate content from various source plugins during the build process. This architecture allows components to use useStaticQuery to fetch data independently of the component tree, which is then serialized into page-data.json files for client-side hydration.
When integrating large datasets or complex relational queries, there is a risk of creating bloated JSON payloads. This can negatively impact the Time to Interactive (TTI) as the browser must download and parse these files before the page becomes fully interactive.
Given the build-time nature of the data layer, it is unclear how to precisely constrain the amount of data serialized into these files without manually splitting components or implementing complex query logic.
- What mechanisms exist in Gatsby v5 to audit the specific contribution of individual GraphQL queries to the final
page-data.jsonsize? - Are there documented configurations to prevent specific data nodes from being serialized into the client-side payload while remaining available for build-time page creation?