Static Site Generation (SSG) in GraphCommerce

Pages that export a function called getStaticProps, will pre-render at build-time. getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.

In the magento-graphcms example, getStaticProps is used to pre-render all pages. Client-side rendering is used to display user-specific content on pre-rendered pages at run-time.

For example, client-side rendering is used to display customer data on the /account page:

// Example from /pages/account/index.tsx

function AccountIndexPage() {
  const { data, loading, error } = useQuery(AccountDashboardDocument, {
    fetchPolicy: 'cache-and-network',
    ssr: false,
  })
  const { data: config } = useQuery(StoreConfigDocument)
  ...

  const customer = data?.customer
  ...
}

In the same file, getStaticProps runs the DefaultPageDocument query to fetch the data needed to render the layout (header, footer, menu etc.)

// Example from /pages/account/index.tsx

export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
 ...

  const page = staticClient.query({
    query: DefaultPageDocument,
    variables: {
      url: 'account',
      rootCategory: (await conf).data.storeConfig?.root_category_uid ?? '',
    },
  })

  return {
    props: {
      ...(await page).data,
      up: { href: '/', title: 'Home' },
      apolloState: await conf.then(() => client.cache.extract()),
    },
    revalidate: 60 * 20,
  }
}

getStaticPaths

Pages that have dynamic routes need a list of paths to be statically generated. All paths specified by a function called getStaticPaths will be statically pre-rendered at build-time.

For example, getStaticPaths runs the ProductStaticPaths query to fetch a list of all configurable product paths:

// Example from /pages/product/configurable/[url].tsx

export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
 ...
  const path = (locale: string) =>
    getProductStaticPaths(
      graphqlSsrClient(locale),
      locale,
      'ConfigurableProduct',
    )
  const paths = (await Promise.all(locales.map(path))).flat(1)

  return { paths, fallback: 'blocking' }
}

// Example from /node_modules/@graphcommerce/magento-product/components/ProductStaticPaths/ProductStaticPaths.graphql

query ProductStaticPaths($currentPage: Int!, $pageSize: Int!) {
  products(filter: {}, pageSize: $pageSize, currentPage: $currentPage) {
    page_info {
      current_page
      total_pages
    }
    total_count
    items {
      ...ProductLink
    }
  }
}

Build your local environment

You can test the static build process by running it locally:

• cd /examples/magento-graphcms/ Navigate to the project directory
• yarn build Start static build process

The build proces locally will not pre-render product pages to reduce build time:

// Example from /pages/product/configurable/[url].tsx

export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {

  if (process.env.NODE_ENV === 'development') return { paths: [], fallback: 'blocking' }
  ...
}

// Example from /pages/product/configurable/[url].tsx

export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
  ...

  return { paths: paths.slice(0, 10), fallback: 'blocking' }
}

Incremental Static Regeneration

Most pages have value for revalidate in the object that is returned by getStaticProps:

// Example from /pages/product/configurable/[url].tsx

return {
  props: {
    ...(await productPage).data,
    ...(await typeProductPage).data,
    apolloState: await conf.then(() => client.cache.extract()),
    up,
  },
  revalidate: 60 * 20,
}

When set, static pages will be regenerated at run-time (on-demand) every 20 minutes.

The initial request to the product page will show the cached page. After 20 minutes, the regeneration of the page is triggered on the first following request. Once the page has been successfully generated, the cache will be invalidated and the updated product page is shown.

FAQ

Next steps

• Learn more about building pages in GraphCommerce
• Learn more about Static File Serving
• Learn more about getStaticProps ↗ or getStaticPaths ↗ in the Next.js documentation