bubble-icon

Developer preview
This is a developer preview of GraphCommerce. The documentation will be updated as GraphCommerce introduces new features and refines existing functionality.

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' }
  ...
}
Disabling Static Generation on production

To disable or limit the amount of pages that are statically pre-redered, slice the paths array. This will reduce build-time:

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

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

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

Pages that are not pre-rendered at build-time, will be rendered at run-time (on-demand).

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

When is GraphCommerce a suitable Nextjs ecommerce solution?

When is GraphCommerce a suitable Nextjs ecommerce solution?

GraphCommerce is a suitable Nextjs ecommerce solution if your e-commerce store is already running on Magento Open Source or Adobe Commerce. A Nextjs Magento stack offers interesting features like Static Site Generation (SSG), which will improve Magento catalog performance. Nextjs Magento is also a great combination if you are looking to migrate to Magento.

What are the advantages of a Nextjs React Magento stack?

What are the advantages of a Nextjs React Magento stack?

Nextjs React Magento is considered newer web technology, offering a modern approach to e-commerce development. React can be viewed as the industry standard for large-scale web apps. Next.js adds the ability for Static Site Generation (a form of Server-side Rendering), enabling indexing by search engines. GraphCommerce is a framework that combines Nextjs, React and Magento, and simplifies building Magento Nextjs PWA's.

Next steps