nextjs-ssr

What problem does it solve?

This Skill prevents Next.js App Router pages from flashing default values when URL-backed state is first rendered without server-provided query knowledge.

Core Features & Use Cases

• Forward server searchParams into useUrlState so the initial render reflects the real URL state and avoids hydration warnings or visible UI flicker.
• Support both initialization approaches: pass searchParams from a Server Component or derive state in a pure Client Component via useSearchParams.
• Choose the correct URL update mode with useHistory to control whether URL changes trigger client-only updates or server re-fetches.

Use case: you have a jobs filtering UI where the filter status is encoded in the URL; this Skill ensures the very first render shows the correct filtered results and keeps the UI consistent during navigation.

Quick Start

Load this skill and wire searchParams from your app/*/page.tsx into a client component’s useUrlState so the initial state is correct before hydration.