typescriptintermediate
Parallel Data Fetching in Server Components
Fetch multiple data sources in parallel using Promise.all in Next.js server components for faster page loads.
typescriptPress ⌘/Ctrl + Shift + C to copy
// app/dashboard/page.tsx
async function getUser() {
const res = await fetch('https://api.example.com/user', {
next: { revalidate: 60 },
});
return res.json();
}
async function getStats() {
const res = await fetch('https://api.example.com/stats', {
next: { revalidate: 300 },
});
return res.json();
}
async function getNotifications() {
const res = await fetch('https://api.example.com/notifications', {
cache: 'no-store',
});
return res.json();
}
export default async function DashboardPage() {
const [user, stats, notifications] = await Promise.all([
getUser(),
getStats(),
getNotifications(),
]);
return (
<div>
<h1>Welcome, {user.name}</h1>
<StatsGrid stats={stats} />
<NotificationList items={notifications} />
</div>
);
}Use Cases
- dashboard pages
- data-heavy layouts
- performance optimization
Tags
Related Snippets
Similar patterns you can reuse in the same workflow.
typescriptintermediate
Next.js Streaming with Suspense
Stream server components with Suspense boundaries for progressive page loading and better TTFB.
Best for: Progressive loading for data-heavy dashboards
#nextjs#streaming
typescriptbeginner
Next.js Image Optimization Patterns
Advanced next/image usage with responsive sizes, blur placeholders, and custom loaders.
Best for: Optimizing Core Web Vitals with proper image loading
#nextjs#image
typescriptadvanced
Caching Strategies in Next.js
Master Next.js caching with fetch cache, unstable_cache, revalidatePath, and revalidateTag patterns.
Best for: ISR page caching
#nextjs#caching
typescriptintermediate
Dynamic Import and Code Splitting
Use next/dynamic for lazy loading components with custom loading states, SSR control, and named exports.
Best for: Reducing initial bundle size
#nextjs#dynamic-import