fix: memoize SEO rendering for table list on start page (#1132)

Add memoized SEO tablelist to startpage, now using json-ld instead of DOM elements

--------

Co-authored-by: Sjur Sutterud Sagen <sjs@ssb.no>

Author: MikaelNordberg

packages/pxweb2/src/app/pages/StartPage/StartPage.spec.tsx

@@ -1,6 +1,7 @@
+import { useMemo, useReducer } from 'react';
 import { vi, Mock } from 'vitest';
 import { MemoryRouter } from 'react-router';
-import { waitFor, within, screen } from '@testing-library/react';
+import { waitFor, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 
 import StartPage from './StartPage';
@@ -11,10 +12,19 @@ import { FilterContext } from '../../context/FilterContext';
 import { useLocaleContent } from '../../util/hooks/useLocaleContent';
 import { renderWithProviders } from '../../util/testing-utils';
 import * as startPageRender from '../../util/startPageRender';
-import * as configModule from '../../util/config/getConfig';
 import { getConfig } from '../../util/config/getConfig';
 import { mockedConfig } from '../../../../test/setupTests';
 
+// Note: `vi.mock` calls are hoisted by Vitest. We declare this mock early so that when `StartPage`
+// (which imports `createTableListSEO`) is evaluated, it receives the mocked implementation.
+vi.mock('../../util/seo/tableListSEO', () => {
+  return {
+    createTableListSEO: vi.fn(() => <div data-testid="table-list-seo" />),
+  };
+});
+
+import { createTableListSEO } from '../../util/seo/tableListSEO';
+
 // Mock screen size via useApp with mutable flags we can control per test
 let mockIsMobile = false;
 let mockIsTablet = false;
@@ -151,7 +161,6 @@ const baseState: StartPageState = {
   lastUsedYearRange: null,
   availableTablesWhenQueryApplied: [],
 };
-const config = configModule.getConfig();
 
 describe('StartPage', () => {
   it('should render successfully', async () => {
@@ -200,49 +209,69 @@ describe('StartPage', () => {
     });
   });
 
-  it('renders the hidden SEO table list with correct number of links', async () => {
-    const { findByRole } = renderWithProviders(
-      <AccessibilityProvider>
-        <MemoryRouter>
-          <StartPage />
-        </MemoryRouter>
-      </AccessibilityProvider>,
-    );
+  it('memoizes TableListSEO content and does not re-render when unrelated state changes', async () => {
+    mockIsMobile = true;
+    mockIsTablet = false;
 
-    const heading = await findByRole('heading', {
-      name: 'TableList(SEO)',
-      hidden: true,
-    });
-    const nav = heading.closest('nav') as HTMLElement;
-    expect(nav).toHaveAttribute('aria-hidden', 'true');
-    const links = await within(nav).findAllByRole('link', { hidden: true });
-    expect(links).toHaveLength(2);
-    links.forEach((a) => expect(a).toHaveAttribute('tabindex', '-1'));
-  });
+    const createTableListSEOMock = createTableListSEO as unknown as Mock;
+    createTableListSEOMock.mockClear();
+
+    // Keep the availableTables array reference stable across re-renders.
+    const tables = [
+      {
+        id: 't1',
+        label: 'Table 1',
+      },
+    ] as unknown as Table[];
 
-  it('prefixes href with language when showDefaultLanguageInPath=true', async () => {
-    config.language.showDefaultLanguageInPath = true;
-    config.language.defaultLanguage = 'en';
+    const mockState: StartPageState = {
+      ...baseState,
+      availableTables: tables,
+      filteredTables: tables,
+    };
 
-    const { findByRole } = renderWithProviders(
+    const mockDispatch = vi.fn();
+
+    function Harness() {
+      const [tick, bump] = useReducer((n: number) => n + 1, 0);
+
+      const contextValue = useMemo(
+        () => ({ state: mockState, dispatch: mockDispatch }),
+        [],
+      );
+
+      return (
+        <div data-testid="harness" data-tick={tick}>
+          <button type="button" onClick={bump}>
+            unrelated
+          </button>
+          <FilterContext.Provider value={contextValue}>
+            <StartPage />
+          </FilterContext.Provider>
+        </div>
+      );
+    }
+
+    renderWithProviders(
       <AccessibilityProvider>
         <MemoryRouter>
-          <StartPage />
+          <Harness />
         </MemoryRouter>
       </AccessibilityProvider>,
     );
 
-    const heading = await findByRole('heading', {
-      name: 'TableList(SEO)',
-      hidden: true,
+    await waitFor(() => {
+      expect(screen.getByTestId('table-list-seo')).toBeInTheDocument();
     });
-    const nav = heading.closest('nav') as HTMLElement;
-    const links = await within(nav).findAllByRole('link', { hidden: true });
-    links.forEach((a) => {
-      expect(a).toHaveAttribute(
-        'href',
-        expect.stringMatching(/^\/en\/table\//),
-      );
+
+    const callsBefore = createTableListSEOMock.mock.calls.length;
+    expect(callsBefore).toBeGreaterThan(0);
+
+    // Trigger an unrelated re-render (parent state), without changing i18n.language or availableTables.
+    fireEvent.click(screen.getByRole('button', { name: 'unrelated' }));
+
+    await waitFor(() => {
+      expect(createTableListSEOMock.mock.calls.length).toBe(callsBefore);
     });
   });
 
@@ -404,11 +433,11 @@ describe('StartPage', () => {
 
   describe('getTopicIcon size selection', () => {
     // Minimal harness that reproduces the getTopicIcon logic using hooks
-    function IconProbe({ table }: { table: Partial<Table> }) {
+    function IconProbe({ table }: Readonly<{ table: Partial<Table> }>) {
       const { isMobile, isTablet } = useApp();
       const isSmallScreen = isTablet === true || isMobile === true;
       const topicIconComponents = useTopicIcons();
-      const topicId = table.subjectCode as string | undefined;
+      const topicId = table.subjectCode;
       const size = isSmallScreen ? 'small' : 'medium';
       const icon = topicId
         ? (topicIconComponents.find((i) => i.id === topicId)?.[size] ?? null)

packages/pxweb2/src/app/pages/StartPage/StartPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext, useState, useRef } from 'react';
+import { useEffect, useContext, useState, useRef, useMemo } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import type { TFunction } from 'i18next';
@@ -58,6 +58,7 @@ import {
   createBreadcrumbItems,
   BreadcrumbItemsParm,
 } from '../../util/createBreadcrumbItems';
+import { createTableListSEO } from '../../util/seo/tableListSEO';
 
 const StartPage = () => {
   const { t, i18n } = useTranslation();
@@ -70,9 +71,10 @@ const StartPage = () => {
   const paginationCount = 15;
   const isSmallScreen = isTablet === true || isMobile === true;
   const topicIconComponents = useTopicIcons();
-  const hasUrlParams =
-    typeof window !== 'undefined' &&
-    new URLSearchParams(window.location.search).toString().length > 0;
+  const hasUrlParams = globalThis.window
+    ? new URLSearchParams(globalThis.window.location.search).toString().length >
+      0
+    : false;
 
   const [isFilterOverlayOpen, setIsFilterOverlayOpen] = useState(false);
   const [visibleCount, setVisibleCount] = useState(paginationCount);
@@ -419,8 +421,7 @@ const StartPage = () => {
 
       let lastPeriodString: string | undefined = table.lastPeriod?.slice(0, 4);
       if (
-        table.timeUnit &&
-        table.timeUnit.toLowerCase() === 'other' &&
+        table.timeUnit?.toLowerCase() === 'other' &&
         table.lastPeriod?.slice(4, 5) === '-'
       ) {
         lastPeriodString = table.lastPeriod?.slice(5, 9);
@@ -709,45 +710,9 @@ const StartPage = () => {
     );
   };
 
-  const renderTableListSEO = () => {
-    return (
-      <nav
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          left: '-9999px',
-          width: '1px',
-          height: '1px',
-          overflow: 'hidden',
-        }}
-      >
-        <h2>TableList(SEO)</h2>
-        <ul>
-          {state.availableTables.map((table) => {
-            const config = getConfig();
-            const language = i18n.language;
-            const tablePath = getLanguagePath(
-              `/table/${table.id}`,
-              language,
-              config.language.supportedLanguages,
-              config.language.defaultLanguage,
-              config.language.showDefaultLanguageInPath,
-              config.baseApplicationPath,
-              config.language.positionInPath,
-            );
-
-            return (
-              <li key={table.id}>
-                <a href={tablePath} tabIndex={-1}>
-                  {table.label}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
-    );
-  };
+  const renderMemoizedTableListSEO = useMemo(() => {
+    return createTableListSEO(i18n.language, state.availableTables);
+  }, [i18n.language, state.availableTables]);
 
   const renderBreadCrumb = () => {
     if (showBreadCrumb) {
@@ -920,7 +885,7 @@ const StartPage = () => {
               </div>
             </div>
           </div>
-          {renderTableListSEO()}
+          {state.availableTables.length > 0 && renderMemoizedTableListSEO}
         </main>
         <div className={cl(styles.footerContent)}>
           <div className={cl(styles.container)}>

packages/pxweb2/src/app/util/seo/tableListSEO.spec.tsx

@@ -0,0 +1,53 @@
+import { createTableListSEO } from './tableListSEO';
+import { Table } from 'packages/pxweb2-api-client/src';
+
+describe('createTableListSEO', () => {
+  it('should create correct JSON-LD script for given tables and language', () => {
+    const tables: Table[] = [
+      {
+        id: 'table1',
+        label: 'Table 1',
+        updated: '',
+        firstPeriod: '',
+        lastPeriod: '',
+        variableNames: [],
+        links: [],
+      },
+      {
+        id: 'table2',
+        label: 'Table 2',
+        updated: '',
+        firstPeriod: '',
+        lastPeriod: '',
+        variableNames: [],
+        links: [],
+      },
+    ];
+    const language = 'en';
+
+    const result = createTableListSEO(language, tables);
+
+    // Extract the JSON-LD content from the script element
+    const jsonLdContent = result.props.children;
+    const jsonLd = JSON.parse(jsonLdContent);
+
+    expect(jsonLd).toEqual({
+      '@context': 'https://schema.org',
+      '@type': 'ItemList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'Table 1',
+          url: expect.stringContaining('/en/table/table1'),
+        },
+        {
+          '@type': 'ListItem',
+          position: 2,
+          name: 'Table 2',
+          url: expect.stringContaining('/en/table/table2'),
+        },
+      ],
+    });
+  });
+});

packages/pxweb2/src/app/util/seo/tableListSEO.tsx

@@ -0,0 +1,43 @@
+import { Table } from 'packages/pxweb2-api-client/src';
+import { getConfig } from '../config/getConfig';
+import { getLanguagePath } from '../language/getLanguagePath';
+
+export function createTableListSEO(language: string, tables: Table[]) {
+  const config = getConfig();
+
+  // Build JSON-LD ItemList with absolute URLs to reduce DOM overhead
+  const itemListElement = tables.map((table, index) => {
+    const tablePath = getLanguagePath(
+      `/table/${table.id}`,
+      language,
+      config.language.supportedLanguages,
+      config.language.defaultLanguage,
+      config.language.showDefaultLanguageInPath,
+      config.baseApplicationPath,
+      config.language.positionInPath,
+    );
+
+    const absoluteUrl = globalThis.window
+      ? new URL(tablePath, globalThis.window.location.origin).href
+      : tablePath;
+
+    return {
+      '@type': 'ListItem',
+      position: index + 1,
+      name: table.label,
+      url: absoluteUrl,
+    };
+  });
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'ItemList',
+    itemListElement,
+  };
+
+  return (
+    <script type="application/ld+json" id="seo-table-list-jsonld">
+      {JSON.stringify(jsonLd)}
+    </script>
+  );
+}