Fetch, mutate, and stream in the App Router
Quick answer: async Server Components can await fetch, opt into caching with fetch options or revalidate, and pair with loading.tsx / Suspense for polite UX. Server Actions let forms post to server functions without bespoke /api glue—this page links each idea to Scrimba reps.
Who this is for
Devs who default to useEffect fetches for everything and want the Next-native pattern for reads/writes.
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)Read this when…
You are wiring real APIs or databases into Next and need caching + mutations that won’t embarrass you in code review.
Related Scrimba Courses
Practice data flows in guided scrims
Use the free App Router course for fetch + loading UI, then Fullstack for production depth.