Optimize performance for metadata-based integration

Version: 22.x

If you're using JSS 22.1 or later and you've integrated your JSS Next.js app with XM Cloud Pages using metadata, you might have decided you no longer want to integrate with Sitecore Experience Editor. If that's the case, we recommend you make some changes to your app to simplify its configuration and improve its performance.

To optimize performance for metadata-based integration:

In the lib/next-config/plugins/cors-header.js plugin, remove the following header (because CORS is now handled by API handlers and middleware):

RequestResponse

{
  source: '/_next/:path*',
  headers: [
    {
      key: 'Access-Control-Allow-Origin',
      value: config.sitecoreApiHost.replace(/\/$/, ''),
    },
  ],
},

Because there is no further need to enforce absolute URLs, your integration no longer needs to use publicUrl, so we recommend you remove all references to it from your application. Firstly, in layout.tsx:
1. Remove the following, including the associated code comment:
  RequestResponse
```
// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
// If you're not supporting the Experience Editor, you can remove this.
const publicUrl = config.publicUrl;
```
2. Locate the following statement:
  RequestResponse
```
<link rel="icon" href={${publicUrl}/favicon.ico} />
```
3. Replace that statement with the following:
  RequestResponse
```
<link rel="icon" href=/favicon.ico`} />
```

In navigation.tsx:

Remove the following, including the associated code comment:

RequestResponse

// Prefix public assets with a public URL to enable compatibility with Sitecore editors.
// If you're not supporting Sitecore editors, you can remove this.
const publicUrl = config.publicUrl;

Locate the following statement:

RequestResponse

<img src={${publicUrl}/sc_logo.svg} alt="Sitecore" />

Replace that statement with the following:
RequestResponse
```
<img src=/sc_logo.svg alt="Sitecore" />
```

In lib/config.ts, remove the following:
RequestResponse
```
publicUrl?: string;
```
In scripts/config/plugins/fallback.ts, remove the following:
RequestResponse
```
publicUrl: config.publicUrl || getPublicUrl(),
```
In next.config.js:
1. Remove the following, including the associated code comment:
  RequestResponse
```
// Set assetPrefix to our public URL
assetPrefix: publicUrl,
```
2. Then remove the following:
  RequestResponse
```
env: {
  PUBLIC_URL: publicUrl,
},
```
If you're connecting Pages to your local instance, update the ServerSideRenderingEngineApplicationUrl setting of the rendering host configuration item in XM Cloud (/sitecore/system/Settings/Services/Rendering Hosts/Default) to point to the container's external rendering host URL. This URL is typically found in the local container's .env file. Its default value is normally RENDERING_HOST=www.nextjs-starter.localhost.

Do you have some feedback for us?

If you have suggestions for improving this article,