deeplink-hydration

Installation
SKILL.md

Deep-link hydration survival

A deep link is a contract: the URL alone must reconstruct the screen. SPAs break this contract during the window between document load and router hydration, when the router's state lags the real URL. If this page renders inside a native WebView, see webview-bridge-pages; this skill owns plain-SPA router/param readiness only.

The failure mode

  • Next.js pages router: statically optimized pages render first with an empty router.query — it's only populated after hydration triggers an update (Next.js docs: Automatic Static Optimization). router.isReady is the flag, usable only client-side (useEffect).
  • Any logic that runs on first render — redirects, fallbacks, analytics, "param missing → go home" guards — sees the empty state and acts on it. The user followed a valid deep link and still lands on the default screen.

Rules

Installs
1
GitHub Stars
1
First Seen
3 days ago
deeplink-hydration — voidmatcha/frontend-niche-skills