---
title: "Prerendering methods and data fetching strategies in JSS Next.js apps"
slug: "prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps"
abstract: "The relation between prerendering and data-fetching in JSS Next.js apps,"
---
# Prerendering methods and data fetching strategies in JSS Next.js apps

In Next.js apps, there is a strong [correlation between prerendering methods and data fetching](https://nextjs.org/docs/basic-features/data-fetching).

JSS applications created based on the JSS Next.js sample application support all the prerendering forms supported by Next.js applications and, like regular Next.js apps, use different data fetching strategies for each prerendering form.

## Static (site) generation or server-side rendering

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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/preparing-the-list-of-pages-for-static-generation-or-export-in-jss-next-js-apps.html "Preparing the list of pages for static generation or export in JSS Next.js apps").

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`.

> [!tip]
> You can [switch to another method](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/switch-the-pre-rendering-method-in-a-jss-next-js-app.html "Switch the pre-rendering method in a JSS Next.js app") after app creation.

<details>
<summary><h2>Preparing page data</h2></summary>

The class `SitecorePagePropsFactory` exposes the method `create(context: GetServerSidePropsContext | GetStaticPropsContext)` 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:

```typescript
export type SitecorePageProps = {
  site: SiteInfo;
  locale: string;
  layoutData: LayoutServiceData | null;
  dictionary: DictionaryPhrases;
  componentProps: ComponentPropsCollection;
  notFound: boolean;
  redirect?: Redirect;
};

```

To prepare the page data, `SitecorePagePropsFactory` uses the [JSS Layout API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-layout-api.html "JSS Layout API") and the [JSS Dictionary API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-dictionary-api.html "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:

| Property | Description |
| --- | --- |
| `site` | Stores site information resolved by the `SiteResolver` class. |
| `locale` | The factory retrieves the context locale as configured in the `i18n` entry in the `next.config.js` file. Otherwise, it uses the default site language defined by the `site.language` property. |
| `layoutData` | The `layoutData` property stores `LayoutServiceData` from the [Sitecore Layout Service REST API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/layout-service.html) using the JSS `RestLayoutService` or [the Sitecore GraphQL Edge schema](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-experience-edge-schema.html) using the JSS `GraphQLLayoutService`.<br><br>In an SSR context, it sends the context request and context response to provide the ability to [use Sitecore tracking and analytics](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/tracking-and-analytics-integration-in-jss-next-js-apps.html). |
| `dictionary` | The `dictionary` property contains `DictionaryPhrases` from either the [Sitecore Dictionary Service REST API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/dictionary-service.html) (`RestDictionaryService`) or [the Sitecore GraphQL Edge schema](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-experience-edge-schema.html) (`GraphQLDictionaryService`). |
| `componentProps` | The `componentProps` property contains data fetched by [the `ComponentPropsService`](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html). The `ComponentPropsService` runs the functions `getStaticProps/getServerSideProp` in those components that implement these functions. The structure of `componentProps` is a key-value map of the format `{ [renderingUID]: data }`. |
| `notFound` | If the Layout Service returns a `404` status for your page route, it sets the value of `notFound` to `true`, triggering the custom `NotFound` page with the correct `404` status. |

### Next.js Preview context while requesting a page in editing mode

While [working in a Sitecore editor](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/architecture-and-apis-for-integrating-jss-next-js-apps-with-sitecore-editors.html "Architecture and APIs for integrating JSS Next.js apps with Sitecore editors"), the JSS Next.js application enters [preview mode](https://nextjs.org/docs/advanced-features/preview-mode) , and the `SitecorePagePropsFactory` uses the `editingDataService` to retrieve `layoutData`, `dictionary`, and `language` data sent with the editing request.

</details>

<details>
<summary><h2>Incremental static regeneration (ISR)</h2></summary>

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](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration). To use ISR, you define the `revalidate` property in the `GetStaticProps` implementation for that page.

</details>

<details>
<summary><h2>Hybrid rendering</h2></summary>

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 `src/pages/articles/index.tsx` file and a page to display a single article in the `src/pages/articles/[id].tsx` file.

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.

> [!tip]
> You can [customize build-time static paths for dynamic routes](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/customize-build-time-static-paths-in-jss-next-js-apps.html "Customize build-time static paths in JSS Next.js apps").

Prerendering 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 ensure the code defined or used in the pages is [compatible with SSR](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/best-practices-when-working-with-jss.html "Best practices when working with JSS"). 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](https://nextjs.org/docs/advanced-features/automatic-static-optimization) if they are compatible with static HTML generation.

</details>