refactor(detail): fetch national averages on the server

Both detail views fetched /api/national-averages in a useEffect, so the
England-comparison deltas popped in after hydration and every section that
uses them was pinned to the client. The page now fetches it in parallel with
the school details (backend-cached 1h, degrades to null) and passes it down.

Removes one client round-trip per detail page and unblocks the section
extraction.

Characterization tests pass unmodified; only the render helper changed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

nextjs-app/components/SchoolDetailView.tsx

@@ -70,11 +70,15 @@ interface SchoolDetailViewProps {
   admissionsHistory: SchoolAdmissions[];
   deprivation: SchoolDeprivation | null;
   finance: SchoolFinance | null;
+  /** Fetched on the server so the England-comparison deltas are in the
+   *  initial HTML; null when the endpoint is unavailable. */
+  nationalAvg: NationalAverages | null;
 }
 
 export function SchoolDetailView({
   schoolInfo, yearlyData, absenceData,
   ofsted, census, admissions, admissionsHistory, deprivation, finance,
+  nationalAvg,
 }: SchoolDetailViewProps) {
   const router = useRouter();
   const { addSchool, removeSchool, isSelected } = useComparison();
@@ -169,15 +173,6 @@ export function SchoolDetailView({
   const isSecondary = phase.toLowerCase().includes('secondary') || isAllThrough;
   const isPrimary = !isSecondary;
 
-  // National averages (fetched dynamically so they stay current)
-  const [nationalAvg, setNationalAvg] = useState<NationalAverages | null>(null);
-  useEffect(() => {
-    fetch('/api/national-averages')
-      .then(r => r.ok ? r.json() : null)
-      .then(data => { if (data) setNationalAvg(data); })
-      .catch(() => {});
-  }, []);
-
   const primaryAvg = nationalAvg?.primary ?? {};
   const secondaryAvg = nationalAvg?.secondary ?? {};
 

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -70,11 +70,15 @@ interface SecondarySchoolDetailViewProps {
   admissions: SchoolAdmissions | null;
   deprivation: SchoolDeprivation | null;
   finance: SchoolFinance | null;
+  /** Fetched on the server so the England-comparison deltas are in the
+   *  initial HTML; null when the endpoint is unavailable. */
+  nationalAvg: NationalAverages | null;
 }
 
 export function SecondarySchoolDetailView({
   schoolInfo, yearlyData,
   ofsted, census, admissions, deprivation, finance, absenceData,
+  nationalAvg,
 }: SecondarySchoolDetailViewProps) {
   const router = useRouter();
   // Hero map — the "View on map" link opens its fullscreen view.
@@ -88,15 +92,6 @@ export function SecondarySchoolDetailView({
 
   const latestResults = yearlyData.length > 0 ? yearlyData[yearlyData.length - 1] : null;
 
-  const [nationalAvg, setNationalAvg] = useState<NationalAverages | null>(null);
-
-  useEffect(() => {
-    fetch('/api/national-averages')
-      .then(r => r.ok ? r.json() : null)
-      .then(data => { if (data) setNationalAvg(data); })
-      .catch(() => {});
-  }, []);
-
   const secondaryAvg = nationalAvg?.secondary ?? {};
 
   // GIAS OfficialSixthForm flag; missing (pipeline not yet re-run) => false.