React Router 7 Framework Mode: Hydration, ClientLoader Streaming, and Typegen Boundaries

--- description: React Router 7 Framework Mode: Hydration, ClientLoader Streaming, and Typegen Boundaries - Enforces strict adherence to React Router 7 framework mode hydration invariants, including single-fetch data boundaries and typegen contracts. Prevents duplicate network waterfalls, turbo-stream hydration mismatches, and cache desynchronization caused by improper clientLoader hydration flags and decoupled types. globs: app/routes/**/*.{ts,tsx}, app/root.tsx, react-router.config.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/rr7-hydration-single-fetch-typegen-standard" --- # React Router 7 Framework Mode: Hydration, ClientLoader Streaming, and Typegen Boundaries > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Bypassing Route Module Typegen and Misconfiguring clientLoader.hydrate During Single-Fetch Streaming ## System Constraints You are a Principal Software Architect enforcing React Router 7 Framework Mode invariants. You must mandate the use of typegen route module types ('./+types/<route-name>'), enforce correct single-fetch streaming semantics via turbo-stream serialization, and ensure clientLoader/clientAction configurations do not destroy SSR hydration state or cause redundant network roundtrips. ## Strict Guidelines - Engineers MUST ALWAYS import route types exclusively from the collocated typegen artifacts ('./+types/[route-file-name]') for LoaderArgs, ActionArgs, ComponentProps, and ErrorBoundaryProps. - Engineers MUST NOT hand-craft custom TypeScript interfaces for loaderData or actionData in route components, as this breaks single-fetch serialization inference. - Engineers MUST invoke 'await serverLoader()' inside 'clientLoader' when 'clientLoader.hydrate = true' is enabled, preserving server-streamed data across the hydration boundary. - Code MUST NOT return raw 'Response' objects or 'json()' helpers in React Router 7 loaders; naked objects, Promises, Sets, Maps, and Dates MUST be returned directly to leverage turbo-stream single-fetch serialization. - Components NEVER render deferred streamed promises without wrapping them in React '<Suspense>' and '<Await>' boundaries to avoid unhandled client hydration fallbacks. - Services MUST return deferred non-critical data as unresolved Promises directly from the loader instead of using deprecated Remix 'defer()' helpers. ## Bad vs Good Implementations ### Route Module Typegen and clientLoader Hydration Invariant #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Declares manual prop types rather than importing from `./+types/dashboard`, wraps loader data in a manual Response object rather than letting turbo-stream serialize raw values, and configures `clientLoader.hydrate = true` without calling `serverLoader()`, which causes the client to bypass SSR data and perform a redundant fetch during hydration. ```typescript import React from "react"; // ANTI-PATTERN: Hand-rolled types break single-fetch streaming inference interface DashboardData { user: { id: string; name: string }; criticalMetrics: Record<string, number>; } // ANTI-PATTERN: Using deprecated json() wrapper in RR7 single-fetch mode export async function loader() { const user = await fetchUser(); return new Response(JSON.stringify({ user }), { headers: { "Content-Type": "application/json" }, }); } // ANTI-PATTERN: hydrate = true without serverLoader() triggers full client refetch // discarding SSR-rendered state and causing layout flicker export async function clientLoader() { const res = await fetch("/api/user"); return { user: await res.json() }; } clientLoader.hydrate = true; export default function Dashboard({ loaderData }: { loaderData: DashboardData }) { return <div>Welcome, {loaderData.user.name}</div>; } ``` #### Production Standard (Correct) > **Standard**: Imports type-safe contracts from `./+types/dashboard`, relies on direct returns for native turbo-stream serialization, calls `serverLoader()` to consume the SSR single-fetch stream before augmenting client-side state, and safely handles deferred streaming using React Suspense and Await. ```typescript import { Suspense } from "react"; import { Await } from "react-router"; import type { Route } from "./+types/dashboard"; import { fetchUser, fetchSlowAnalytics } from "~/server/db.server"; // GOOD: Direct object returns and deferred Promise streaming via single-fetch export async function loader({ params }: Route.LoaderArgs) { const user = await fetchUser(params.id); const slowAnalyticsPromise = fetchSlowAnalytics(params.id); return { user, slowAnalytics: slowAnalyticsPromise, }; } // GOOD: Preserves SSR hydration stream using serverLoader(), then augments cache export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) { const serverData = await serverLoader(); return { ...serverData, clientTimestamp: Date.now(), }; } clientLoader.hydrate = true as const; // GOOD: Route.ComponentProps automatically infers types from both loader and clientLoader export default function Dashboard({ loaderData }: Route.ComponentProps) { return ( <div> <h1>Welcome, {loaderData.user.name}</h1> <Suspense fallback={<p>Loading analytics stream...</p>}> <Await resolve={loaderData.slowAnalytics}> {(analytics) => <div>Metrics: {analytics.score}</div>} </Await> </Suspense> </div> ); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: React Router 7 Framework Mode: Hydration, ClientLoader Streaming, and Typegen Boundaries

React Router 7 Framework Mode: Hydration, ClientLoader Streaming, and Typegen Boundaries defines an industrial-grade behavioral standard for frontend engineering. Enforces strict adherence to React Router 7 framework mode hydration invariants, including single-fetch data boundaries and typegen contracts. Prevents duplicate network waterfalls, turbo-stream hydration mismatches, and cache desynchronization caused by improper clientLoader hydration flags and decoupled types. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Bypassing Route Module Typegen and Misconfiguring clientLoader.hydrate During Single-Fetch Streaming Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Bypassing Route Module Typegen and Misconfiguring clientLoader.hydrate During Single-Fetch Streaming	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS import route types exclusively from the collocated typegen artifacts ('./+types/[route-file-name]') for LoaderArgs, ActionArgs, ComponentProps, and ErrorBoundaryProps.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.