Next.js 15 & React 19 Performance Masterclass: Server Actions, Suspense, and Turbopack Tuning

Next.js 15 introduces game-changing updates for frontend performance and developer experience. With React 19 support, compiler improvements in Turbopack, and revised caching semantics, building high-performing web applications is cleaner than ever.

However, many developers still struggle with bundle bloat, hydration mismatches, and unoptimized server render times.

This guide provides practical techniques to achieve 100/100 Core Web Vitals in Next.js 15.

1. Un-Cached fetch() Defaults in Next.js 15

In Next.js 13 and 14, fetch requests were cached aggressively by default. While fast, this frequently led to confusion when dynamic API endpoints served stale content.

In Next.js 15, fetch requests are un-cached by default (cache: 'no-store'). If you want caching, you must explicitly declare it:

// Explicit caching in Next.js 15
export async function getLatestArticles() {
  const res = await fetch('https://api.vyuhantrix.com/v1/posts', {
    next: { revalidate: 3600 }, // Revalidate every 1 hour
  });
  
  if (!res.ok) {
    throw new Error('Failed to fetch articles');
  }

  return res.json();
}

2. React 19 Server Actions & Optimistic Updates

React 19 elevates Server Actions to first-class form primitive handlers. Combined with useActionState and useOptimistic, user interactions feel instant while keeping server state perfectly synchronized.

'use client';

import { useActionState, useOptimistic } from 'react';
import { updateBookmarkAction } from '@/app/actions';

interface BookmarkProps {
  articleId: string;
  initialBookmarked: boolean;
}

export default function BookmarkButton({ articleId, initialBookmarked }: BookmarkProps) {
  const [state, formAction, isPending] = useActionState(updateBookmarkAction, {
    success: true,
    isBookmarked: initialBookmarked,
  });

  // Optimistic UI state
  const [optimisticBookmarked, setOptimisticBookmarked] = useOptimistic(
    state.isBookmarked,
    (current, newValue: boolean) => newValue
  );

  return (
    <form
      action={async (formData) => {
        setOptimisticBookmarked(!optimisticBookmarked);
        await formAction(formData);
      }}
    >
      <input type="hidden" name="articleId" value={articleId} />
      <button
        type="submit"
        disabled={isPending}
        className={`px-4 py-2 rounded-xl text-xs font-bold transition-all ${
          optimisticBookmarked
            ? 'bg-emerald-500 text-white'
            : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
        }`}
      >
        {optimisticBookmarked ? '✓ Saved to Reading List' : '+ Save Article'}
      </button>
    </form>
  );
}

3. Streaming and Partial Prerendering (PPR)

Partial Prerendering (PPR) combines the speed of static site generation (SSG) with the power of server-side rendering (SSR).

The static parts of your layout (Header, Nav, Hero, Footer) are prerendered into instant HTML at build time. The dynamic parts (user login status, personalized recommendations) stream into <Suspense> boundaries.

import { Suspense } from 'react';
import StaticHero from '@/components/StaticHero';
import DynamicRecommendations from '@/components/DynamicRecommendations';
import RecommendationsSkeleton from '@/components/RecommendationsSkeleton';

export const experimental_ppr = true;

export default function Page() {
  return (
    <main>
      {/* Prerendered static HTML shell */}
      <StaticHero />

      {/* Streamed dynamic server content */}
      <Suspense fallback={<RecommendationsSkeleton />}>
        <DynamicRecommendations />
      </Suspense>
    </main>
  );
}