skills.rest
yutna
yutnaCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-data-access

Orchestrate server and client data fetching with SWR in Next.js apps.

2|Updated Feb 13, 2026
Search Tags:#typescript#caching#react#nextjs#swr#server-components#data-fetching
One-click install
npx skills add https://github.com/yutna/vibe-next-template --skill nextjs-data-access
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-data-access
Source: https://github.com/yutna/vibe-next-template/tree/main/.claude/skills/nextjs-data-access
Command: npx skills add https://github.com/yutna/vibe-next-template --skill nextjs-data-access

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data access in Next.js apps is often ad hoc and inconsistent across server and client boundaries. This skill provides a cohesive set of patterns to fetch, cache, and synchronize data across Server Components and client code.

Core Features & Use Cases

  • Server-Side Data Fetching: standardizes fetching data in Server Components using direct database or API calls.
  • Caching Strategies: demonstrates both server-side cache options and client-side SWR-based caching for responsive UIs.
  • Client-Side Data Fetching: integrates SWR for reactive data dialogs, dashboards, and lists with global config.
  • Hybrid Patterns: combines server-first data with client-side refresh to keep UI in sync.
  • Reference Patterns: includes guidelines for API layers and external data sources to maintain consistency.

Quick Start

Start by implementing a Server Component that fetches data, add a caching layer, and integrate SWR on the client to demonstrate end-to-end data access.

Frequently Asked Questions about nextjs-data-access

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

FAQPage Schema
What's the best way to structure data fetching in Next.js Server Components?▼

To handle data fetching in Next.js Server Components, make direct database or API calls within the component and apply server-side caching strategies. This standardizes server-side data access and ensures consistent rendering before client hydration.

How do I sync Next.js server-side data with client-side fetching?▼

To sync Next.js server-side data with client-side fetching, use a hybrid pattern combining server-rendered data with SWR for client-side refresh. This approach keeps the UI reactive and synchronized with server state changes.

Does SWR work with Next.js Server Components for client-side caching?▼

Yes, SWR integrates with Next.js Server Components to manage client-side caching and reactive data fetching. Use SWR for dialogs, dashboards, and lists with global configuration to maintain consistent UI synchronization.

How do I implement caching strategies for Next.js data access?▼

Implement caching strategies for Next.js data access by configuring server-side cache options for Server Components and integrating SWR for client-side caching. This dual-layer approach ensures responsive UIs while maintaining data consistency.

Why does my Next.js data fetching feel inconsistent across server and client?▼

Next.js data fetching feels inconsistent when access is ad hoc across server and client boundaries. Adopt cohesive patterns for fetching, caching, and synchronizing data using standardized API layer guidelines to resolve the inconsistency.

Related Skills

Explore More Software Engineering Skills→
ilyvscilyvsc
7

nextjs-data-fetching

Implement Next.js data fetching with SWR and React Query caching strategies.

Community
Advanced
Montte-erpMontte-erp
6

tanstack-db

Manage client-side API data with normalized collections, live queries, and optimistic mutations.

Official
Intermediate
gil00pitagil00pita

trpc

Implement end-to-end type-safe tRPC APIs with routers and procedures.

Community
Intermediate
Mte90Mte90
51

Next.js Data Fetching

Explain Next.js App Router data fetching with caching and revalidation strategies.

Community
Intermediate