Like all complex front-end web applications, Bigcommerce Catalyst Storefront utilizes a number of strategies to ensure performance, which includes both fast-loading pages for users and efficient utilization of back-end resources. We’ve examined the key strategies in the areas of data fetching, caching, and static rendering.
As you customize your own storefront application, it’s important to use best practices and be mindful of preserving the optimization techniques Catalyst employs, in order to avoid introducing performance penalties and unexpected costs.
Follow these ways to boost the performance of your Bigcommerce Catalyst Storefront.
Reduce API Calls
Next.js allows a great deal of flexibility for where you incorporate your data fetching, but it is still important to make as few API calls as possible per page load. Making many separate GraphQL requests can both tax the BigCommerce back-end service (potentially resulting in rate limiting) and also slow page response time.
DO … reduce the total API requests required for a page load by rolling new GraphQL up into the single, “main” query for a page. When it does make sense for an isolated component to handle its own requests, wrap it in a <Suspense> boundary to prevent it from blocking other rendering.
DON’T … scatter custom GraphQL into multiple requests.
The Data Cache
The responses to data fetch requests, such as BigCommerce GraphQL API requests, can be cached in Next.js so that these API requests do not need to be made repeatedly when the same data is needed.
DO … allow the Data Cache to be used for fetch requests in anonymous (non-logged-in) contexts.
DON’T … disable the Data Cache with the fetchOptions.cache “no-store” value when unnecessary. It’s also important not to remove the fetchCache = ‘default-cache’ directive in app/[locale]/layout.tsx.
KV Store
Catalyst utilizes middleware for resolving terse URL paths to the appropriate page routes. This requires a dedicated GraphQL request to look up the path. A KV store is used to cache these results for optimal performance.
DO … make sure that a KV store configuration is set up in your production environments.
DON’T … remove the KV store logic from middlewares/with-routes.ts, unless you intend to pursue a routing strategy that eliminates the extra GraphQL queries entirely.
Partial Prerendering
Partial prerendering enables the static generation of certain page content, optimizing page performance.
DON’T … remove the PPR config in next.config.ts or app/[locale]/(default)/layout.tsx, unless you have an alternate strategy for static generation.
Suspense Boundaries
The Stream and Suspense components enable a fallback loading state to be displayed until a component can be rendered. This ensures that slower-loading content does not prevent the rendering of faster-loading content.
DO … utilize Stream or Suspense to wrap components that rely on dynamic data.
Please contact us at manish@bay20.com or call us at +91-8800519180 / +91-9582784309 for any support related to Bigcommerce. You can also visit the Bigcommerce development page to check the services we offer.
