# SSR & RSC with Impact Nova

How to use Impact Nova in Next.js App Router and other SSR/RSC frameworks.

## Quick rules

1. All interactive Nova components need a Client Component boundary (`"use client"`).
2. Prefer subpath imports (`impact-nova/button`) — never the barrel in app code.
3. Pass serializable props from Server Components to client wrappers.
4. Heavy components (DataTable, Chart, AG Grid) — use `next/dynamic` with `ssr: false` when optional.

## Registry runtime fields

| Field | Values | Meaning |
|-------|--------|---------|
| `ssrSupport` | full \| partial | SSR render safety |
| `rscCompatibility` | client-boundary-required \| client-only | App Router placement |
| `runtimeGuidance` | string | Placement advice |
| `bundleTier` | core \| heavy | Bundle weight |

Use MCP: `query_components({ ssrSupport: "full" })` or `get_component({ name: "Button" })`.

## Server page + client island

```tsx
// page.tsx — Server Component
import { Filters } from "./filters";
export default async function Page() {
  const data = await fetchData();
  return <Filters items={data} />;
}
```

```tsx
// filters.tsx
"use client";
import { Select } from "impact-nova/select";
export function Filters({ items }: { items: string[] }) {
  return <Select options={items.map((v) => ({ label: v, value: v }))} />;
}
```

## Heavy grid

```tsx
const DataTable = dynamic(
  () => import("impact-nova/data-table").then((m) => m.DataTable),
  { ssr: false },
);
```

## Providers

Wrap once at app root: **`ImpactNovaProviders`** from `impact-nova/form` (bundles i18n + `TooltipProvider`).