Why is createUniqueId() important for hydration?

SolidStart requires IDs to be stable between the server and client. This skill ensures createUniqueId() is called the same number of times on both sides to maintain identical markup.

How does this skill help with browser APIs like window or document?

It provides patterns to guard browser-only calls using 'if (!isServer)' checks or moving logic into 'onMount' and 'createEffect' hooks that only run on the client.

How should I handle UI that only exists on the client?

The skill recommends wrapping client-only components with 'clientOnly' or using the ' ' component to prevent the server from attempting to render or serialize that specific subtree.

What causes hydration mismatches in SolidStart?

Mismatches occur when the server-rendered HTML differs from the initial client-side render, often caused by using browser-only APIs, non-deterministic values like Math.random(), or inconsistent Suspense fallbacks.

SolidStart Hydration Guard

Name: SolidStart Hydration Guard
Author: vallafederico

byvallafederico

0•

개발자 도구

Prevents hydration mismatches in SolidStart applications by ensuring SSR and CSR output symmetry and guarding browser-only APIs.

The SolidStart Hydration Guard skill provides Claude with the specialized knowledge required to build robust full-stack applications using SolidStart. It enforces best practices for Server-Side Rendering (SSR) and Client-Side Rendering (CSR) parity, specifically focusing on gating browser-only globals, maintaining stable IDs with createUniqueId(), and correctly utilizing Suspense and Resources. By implementing these patterns, the skill helps developers avoid common hydration errors, ensure deterministic render outputs, and properly manage client-only UI components through specialized wrappers like clientOnly and onMount.

주요 기능

01Safe browser-only API gating for window and document

02Deterministic ID generation using stable patterns

03Client-only component isolation using clientOnly and NoHydration

04SSR/CSR output symmetry enforcement

050 GitHub stars

06Consistent Suspense and resource fallback management

사용 사례

01Implementing browser-only features like localStorage or matchMedia safely

02Optimizing data serialization and streaming during server rendering

03Fixing 'Hydration Mismatch' errors in SolidStart projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vallafederico/solid-ai-rules solidstart-hydration-guard

For use in Claude.ai and ChatGPT

Download Skill