Guide
Next.js RSC Charts Without use client
Start server-first. Keep the chart render path in a Server Component, and move only interaction-specific behavior to small client wrappers.
Implementation Pattern
- Fetch data in a Server Component route or loader.
- Render the chart component directly on the server.
- Add client wrappers only for hover/tooltips/gestures when required.
- Preserve stable chart dimensions to avoid layout shifts.
Example
// app/dashboard/page.tsx (Server Component)
import { BarChartHorizontal } from "@/components/charts/bar/examples/BarChartHorizontal";
export default async function DashboardPage() {
const data = await fetchData();
return <BarChartHorizontal data={data} />;
}