---
title: "Switch the pre-rendering method in a JSS Next.js app"
slug: "switch-the-pre-rendering-method-in-a-jss-next-js-app"
abstract: "Change the pre-rendering method for the catch-all route"
---
# Switch the pre-rendering method in a JSS Next.js app

You can choose the initial pre-rendering form when creating the JSS Next.js app with the optional `prerender` parameter. If you omit the parameter, the application is optimized for static site generation (SSG) by default. For example:

```shell
npx create-sitecore-jss --templates nextjs --appName my-nextjs-app --prerender {SSG|SSR}

```

> [!tip]
> The source path for your Next.js JSS application differs based on how you set up your JSS project.
>
> The following paths are relative to your projects directory:
>
> -   If you set up your project using a Sitecore Containers template, your source directory is located at `<project-folder>/src/rendering/src`.
>
> -   If you created your JSS Next.js app using the JSS CLI, your source directory is located at `<app-name>/src`.
>
>
> To refer to the path to the `src` folder, we use `<src>`. Replace `<src>` with your actual path.

The JSS Next.js application comes with an optional catch-all route defined in `<src>/pages/[[..path]].tsx`. The route can be optimized for either static site generation (SSG) or server-side rendering (SSR).

SSG is ideal when speed, performance, and low runtime cost is essential. Use SSG for pages that:

- Are mostly the same for all site visitors.
- Can be cached and regenerated periodically using `revalidate`.
- Benefit from fast delivery and CDN caching, such as marketing pages, landing pages, and documentation pages.

SSR is ideal for content that is highly personalized, frequently changing, or must always be up to date. Use SSR for pages that:

- Require user-specific or request-specific output, such as personalization based on cookies or headers.
- Must always reflect the latest data and cannot wait for revalidation.
- Depend on per-request security checks or highly dynamic backend responses.

The route file is created, based on the value you provide for the `--prerender` parameter with the functionality for fetching data for SSR or fetching data for SSG.

After creating the application, you may wish to switch the pre-rendering form or use both types of data fetching for [hybrid rendering](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/switch-the-pre-rendering-method-in-a-jss-next-js-app.html#UUID-2bb6d6e3-d4e4-8771-4dd8-e4788e5f0044_section-id235376531342615 "Using hybrid rendering").

To switch the JSS Next.js application from SSG to SSR:

1. In the file `<src>/pages/[[..path]].tsx`, remove the function `getStaticPaths`.
2. In the file `<src>/pages/[[..path]].tsx`, rename the function `getStaticProps` to `getServerSideProps` and remove the `revalidate` property from the object returned by the function.
3. Optionally, delete the folder `/<src>/lib/sitemap-fetcher`.

To switch the JSS Next.js application from SSR to SSG:

1. In the file `<src>/pages/[[..path]].tsx`, define the `getStaticPaths` function, as follows:

    ```typescript
    export const getStaticPaths: GetStaticPaths = async (context) => {
      if (process.env.NODE_ENV !== 'development') {
        // Note: Next.js runs export in production mode
        const paths = await sitemapFetcher.fetch(context);
        return {
          paths,
          fallback: process.env.EXPORT_MODE ? false : 'blocking',
        };
      }
      return {
        paths: [],
        fallback: 'blocking',
      }
    ;};
    ```

2. In the file `<src>/pages/[[..path]].tsx`, rename the function `getServerSideProps` to `getStaticProps` and add the `revalidate` property to the object returned by the function. For example:

    ```typescript
    export const getStaticProps: GetStaticProps = async (context) => {
     const props = await sitecorePagePropsFactory.create(context);
      return {
        props,
        revalidate: 5, // In seconds
        notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
      };
    };
    ```

3. In `<src>/lib`, copy the folder `sitemap-fetcher` from [the app template repository](https://github.com/Sitecore/jss/tree/release/20.0.0/packages/create-sitecore-jss/src/templates/nextjs/src/lib).

## Using hybrid rendering

Next.js lets you set up hybrid rendering, where you use SSG for some routes and SSR for some others. There are two common approaches to hybrid rendering, depending on your requirements:

- *If most pages should be static* - use SSG in the catch-all route and add SSR routes for selected pages in the following way:
    - Render the catch-all route `/<src>/pages/[[...path]].tsx` in SSG using either `getStaticPaths`, or `getStaticProps` with `revalidate`.
    - Render specific routes in SSR using `getServerSideProps`.
- *If most pages should be dynamic* - use SSR in the catch-all route and add SSG routes for selected pages in the following way:
    - Render the catch-all route `/<src>/pages/[[...path]].tsx` in SSR using `getServerSideProps`.
    - Render specific routes in SSG using either `getStaticPaths`, or `getStaticProps` with `revalidate`.