---
title: "Optimize performance for metadata-based integration"
slug: "optimize-performance-for-metadata-based-integration"
abstract: "How to optimize the performance of your JSS Next.js app if you're using metadata-based editor integration and have no need of Sitecore Experience Editor."
---
# Optimize performance for metadata-based integration

If you're using JSS 22.1 or later and you've integrated your JSS Next.js app with SitecoreAI Pages [using metadata](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/editor-integration-using-metadata.html "Editor integration 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.

> [!important]
> Metadata-based editing is not currently available in preview mode, so only make these optimizations if you don't intend to use your app as an editing host.

To optimize performance for metadata-based integration:

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

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

2. 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`:

    :::lettered
    1. Remove the following, including the associated code comment:

        ```ts
        // 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:

        ```ts
        <link rel="icon" href={${publicUrl}/favicon.ico} />
        ```

    3. Replace that statement with the following:

        ```ts
        <link rel="icon" href=/favicon.ico`} />
        ```

    :::

3. In `navigation.tsx`:

    :::lettered
    1. Remove the following, including the associated code comment:

        ```ts
        // 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;
        ```

    2. Locate the following statement:

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

    3. Replace that statement with the following:

        ```ts
        <img src=/sc_logo.svg alt="Sitecore" />
        ```

    :::

4. In `lib/config.ts`, remove the following:

    ```ts
    publicUrl?: string;
    ```

5. In `scripts/config/plugins/fallback.ts`, remove the following:

    ```ts
    publicUrl: config.publicUrl || getPublicUrl(),
    ```

6. In `next.config.js`:

    :::lettered
    1. Remove the following, including the associated code comment:

        ```js
        // Set assetPrefix to our public URL
        assetPrefix: publicUrl,
        ```

    2. Then remove the following:

        ```js
        env: {
          PUBLIC_URL: publicUrl,
        },
        ```

    :::

7. If you're connecting Pages to your local instance, update the `ServerSideRenderingEngineApplicationUrl` setting of the rendering host configuration item in SitecoreAI (`/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`.