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

Version: 22.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
npx create-sitecore-jss --templates nextjs --appName my-nextjs-app --prerender {SSG|SSR}

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.

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:

    RequestResponse
    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:

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

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.

Do you have some feedback for us?

If you have suggestions for improving this article,