Issues with CacheComponents and SEO

[md186]

Summary

I upgraded my website to next.js version 16 and I enabled cache components. I have a prisma function where it makes sense to have a cached response. Today I noticed, that my DOM contains sections from pages which I opened before the current page. These sections are marked with display none but in fact my page contains multiple h1 tags and therefore have an unclean SEO structure.

Additional information

my next config

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    /* config options here */
    sassOptions: {
        includePaths: ["./src/styles"],
    },
    cacheComponents: true, // Enable 'use cache' directive
};

export default nextConfig;

the function where I'm using it

async function getPopularStockCandidates() {
    "use cache";
    // Custom: 1 Stunde revalidate UND expire (nicht 1 Tag expire wie beim "hours" Profil)
    cacheLife({
        stale: 5 * 60, // 5 Minuten client-side
        revalidate: 60 * 60, // 1 Stunde: Background-Refresh wenn Requests kommen
        expire: 60 * 60, // 1 Stunde: Synchron-Refresh wenn KEINE Requests kommen
    });

    return prisma.$queryRaw<
        {
            id: number;
            name: string;
            slug: string;
            isin: string;
            image: string | null;
        }[]
    >`
      SELECT "id", "name", "slug", "isin", "image"
      FROM "Stock"
      WHERE "image" IS NOT NULL
        AND EXISTS (
          SELECT 1
          FROM "StockSeoPage" AS s
          WHERE s."stockId" = "Stock"."id"
            AND s."published" = true
            AND s."locale" = 'de'
        )
      ORDER BY RANDOM()
      LIMIT 5;
    `;
}

The issue im facing doesn't belong to the above function, even if I just enable cacheComponents in the next config and don't use it in the whole project, the described behavior still applies.

I have no idea what I can do

Example

No response

[icyJoseph]

I upgraded my website to next.js version 16 and I enabled cache components. I have a prisma function where it makes sense to have a cached response. Today I noticed, that my DOM contains sections from pages which I opened before the current page. These sections are marked with display none but in fact my page contains multiple h1 tags and therefore have an unclean SEO structure.

How's that SEO related? What's happening here is that Activity components from React, https://react.dev/reference/react/Activity, are being used for the routes you are visiting, https://nextjs.org/docs/app/getting-started/cache-components#navigation-uses-activity, not all routes are kept only some, and it is only as you navigate through the site.

This is why I wonder why you think SEO might be negatively impacted?