jaspr-pre-rendering-and-hydration

What problem does it solve?

This Skill helps you structure Jaspr apps for static or server rendering so interactive behavior is correctly enabled through hydration, without runtime crashes or invalid imports.

Core Features & Use Cases

• Dual entrypoints (server vs client): Separate server rendering from client interactivity using main.server.dart and main.client.dart.
• SSR/SSG import safety: Prevent invalid platform-specific imports by enforcing server-only and client-only library rules.
• Hydration with @client: Enable browser interactivity by annotating only the uppermost component that needs it, while hydrating a whole subtree.
• Safe data passing to @client components: Ensure parameters are initialization fields and fully serializable across the server-to-browser boundary.
• Server async rendering: Fetch data during build using server-only async components, then pass results into hydrated client components.

Quick Start

Apply the dual-entrypoint rules for your Jaspr mode in pubspec.yaml, annotate only the topmost interactive component with @client, and pass server-fetched serializable data into that component as initializing parameters.