JSTAcademy
0 XP
Dashboard
Crash Courses
Data Fetching & Caching
11 min
Basic+150 XP
Crash Courses · Basic

Data Fetching & Caching

Fetch data with server components, React cache, and Next.js fetch extensions.
11 min read+150 XP on completionCert: Next.js Crash Course
Tap any word in the text below to start reading from there.

Data Fetching & Caching

Next.js extends fetch and provides utilities for request deduplication, ISR, and on-demand revalidation.

Fetch with Caching

// Force-cache — serves same data forever until revalidation
const res = await fetch('https://api.example.com/courses', {
  cache: 'force-cache'
})

// Revalidate every 60 seconds (ISR)
const res = await fetch('https://api.example.com/courses', {
  next: { revalidate: 60 }
})

// No cache — always fresh
const res = await fetch('https://api.example.com/courses', {
  cache: 'no-store'
})

Page-level Revalidation (ISR)

// app/courses/page.tsx
export const revalidate = 60  // rebuild every 60s

export default async function CoursesPage() {
  const courses = await getCourses()
  return <CourseList courses={courses} />
}

generateStaticParams — Pre-render Dynamic Routes

// app/courses/[id]/page.tsx
export async function generateStaticParams() {
  const courses = await getCourses()
  return courses.map(c => ({ id: c.id }))
}

export default async function CoursePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const course = await getCourse(id)
  return <CourseDetail course={course} />
}

React cache() — Request Deduplication

import { cache } from 'react'

export const getCourse = cache(async (id: string) => {
  const course = COURSES.find(c => c.id === id)
  return course ?? null
})

// Two server components calling getCourse('cc-js-m01') in the same request
// result in ONE function call — second call returns cached result
0%