Next.js Data Fetching Strategies

Next.js offers multiple data fetching strategies. Here's how to choose and implement the right one.

Server Components (Default)#

// app/users/page.tsx
// Server Component - fetches on the server
async function UsersPage() {
  const users = await fetchUsers(); // Runs on server

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

async function fetchUsers(): Promise<User[]> {
  const res = await fetch('https://api.example.com/users', {
    cache: 'force-cache', // Default - cached indefinitely
  });
  return res.json();
}

// With caching options
async function fetchData() {
  // Cached (default)
  const cached = await fetch(url, { cache: 'force-cache' });

  // Not cached - fresh on every request
  const fresh = await fetch(url, { cache: 'no-store' });

  // Revalidate every 60 seconds
  const revalidated = await fetch(url, {
    next: { revalidate: 60 },
  });

  // Revalidate on demand with tag
  const tagged = await fetch(url, {
    next: { tags: ['users'] },
  });
}

export default UsersPage;

Dynamic Data#

// app/posts/[id]/page.tsx
interface Props {
  params: { id: string };
}

// Dynamic route with fresh data
async function PostPage({ params }: Props) {
  const post = await fetchPost(params.id);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

async function fetchPost(id: string): Promise<Post> {
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    cache: 'no-store', // Always fresh
  });

  if (!res.ok) {
    throw new Error('Failed to fetch post');
  }

  return res.json();
}

// Generate static paths
export async function generateStaticParams() {
  const posts = await fetchPosts();

  return posts.map((post) => ({
    id: post.id,
  }));
}

export default PostPage;

Parallel Data Fetching#

// app/dashboard/page.tsx
async function DashboardPage() {
  // Parallel fetching - faster
  const [user, posts, notifications] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchNotifications(),
  ]);

  return (
    <div>
      <UserProfile user={user} />
      <PostList posts={posts} />
      <NotificationList notifications={notifications} />
    </div>
  );
}

// Or use Suspense for progressive loading
async function DashboardPageWithSuspense() {
  return (
    <div>
      <Suspense fallback={<UserSkeleton />}>
        <UserSection />
      </Suspense>
      <Suspense fallback={<PostsSkeleton />}>
        <PostsSection />
      </Suspense>
      <Suspense fallback={<NotificationsSkeleton />}>
        <NotificationsSection />
      </Suspense>
    </div>
  );
}

async function UserSection() {
  const user = await fetchUser();
  return <UserProfile user={user} />;
}

Streaming with Suspense#

// app/page.tsx
import { Suspense } from 'react';

export default function Page() {
  return (
    <main>
      <h1>Dashboard</h1>

      {/* These load independently */}
      <Suspense fallback={<LoadingStats />}>
        <Stats />
      </Suspense>

      <Suspense fallback={<LoadingChart />}>
        <Chart />
      </Suspense>

      <Suspense fallback={<LoadingTable />}>
        <DataTable />
      </Suspense>
    </main>
  );
}

// Each component fetches its own data
async function Stats() {
  const stats = await fetchStats(); // Slow query
  return <StatsDisplay stats={stats} />;
}

async function Chart() {
  const data = await fetchChartData(); // Another slow query
  return <ChartDisplay data={data} />;
}

Client-Side Fetching#

'use client';

import { useState, useEffect } from 'react';
import useSWR from 'swr';

// With SWR (recommended)
function UserPosts({ userId }: { userId: string }) {
  const { data, error, isLoading, mutate } = useSWR(
    `/api/users/${userId}/posts`,
    fetcher
  );

  if (isLoading) return <Loading />;
  if (error) return <Error error={error} />;

  return (
    <div>
      {data.map(post => <Post key={post.id} post={post} />)}
      <button onClick={() => mutate()}>Refresh</button>
    </div>
  );
}

const fetcher = (url: string) => fetch(url).then(res => res.json());

// With useEffect (basic)
function Comments({ postId }: { postId: string }) {
  const [comments, setComments] = useState<Comment[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadComments() {
      const res = await fetch(`/api/posts/${postId}/comments`);
      const data = await res.json();
      setComments(data);
      setLoading(false);
    }

    loadComments();
  }, [postId]);

  if (loading) return <Loading />;

  return <CommentList comments={comments} />;
}

Server Actions#

// app/actions.ts
'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  const post = await db.post.create({
    data: { title, content },
  });

  revalidatePath('/posts');
  redirect(`/posts/${post.id}`);
}

export async function updatePost(id: string, formData: FormData) {
  await db.post.update({
    where: { id },
    data: {
      title: formData.get('title') as string,
    },
  });

  revalidateTag('posts');
}

// app/posts/new/page.tsx
import { createPost } from '@/app/actions';

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Create Post</button>
    </form>
  );
}

Revalidation Strategies#

// Time-based revalidation
export const revalidate = 60; // Revalidate every 60 seconds

async function Page() {
  const data = await fetchData();
  return <div>{data}</div>;
}

// On-demand revalidation
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request: Request) {
  const { path, tag, secret } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }

  if (path) {
    revalidatePath(path);
  }

  if (tag) {
    revalidateTag(tag);
  }

  return Response.json({ revalidated: true });
}

// Usage with fetch tags
async function fetchPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { tags: ['posts'] },
  });
  return res.json();
}

// Trigger revalidation
await fetch('/api/revalidate', {
  method: 'POST',
  body: JSON.stringify({ tag: 'posts', secret: process.env.REVALIDATION_SECRET }),
});

Loading and Error States#

// app/posts/loading.tsx
export default function Loading() {
  return (
    <div className="animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-1/2 mb-4" />
      <div className="h-4 bg-gray-200 rounded w-full mb-2" />
      <div className="h-4 bg-gray-200 rounded w-3/4" />
    </div>
  );
}

// app/posts/error.tsx
'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

// app/posts/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>Post Not Found</h2>
      <p>Could not find the requested post.</p>
    </div>
  );
}

Best Practices#

Server Components:
✓ Default to Server Components
✓ Use parallel fetching
✓ Leverage Suspense boundaries
✓ Cache appropriately

Client Components:
✓ Use SWR or React Query
✓ Handle loading/error states
✓ Implement optimistic updates
✓ Debounce user input

Caching:
✓ Set appropriate cache times
✓ Use tags for grouped revalidation
✓ Consider ISR for static content
✓ Invalidate on mutations

Next.js provides flexible data fetching options. Use Server Components for initial data, Suspense for streaming, and client-side fetching for interactive updates. Choose caching strategies based on how often data changes and how fresh it needs to be.