Prerendering methods and data fetching strategies in JSS Next.js apps

When creating a JSS Next.js app, the application is initialized with some default options. The default prerendering method is static site generation (SSG), but you can choose server-side rendering (SSR) by providing the --prerender parameter with the value SSR.

The prerendering form you choose determines the data fetching strategy. When scaffolding a JSS Next.js app, the data fetching functionality in the optional catch-all route /src/pages/[[...path]].tsx is tailored for the prerendering method you chose when creating the app or for the default method - SSG.

The JSS Next.js sample application includes examples of both data fetching strategies.

When creating a JSS Next.js app using default options or specifying --prerender SSG , the app creation script copies the file src/pages/[[..path]].tsx, which implements the functions GetStaticPaths and GetStaticProps. The GetStaticPaths implementation generates a list of paths that must be statically generated using the GraphQL Sitemap Service.

When creating a JSS Next.js app specifying --prerender SSR , the app creation script copies the file src/pages/[[..path]].SSR.tsx and renames it to src/pages/[[..path]].tsx. This file implements the function GetServerSideProps.

The implementations of GetStaticProps and GetServerSideProps leverage the SitecorePagePropsFactory definition in the file src/lib/page-props-factory.ts.

The class SitecorePagePropsFactory exposes the method create(context: GetServerSidePropsContext | GetStaticPropsContext) that is responsible for fetching all data needed to render the page (the page props), depending on the context.

The method returns an object of the type SitecorePageProps with the following structure:

export type SitecorePageProps = {
  locale: string;
  layoutData: LayoutServiceData | null;
  dictionary: DictionaryPhrases;
  componentProps: ComponentPropsCollection;
  notFound: boolean;
};

To prepare the page data, SitecorePagePropsFactory uses the JSS Layout API and the JSS Dictionary API for fetching the data making it available to the page in the page props.

The following table describes the page props data:

When statically generating JSS Next.js pages, you can update static pages after you have already built the application for production by using incremental static regeneration. To use ISR, you define the revalidate property in the GetStaticProps implementation for that page.

You can create new pages in a JSS Next.js application and even use dynamic routes. For example, you can add a page to show an index of articles in the file src/pages/articles/index.tsx and a page to display a single article in the file src/pages/articles/[id].tsx.

In an otherwise statically generated app, pages with dynamic content benefit from being server-side rendered because you most likely want such pages to be publicly accessible, indexed by search engines, and editable with a Sitecore editor. Additionally, you might have a considerable number of articles, leading to a long build process if you use static generation.

Pre-rendering and data fetching in JSS Next.js applications have a bi-directional relationship. To server-side render the new pages, all you need to do is implement the GetServerSideProps function to get the initial data for the pages and make sure the code defined or used in the pages is compatible with SSR. All other pages can still use SSG data fetching strategies, including incremental static regeneration.

In a hybrid application, where some pages are server-side rendered and others are statically generated, Next.js automatically renders routes/pages that use getStaticProps as static HTML files if they are compatible with static HTML generation.