21.x
  1. Other frameworks

Upgrade JSS apps to JSS 21.7

Sitecore JavaScript Rendering SDK version 21.7 brings changes to JSS packages, other NPM dependencies, and some environment variables.

Before you begin

This topic describes how to:

Update dependencies in React apps

Upgrading your applications based on JSS templates requires changing some dependencies and replacing their usage.

To upgrade your applications:

  1. In your package.json file, update every @sitecore-jss dependency to use the ~21.7.0 version and replace the deep-equal dependency with fast-deep-equal version ^3.1.3.

  2. In a shell, install or update dependencies in your app by running the following command:

    npm install
  3. Update the /src/Layout.js file as follows:

    • Remove the deepEqual import statement.

    • Import the fastDeepEqual function from the newly added dependency:

      import fastDeepEqual from 'fast-deep-equal/es6/react';
    • Replace the usage of the deepEqual function with the fastDeepEqual function:

      if (fastDeepEqual(prevProps.route, nextProps.route)) return true;

Upgrade JSS Next.js apps to JSS 21.7

In JSS 21.7, Sitecore improved GraphQL retries and upgraded Next.js to version 14.

To upgrade JSS Next.js apps:

Update the Node headless SSR proxy app

In JSS 21.7, the Node headless SSR proxy template adds the sc_site query parameter to Layout Service requests.

To update your Node headless SSR proxy app:

  • In the /src/config.ts file, add query string parameters for Layout service requests using the qsParams configuration property, as follows:

    setHeaders: (_req, _serverRes, proxyRes) => {
        delete proxyRes.headers['content-security-policy'];
      },
      /**
    * Query string parameters to add to Layout Service requests.
    */
    qsParams: sc_site=${siteName},
    //...
If you have suggestions for improving this article, let us know!