data

Orchestrate server-to-client SWR workflows for API data fetching.

1.8k|375|Updated Jan 15, 2025

Search Tags:#typescript #react #swr #server-components #api-calls #data-fetching #client-components

Ready to run

npx skills add https://github.com/trycompai/comp --skill data-trycompai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: data
Source: https://github.com/trycompai/comp/tree/main/.agents/skills/data
Command: npx skills add https://github.com/trycompai/comp --skill data-trycompai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data fetching across server and client layers often leads to duplicated logic, inconsistent state, and awkward data loading patterns. This Skill provides a structured approach to fetch, cache, and revalidate data in a unified way.

Core Features & Use Cases

Server→Client→SWR pattern: fetch data on the server, hydrate the client, and keep it fresh with SWR.
Client-side hooks with initial data and fallbackData to ensure instant UI and resilient UX.
API integration and typed data flows using a centralized apiClient to standardize requests across components.

Quick Start

Use this Skill to implement a server→client→SWR data-fetching workflow in your Next.js-style app to fetch and cache data with initial fallback values.

Frequently Asked Questions about data

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

FAQPage Schema

How do I fetch data in React server components and keep it fresh on the client?▼

Fetch data in React server components and keep it fresh by orchestrating a server→client→SWR workflow that performs initial server-side fetches, hydrates the client with fallbackData, and maintains consistent caching and revalidation via SWR.

What is the best way to standardize API calls across server and client components?▼

Standardize API calls across server and client components by using a centralized apiClient to manage typed data flows, ensuring consistent requests and clear boundaries between server-driven fetches and client-side mutations.

How do I prevent inconsistent state when hydrating client components with server data?▼

Prevent inconsistent state when hydrating client components by passing server-fetched data as fallbackData to client-side SWR hooks, ensuring instant UI rendering and resilient UX while maintaining data consistency.

Can I use SWR with TypeScript for typed data fetching and mutations?▼

Use SWR with TypeScript for typed data fetching and mutations by integrating a centralized apiClient that enforces typed data flows across server and client components, enabling consistent caching and revalidation.

Why does my client component duplicate server-side data fetching logic?▼

Client components duplicate server-side data fetching logic when boundaries between server and client are unclear; applying a server→client→SWR pattern resolves this by driving initial fetches from the server and hydrating the client with fallbackData.