skills.rest
trycompai
trycompaiOFFICIAL
Explore all skills by this author →
Website𝕏@trycompaiGitHub

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
One-click install
npx skills add https://github.com/trycompai/comp --skill data-trycompai
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dieu-donneedieu-donnee

react-expert

Architect React 18+ applications with server components and state management.

Community
Advanced
davepoondavepoon
3.3k

server-actions

Automate server-side mutations and form handling in Next.js apps.

Community
Advanced
mub7865mub7865
1

nextjs-frontend-api-client-patterns

Implement a centralized typed API client layer for Next.js App Router frontends.

Community
Advanced
nathanielcrowell12-specnathanielcrowell12-spec

nextjs

Implement Next.js 15 server components, client components, server actions, and API routes.

Community
Intermediate