Data Fetching
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
Next.js simplifies data fetching. You don't need useEffect + fetch inside your components anymore.
Who This Is For
Learners following the React or Next.js roadmap.
1. Fetching Data on the Server
In Server Components, you can just await your data.
async function Page() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return <main>{data.title}</main>;
}
Caching (Next.js 15+): By default, fetch is not cached. Opt into caching with { cache: 'force-cache' } or a positive next: { revalidate: 60 } (seconds). Use revalidatePath() or revalidateTag() to invalidate cached data after mutations.
Learn it on Scrimba: -> Interactive Lesson: Fetching Data
2. Server Actions (Mutations)
Server Actions allow you to run server-side code directly from your components without creating an API route. They are perfect for form submissions.
// app/actions.ts
'use server';
export async function createPost(formData: FormData) {
const title = formData.get('title');
await db.post.create({ data: { title } });
}
// app/page.tsx
import { createPost } from './actions';
export default function Page() {
return (
<form action={createPost}>
<input name="title" />
<button type="submit">Create</button>
</form>
);
}
This updates the database directly from the form!
3. Suspense and Streaming
When fetching data takes time, you don't want the user to stare at a blank screen. Use Suspense to show a loading UI.
You can create a loading.tsx file in any route segment, and Next.js will automatically show it while your page loads.
Learn it on Scrimba: -> Interactive Lesson: Loading UI
The Next.js App Router
FreeTake the full free course on data fetching and server actions.
View on Scrimba (opens in a new tab)Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.