fix(compare): show SSR data on refresh; drop dead per-page comparison fetch

Refresh bug: on mount the basket is empty for a beat before it hydrates
from the URL. The fetch effect nulled comparisonData on that transient
empty urnKey, then the one-shot 'SSR covers it' skip suppressed the
refetch — leaving the page blank on reload. The effect is now gated on
isInitialized, never blanks on empty (the render already shows the empty
state when nothing is selected), and decides fetch-vs-skip by whether it
already holds each requested school's data (SSR or a prior fetch).

Perf: useComparison ran a useSWR('/api/compare') whose result nothing
consumed — dead weight that fired on every page (Navigation + Toast are
global) whenever the basket was non-empty, and duplicated ComparisonView's
own fetch on the compare page. Removed; the hook now exposes basket state
only.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

nextjs-app/components/ComparisonView.tsx

@@ -107,24 +107,26 @@ export function ComparisonView({
     router.replace(newUrl, { scroll: false });
   }, [urnKey, selectedMetric, pathname, searchParams, router]);
 
-  // Fetch only when the school set changes. The very first run is skipped
-  // when the SSR payload already covers the current set — no double-fetch
-  // of data the server just rendered.
-  const firstFetchRef = useRef(true);
-  useEffect(() => {
-    if (!urnKey) {
-      setComparisonData(null);
-      setNationalAverages(undefined);
-      setBenchmarks(undefined);
-      return;
-    }
+  // Fetch when the school set changes, but only for schools we don't already
+  // have data for. This skips the refetch of SSR-rendered data on load AND
+  // avoids a network call when a school is merely removed. A ref holds the
+  // latest data so the effect can read it without re-running on every fetch.
+  //
+  // Correctness note: we must NOT null the data on a transient empty urnKey.
+  // On mount the basket is empty for a beat before it hydrates from the URL,
+  // and blanking here (then skipping the refetch because SSR "covers" the set)
+  // was leaving the page empty on refresh. The render already shows the empty
+  // state whenever `selectedSchools` is empty, so stale data for deselected
+  // schools is harmless — it's simply unused.
+  const comparisonDataRef = useRef(comparisonData);
+  comparisonDataRef.current = comparisonData;
 
-    if (firstFetchRef.current) {
-      firstFetchRef.current = false;
-      const ssrUrns = new Set(Object.keys(initialData ?? {}));
-      const covered = urnKey.split(',').every((urn) => ssrUrns.has(urn));
-      if (covered && ssrUrns.size > 0) return;
-    }
+  useEffect(() => {
+    if (!isInitialized || !urnKey) return;
+
+    const have = comparisonDataRef.current ?? {};
+    const covered = urnKey.split(',').every((urn) => have[urn] != null);
+    if (covered) return;
 
     fetchComparison(urnKey, { cache: 'no-store' })
       .then((data) => {
@@ -138,8 +140,7 @@ export function ComparisonView({
         // destroy a working comparison the user is looking at.
         console.error('Failed to fetch comparison:', err);
       });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [urnKey]);
+  }, [urnKey, isInitialized]);
 
   // Classify schools by phase using comparison data
   const classifySchool = (school: School): 'primary' | 'secondary' => {