Switch the pre-rendering method in a JSS Next.js app

Current version: 19.x

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:

RequestResponse

jss create my-first-jss-app nextjs --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).

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.

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

Move or delete <src>/pages/[[..path]].tsx.
Download the file [[..path]].SSR.tsx to <src>/pages/ and rename it to [[..path]].tsx.
Optionally, delete /<src>/lib/sitemap-fetcher.ts.

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

Move or delete the file <src>/pages/[[..path]].tsx.
Download [[..path]].tsx to the folder <src>/pages.
Download sitemap-fetcher.ts to <src>/lib.

Do you have some feedback for us?

If you have suggestions for improving this article,