skills.rest
Sir-chawakorn
Sir-chawakornCOMMUNITY
Explore all skills by this author →
GitHub

manage-client-server-state

Separate server data and client UI state in React and Next.js projects.

9|3|Updated Jun 13, 2026
Search Tags:#caching#state management#next.js#tanstack query#react query#optimistic ui
One-click install
npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill manage-client-server-state
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: manage-client-server-state
Source: https://github.com/Sir-chawakorn/sanook-cli/tree/main/skills/manage-client-server-state
Command: npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill manage-client-server-state

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves the common architectural confusion between server-side data and client-side UI state, preventing bugs caused by manual fetch waterfalls, stale data, and improper state management.

Core Features & Use Cases

  • Server State Management: Implements TanStack Query for robust caching, background refetching, and optimistic UI updates.
  • Client State Strategy: Provides clear guidance on choosing between React Context, Zustand, or local state to minimize unnecessary re-renders.
  • SSR/RSC Integration: Ensures seamless hydration in Next.js applications by aligning server-side prefetching with client-side cache keys.

Quick Start

Use the manage-client-server-state skill to refactor the current component by replacing the existing useEffect fetch logic with TanStack Query and optimizing the client state management.

Frequently Asked Questions about manage-client-server-state

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I separate server state from client UI state in Next.js?▼

TanStack Query manages server state by handling data caching, background refetching, and synchronization automatically. It prevents manual fetch waterfalls and ensures data consistency without requiring complex useEffect logic.

How do I refactor useEffect data fetching to use TanStack Query?▼

Refactoring useEffect data fetching to TanStack Query involves replacing manual fetch logic with query hooks for automatic caching and background refetching. This skill provides the architectural steps to replace useEffect fetches with optimized query hooks.

What is the best way to configure hydration boundaries in a React application?▼

Configuring hydration boundaries in React requires aligning server-side prefetching with client-side cache keys to ensure seamless hydration. This process prevents hydration mismatches and enables efficient state distribution in Next.js SSR applications.

Should I use Zustand or React Context for client state management?▼

Choosing between Zustand and React Context for client state management depends on the need to minimize unnecessary re-renders. This skill provides clear guidance on selecting the right strategy to optimize state distribution and application performance.

How do I implement optimistic UI updates with React Query?▼

Implementing optimistic UI updates with React Query involves configuring mutation logic to instantly reflect changes in the UI before the server response arrives. This skill architects this synchronization to ensure efficient application performance and user experience.

Related Skills

Explore More Software Engineering Skills→
jonmummjonmumm
2

dont-use-use-effect

Identify and correct unnecessary useEffect usage in React components.

Community
Advanced
7a336e6e7a336e6e
1

managing-state

Selects and implements Zustand, TanStack Query, or React Context for frontend state.

Community
Intermediate
EdwinFerminEdwinFermin

tanstack-query

Manage server state in React with caching and synchronization.

Community
Advanced
shafibabarshafibabar
1

react-state-management

Architect React state by separating server data from client UI state.

Community
Advanced