school_compare/nextjs-app/components/school/charts.tsx

'use client';

/**
 * Client wrappers for the lazily-loaded charts.
 *
 * `next/dynamic` with `ssr: false` is only legal inside a Client Component,
 * and the sections that render charts are Server Components. These one-line
 * wrappers are the client boundary, so the charts stay browser-only and
 * code-split while the section markup around them stays on the server.
 *
 * Chart.js is ~64 KB gzipped, so keeping it lazy matters.
 */

import dynamic from 'next/dynamic';

export const PerformanceChart = dynamic(
  () => import('../PerformanceChart').then((m) => m.PerformanceChart),
  { ssr: false },
);

export const SatsChart = dynamic(() => import('../SatsChart'), { ssr: false });

export const AdmissionsTrendChart = dynamic(
  () => import('../AdmissionsTrendChart'),
  { ssr: false },
);

export const CutoffTrendChart = dynamic(
  () => import('../CutoffTrendChart'),
  { ssr: false },
);