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,
}
}
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
}
}
}
You can test the static build process by running it locally:
cd /examples/magento-graphcms/
Navigate to the project directoryyarn build
Start static build processThe 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' }
...
}
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).
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.
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.
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.