skills.rest
putto11262002
putto11262002COMMUNITY
Explore all skills by this author →
GitHub

data-fetching

Optimize server-side data fetching and caching in Next.js 16+ applications.

Updated Nov 4, 2025
Search Tags:#caching#next.js#Suspense#server-side#data-fetching#server-actions#cacheLife
One-click install
npx skills add https://github.com/putto11262002/jimmodel --skill data-fetching-putto11262002
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/putto11262002/jimmodel/tree/main/.claude/skills/data-fetching
Command: npx skills add https://github.com/putto11262002/jimmodel --skill data-fetching-putto11262002

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill covers server-side data fetching and caching patterns in Next.js 16+ applications, helping you fetch data efficiently while keeping UI responsive.

Core Features & Use Cases

  • Cache at the component boundary: Use the "use cache" directive to enable fine-grained caching for page-level or component-level data.
  • Plan data fetching: Identify required data, decide what can be statically rendered vs. streamed, and plan caching with cacheLife() profiles.
  • Best Practices: Never call the ORM directly; instead route data access through server actions and validated shapes.

Quick Start

Implement a page that fetches a list of items via a server action, cache it with a 1-hour lifetime using cacheLife('hours'), and render the results.

Frequently Asked Questions about data-fetching

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

FAQPage Schema
How do I cache data efficiently in Next.js server components?▼

Cache data at the component boundary using the 'use cache' directive in Next.js 16+. This enables fine-grained caching for page and component-level data fetches, keeping UI responsive while reducing redundant queries.

What's the best way to fetch data on the server side in Next.js with Suspense?▼

Route data access through server actions instead of calling your ORM directly, then use Suspense boundaries to stream dynamic data while serving cached content instantly. This balances responsiveness with data freshness.

How do I set cache lifetimes for server-side data in Next.js?▼

Use the cacheLife() function to define cache durations—for example, cacheLife('hours') sets a 1-hour lifetime. Combine with cacheTag and revalidateTag for manual invalidation and background refresh workflows.

Can I use Partial Prerendering with server-side data caching?▼

Yes. Partial Prerendering works with cache-enabled components and layouts in Next.js 16+. Prerender static sections with cached data while streaming dynamic content, balancing performance and freshness.

Do I need to invalidate cached data manually, or does it refresh automatically?▼

Both approaches work. Set automatic expiration with cacheLife lifetimes, or use cacheTag, updateTag, and revalidateTag to manually invalidate and refresh cache on demand when data changes.

What happens if I call the ORM directly instead of through server actions?▼

Calling the ORM directly bypasses validated data shapes and caching patterns, breaking the Skill's architecture. Route all data access through server actions to maintain cache consistency and data validation.

Related Skills

Explore More Software Engineering Skills→
sgcarstrendssgcarstrends
21

server-actions

Create or update Next.js server actions with Zod validation and cache revalidation.

Official
Advanced
AratKruglikAratKruglik
9

nextjs-data-fetching

Fetch, cache, and revalidate data for Next.js routes.

Community
Advanced
BrunoAlpezdevBrunoAlpezdev

next-cache-components

Configure Next.js Cache Components with cacheComponents and use cache directives.

Community
Intermediate
quanngynxquanngynx

static-rendering

Pre-render route HTML at build time using getStaticProps or static params.

Community
Intermediate