Performance

A good eCommerce platform performance leads to a higher engagement rate and conversion. The following are the reasons for considering website performance:

Website speed affects the customer experience.
Increases average spending with speedy funnel progressing rate.
Less bounce rate means more interaction on the store.
Pageviews/session, conversion rate, & avg. order value - all spiked up.
Enhances rank on search engines.

Next Images

The platform leverages Next.js Image component to improve website performance. It enhances performance in the following ways:

Optimizes the image automatically to avoid usage of large images on smaller viewports.
Serves images in next generation formats (like WebP) if the browser supports them.
Works with any image source even if it’s hosted by an external data source (Cloudinary, Imgix, etc.)
Optimizes images on demand as users request them so that the build time won’t increase.
Provides lazy load functionality so that the images load as they are scrolled into the viewport.
Allows for the specification of different image sizes for custom resolutions.
Renders images in a way to avoid Cumulative Layout Shift, a Core Web Vital that Google is going to use in its search ranking.
Automatically changes the quality of images to a lower threshold of 75 percent, which can be updated as per end-user's requirements.

The following is an example usage of Next.js image:

<Image 
  priority
  style={{ maxWidth: '100%' }}
  src={imgSrc}
  alt={imgAltText}
  fill
  className='image' 
/>

Next Links

The platform leverages Next.js Link component to improve website performance. It enhances performance in the following ways:

Links get automatically detected by website crawlers and hence enhance support for SEO.
Allows easy navigation to the linked page without reloading it. It does data prefetch in the background and therefore helps in fast navigation.

The following is an example usage of Next.js link:

<Link legacyBehavior href="/faq" passHref>
  <a>
    Help/FAQ
  </a>
</Link>

Caching

The Next.js storefront is built with custom caching of images to facilitate faster navigation to enhance user experience on Product List & Product Detail Pages.

The product detail page supports virtual caching of all associated images of the product viewed on the detail page. The following API operation is used to fetch the image data for virtual caching on the browser:

Operation	Endpoint	Response
Get Images by Product Code	`/api/v2/catalog/product/{ProductCode}/image`	Gets all images by Product Code for caching on Product Detail Page

Static Pages

The Next.js storefront leverages Static Site Generation (SSG) capability to improve website performation. SSG enables the website data to be statically generated during build-time empowering website with fast loading. During build time, all static pages are generated and stored as HTML with all images and CSS assets.

Product List Pages (PLP)

The PLP cache is regenerated on the server-side after every 60 seconds.

The following API operations are used for static content generation on PLP

Operation	Endpoint	Response
Fetch Product Collection based on Slug	`/api/v2/catalog/collection/slug-minimal/?slug={slug}`	Gets product collection data with details like `product name`, `slug`, `stock code`, `list price`, `price`, `product main image`, `product images`, `current stock`, `variant group code`. It also provides support for paging.

Product Detail Pages (PDP)

The PDP cache is regenerated on the server-side after every 200 seconds.

The following API operations are used for static content generation on PDP

Operation	Endpoint	Response
Fetch Product based on Slug	`/api/v2/catalog/product/slug?slug={slug}`	Gets product details of a product like `product name`, `stock code`, `meta title`, `meta description`, `meta keywords`, `canonical tags`, `list price`, `price`, `product main image`, `product images`, `current stock`, `rating`.
Fetch Product Reviews	`/api/v2/catalog/product/{ProductID}/review`	Gets all product reviews with details like `review title`, `rating`, `posted by`.
Fetch Related Products	`/api/v2/catalog/product/{ProductID}/related-products`	Gets all related products data with details like `product name`, `stock code`, `meta title`, `meta description`, `meta keywords`, `canonical tags`, `list price`, `price`, `product main image`, `product images`, `current stock`, `rating`.
Fetch Product Lookbook	`/api/v2/catalog/lookbook/?stockcode={StockCode}`	Gets product lookbook with details like `name`, `group name`, `description`, `slug`, `main image`.
Fetch Product Promotions	`/api/v2/commerce/promotion/product-promotions?productId={ProductID}`	Gets all promotions applicable on product
Get Images by Product Code	`/api/v2/catalog/product/{ProductCode}/image`	Gets all images by Product Code for caching on Product Detail Page

Page Types

The Next.js storefront boosts performance and SEO compliance by pre-rendering each page. This means that it generates HTML for each page in advance, instead of having it all done at the client-side.

Forms of Pre-rendering

Static Generation (SSG)

The HTML is generated at build time and will be reused at each request. It can be cached by a CDN. SSG builds fetched data and HTML into a page once and then reuses the output from that build for all requests to that page until the next rebuild of the site. The following are examples of pages that use SSG:

Pages	Description
All content pages like `Home`, `Privacy Policy`, `Terms & Conditions/Terms of Use`, `Blogs List`, `Blog`, etc	The content of these pages are fetched from the content management system and stored as HTML during build time.
Product Listing Page (PLP) `{storefrontUrl}/collections/{collectionName}`	The details of product collection including - `carousel images`, `custom info fields`, `list of products`, `content snippets`, `meta info` are generated at build time.
Product Detail Page (PDP) `{storefrontUrl}/product/{slug}`	The details of product including - `basic product info`, `pricing`, `images`, `review information` are generated at build time.

Server-side Rendering (SSR)

The rendering is done on the server at request-time. For every request, the server assembles the fetched data and HTML document and sends the client a complete document. The following are examples of pages that use SSR:

Pages Description
SiteMap {storefrontUrl}/sitemap.xml The sitemap content is formed at the server-side.
Feed {storefrontUrl}/feed/{feedName} The feed content is formed at the server-side.

Pages	Description
SiteMap `{storefrontUrl}/sitemap.xml`	The sitemap content is formed at the server-side.
Feed `{storefrontUrl}/feed/{feedName}`	The feed content is formed at the server-side.

Incremental Static Regeneration (ISR)

The Next.js storefront leverages ISR to address a challenge with SSG, which is the need to rebuild the entire website to update a page’s content. With content updating frequently, SSG might cause rebuilding the entire site frequently. ISR allows the storefront to rebuild only the updated pages after the site is built. The following are examples of pages, the content for which is regenerated at intervals (configured at page-level):

Pages	Description
All content pages like `Home`, `Privacy Policy`, `Terms & Conditions/Terms of Use`, `Blogs List`, `Blog`, etc	The page-cache is revalidated and content rebuilt in interval of 1 minute.
Product Listing Page (PLP) `{storefrontUrl}/collections/{collectionName}`	The page-cache is revalidated and content rebuilt in interval of 1 minute.
Product Detail Page (PDP) `{storefrontUrl}/product/{slug}`	The page-cache is revalidated and content rebuilt in interval of 3 minutes.