Skip to main content

Improvement in page loading time with Incremental Static Build

· 2 min read

WebOps now supports Incremental Static Build (ISB), a hybrid server-side and client-side rendering solution. With ISB, only part of the pages are generated during the website build. The others are generated as shoppers start visiting them.

In practice, the first user to load a page triggers its generation. And, once the first load completes, the final page is cached. Then, all subsequent visitors receive the cached version of that page immediately and experience an optimized page loading time.

info

This feature is strongly recommended for stores with thousands of SKUs since generating all SKU pages during the website build may be very time-consuming.

What has changed?​

To improve the loading time of SKU pages, you can now activate Incremental Static Build for your FastStore project. Part of the store's pages will be generated in each build, but the SKU pages will follow the Incremental Static Build behavior described above.

caution

Keep in mind that:

  • A deploy resets the caching status of all pages, meaning that pages previously generated must be requested again in order to be re-generated.
  • Once a page is generated, it will not be re-generated by external content changes. For example, if you edit a given product's description in the VTEX platform, you must redeploy your website to generate the page with the updated description.

What needs to be done?​

In order to activate this capability, follow these steps, according to the framework used in your project.

Gatsby​

  1. Open your FastStore project and update all pages requesting server data to use the following cache-control headers:
return {
  status: 200,
  props: data ?? {},
  headers: {
    'cache-control': 's-maxage=31536000, stale-while-revalidate',
  },
}
  1. Set the following variable to true on your vtex.env file:
vtex.env
USE_STALE_CACHE=true

Next.js​

  1. Open your FastStore project and update all pages requesting server data to use the getStaticProps and getStaticPaths APIs.
  2. Set the following variable to true on your vtex.env file:
vtex.env
USE_STALE_CACHE=true

ON THIS PAGE