perf: cache aggressively and trim client bundle

Frontend - Dynamic-import Chart.js components on detail/compare views so Chart.js no longer ships in initial JS. - Drop force-dynamic on home, compare, rankings so internal data fetches reuse Next.js's per-call revalidate cache. - Switch /school/[slug] to ISR with a 7-day revalidate window (school data updates annually). - Preconnect to analytics + postcodes.io; remove redundant defer on the Umami Script tag (afterInteractive already covers it). - Bump images.minimumCacheTTL to 1 year. - Extract HowItWorks and Editorial sections as server components passed to HomeView via slot props so their JSX stays out of the client bundle. Backend - Add GZipMiddleware (min 512 bytes). - Add CacheAndETagMiddleware: per-path Cache-Control with long s-maxage + stale-while-revalidate, ETag generation, and 304 on If-None-Match. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-02 13:46:45 +01:00
parent a7ab624a01
commit 62eeee5f7c
14 changed files with 349 additions and 207 deletions
@@ -20,8 +20,8 @@ export const metadata: Metadata = {
  keywords: 'school comparison, compare schools, KS2 comparison, primary school performance',
 };

-// Force dynamic rendering
-export const dynamic = 'force-dynamic';
+// Dynamic via searchParams; remove force-dynamic so internal data fetches
+// can still use Next.js's per-call revalidate cache.

 export default async function ComparePage({ searchParams }: ComparePageProps) {
  const { urns: urnsParam, metric: metricParam } = await searchParams;
@@ -74,8 +74,9 @@ export default function RootLayout({
  return (
    <html lang="en">
      <head>
+        <link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
+        <link rel="preconnect" href="https://api.postcodes.io" />
        <Script
-          defer
          src="https://analytics.schoolcompare.co.uk/script.js"
          data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
          data-performance="true"
@@ -5,6 +5,8 @@

 import { fetchSchools, fetchFilters, fetchDataInfo } from '@/lib/api';
 import { HomeView } from '@/components/HomeView';
+import { HowItWorksSection } from '@/components/HowItWorksSection';
+import { EditorialSection } from '@/components/EditorialSection';

 interface HomePageProps {
  searchParams: Promise<{
@@ -27,8 +29,9 @@ export const metadata = {
  description: 'Search and compare school performance across England',
 };

-// Force dynamic rendering (no static generation at build time)
-export const dynamic = 'force-dynamic';
+// The page reads searchParams, which makes rendering dynamic by default.
+// We don't use `force-dynamic` here so the internal filter/data-info fetches
+// can still hit Next.js's data cache (configured per-call in lib/api.ts).

 export default async function HomePage({ searchParams }: HomePageProps) {
  // Await search params (Next.js 15 requirement)
@@ -75,22 +78,28 @@ export default async function HomePage({ searchParams }: HomePageProps) {
      schoolsData = { schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 };
    }

+    const resolvedFilters = filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
+    const total = dataInfo?.total_schools ?? null;
    return (
      <HomeView
        initialSchools={schoolsData}
-        filters={filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
-        totalSchools={dataInfo?.total_schools ?? null}
+        filters={resolvedFilters}
+        totalSchools={total}
+        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
+        editorial={hasSearchParams ? null : <EditorialSection totalSchools={total} localAuthorityCount={resolvedFilters.local_authorities.length} />}
      />
    );
  } catch (error) {
    console.error('Error fetching data for home page:', error);

-    // Return error state with empty data
+    const emptyFilters = { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
    return (
      <HomeView
        initialSchools={{ schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 }}
-        filters={{ local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
+        filters={emptyFilters}
        totalSchools={null}
+        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
+        editorial={hasSearchParams ? null : <EditorialSection totalSchools={null} localAuthorityCount={0} />}
      />
    );
  }
@@ -22,8 +22,8 @@ export const metadata: Metadata = {
  keywords: 'school rankings, top schools, best schools, KS2 rankings, KS4 rankings, school league tables',
 };

-// Force dynamic rendering
-export const dynamic = 'force-dynamic';
+// Dynamic via searchParams; remove force-dynamic so internal data fetches
+// can still use Next.js's per-call revalidate cache.

 export default async function RankingsPage({ searchParams }: RankingsPageProps) {
  const { metric: metricParam, local_authority, year: yearParam, phase: phaseParam } = await searchParams;
@@ -4,13 +4,48 @@
 * URL format: /school/138267-school-name-here
 */

-import { fetchSchoolDetails } from '@/lib/api';
+import { fetchSchoolDetails, fetchSchools } from '@/lib/api';
 import { notFound, redirect } from 'next/navigation';
 import { SchoolDetailView } from '@/components/SchoolDetailView';
 import { SecondarySchoolDetailView } from '@/components/SecondarySchoolDetailView';
 import { parseSchoolSlug, schoolUrl } from '@/lib/utils';
 import type { Metadata } from 'next';

+/**
+ * Enumerate every school for static generation at build time.
+ *
+ * Set PRERENDER_SCHOOLS=1 in the build environment to enable. When disabled
+ * (or when the API can't be reached), we return an empty list and the route
+ * falls back to ISR on first request — `dynamicParams = true` covers it.
+ */
+export async function generateStaticParams(): Promise<Array<{ slug: string }>> {
+  if (process.env.PRERENDER_SCHOOLS !== '1') return [];
+
+  const params: Array<{ slug: string }> = [];
+  const PAGE_SIZE = 500;
+  let page = 1;
+  let totalPages = 1;
+
+  try {
+    do {
+      const res = await fetchSchools({ page, page_size: PAGE_SIZE });
+      for (const s of res.schools) {
+        const path = schoolUrl(s.urn, s.school_name);
+        const slug = path.replace('/school/', '');
+        params.push({ slug });
+      }
+      totalPages = res.total_pages || 1;
+      page += 1;
+    } while (page <= totalPages);
+  } catch (error) {
+    console.warn('generateStaticParams: API unreachable, falling back to on-demand ISR.', error);
+    return [];
+  }
+
+  console.log(`generateStaticParams: prebuilding ${params.length} school pages.`);
+  return params;
+}
+
 interface SchoolPageProps {
  params: Promise<{ slug: string }>;
 }
@@ -75,8 +110,10 @@ export async function generateMetadata({ params }: SchoolPageProps): Promise<Met
  }
 }

-// Force dynamic rendering
-export const dynamic = 'force-dynamic';
+// ISR: regenerate at most once a week per slug. School data updates annually,
+// so a 7-day cache is plenty and gives sub-100ms TTFB on cache hits.
+export const revalidate = 604800;
+export const dynamicParams = true;

 export default async function SchoolPage({ params }: SchoolPageProps) {
  const { slug } = await params;