Files
school_compare/nextjs-app/app/compare/page.tsx
T
Tudor Sitaru 62eeee5f7c
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 1m1s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 53s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 2m4s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
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

72 lines
2.0 KiB
TypeScript

/**
* Compare Page (SSR)
* Side-by-side comparison of schools with metrics
*/
import { fetchComparison, fetchMetrics } from '@/lib/api';
import { ComparisonView } from '@/components/ComparisonView';
import type { Metadata } from 'next';
interface ComparePageProps {
searchParams: Promise<{
urns?: string;
metric?: string;
}>;
}
export const metadata: Metadata = {
title: 'Compare Schools',
description: 'Compare KS2 performance across multiple primary schools in England',
keywords: 'school comparison, compare schools, KS2 comparison, primary school performance',
};
// 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;
const urns = urnsParam?.split(',').map(Number).filter(Boolean) || [];
const selectedMetric = metricParam || 'rwm_expected_pct';
try {
// Fetch comparison data if URNs provided
let comparisonData = null;
if (urns.length > 0) {
try {
const response = await fetchComparison(urnsParam!);
comparisonData = response.comparison;
} catch (error) {
console.error('Failed to fetch comparison:', error);
}
}
// Fetch available metrics
const metricsResponse = await fetchMetrics();
// Metrics is already an array
const metricsArray = metricsResponse?.metrics || [];
return (
<ComparisonView
initialData={comparisonData}
initialUrns={urns}
metrics={metricsArray}
selectedMetric={selectedMetric}
/>
);
} catch (error) {
console.error('Error fetching data for compare page:', error);
// Return error state with empty metrics
return (
<ComparisonView
initialData={null}
initialUrns={urns}
metrics={[]}
selectedMetric={selectedMetric}
/>
);
}
}