Next.js 15 Performance: 7 Patterns That Actually Move the Needle

// ✅ Good: Server Component wrapper with Client Component islands
// app/dashboard/page.tsx
import { Suspense } from 'react';
import DashboardStats from './ServerStats';  // Server Component
import InteractiveChart from './Chart';      // Client Component
import { LoadingSkeleton } from './Loading';

export default async function Dashboard() {
  // Data fetching happens on server
  const stats = await fetchDashboardStats();

  return (
    <>
      {/* Server-rendered, zero JS */}
      <DashboardStats data={stats} />

      {/* Client-rendered, but only this component */}
      <Suspense fallback={<LoadingSkeleton />}>
        <InteractiveChart initialData={stats.chartData} />
      </Suspense>
    </>
  );
}

// ❌ Bad: Sequential fetching (waterfall)
export default async function Page() {
  const user = await fetchUser();        // Wait 200ms
  const posts = await fetchPosts(user);  // Wait another 300ms
  const stats = await fetchStats(user);  // Wait another 150ms
  // Total: 650ms
}

// ✅ Good: Parallel fetching
export default async function Page() {
  // All requests start simultaneously
  const [user, posts, stats] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchStats()
  ]);
  // Total: 300ms (longest request)
}

export default function Page() {
  return (
    <>
      {/* Shows immediately */}
      <Suspense fallback={<UserSkeleton />}>
        <UserProfile />
      </Suspense>

      {/* Streams in when ready */}
      <Suspense fallback={<PostsSkeleton />}>
        <PostsList />
      </Suspense>

      {/* Independent loading */}
      <Suspense fallback={<StatsSkeleton />}>
        <StatsWidget />
      </Suspense>
    </>
  );
}

import Image from 'next/image';

// ✅ LCP image: Load immediately
<Image
  src="/hero-banner.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  priority  // ← Preloads this image
  sizes="100vw"  // ← Responsive sizing
/>

// ✅ Above-the-fold: Normal loading
<Image
  src="/product.jpg"
  alt="Product"
  width={400}
  height={300}
  sizes="(max-width: 768px) 100vw, 400px"
/>

// ✅ Below-the-fold: Lazy load
<Image
  src="/footer-logo.jpg"
  alt="Logo"
  width={200}
  height={60}
  loading="lazy"  // ← Default, but explicit
/>

import Image from 'next/image';
import imageData from './image-data';

<Image
  src="/product.jpg"
  alt="Product"
  width={400}
  height={300}
  placeholder="blur"
  blurDataURL={imageData.base64}
/>

// ❌ Bad: Everything imported upfront
import HeavyChart from '@/components/HeavyChart';
import VideoPlayer from '@/components/VideoPlayer';
import PdfViewer from '@/components/PdfViewer';

// ✅ Good: Dynamic imports with loading states
import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false  // If it doesn't need SSR
});

const VideoPlayer = dynamic(() => import('@/components/VideoPlayer'), {
  loading: () => <div>Loading player...</div>
});

// Conditional loading
function Dashboard() {
  const [showPdf, setShowPdf] = useState(false);

  const PdfViewer = useMemo(
    () => dynamic(() => import('@/components/PdfViewer')),
    []
  );

  return (
    <>
      <button onClick={() => setShowPdf(true)}>View PDF</button>
      {showPdf && <PdfViewer url="/doc.pdf" />}
    </>
  );
}

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
import { getArticle } from '@/lib/blog';

// ✅ Good: Reuse data fetching
export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params;
  const article = await getArticle(slug);

  return {
    title: article.title,
    description: article.metaDescription,
    openGraph: {
      title: article.title,
      description: article.metaDescription,
      images: [article.featuredImage.url],
      type: 'article',
      publishedTime: article.publishDate,
    },
    twitter: {
      card: 'summary_large_image',
      title: article.title,
      description: article.metaDescription,
      images: [article.featuredImage.url],
    },
  };
}

export default async function ArticlePage(
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const article = await getArticle(slug);  // Cached!

  return <Article data={article} />;
}

// app/layout.tsx
import { Inter, Playfair_Display } from 'next/font/google';

// ✅ Good: Variable fonts for flexibility
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',  // ← Prevents invisible text
  preload: true,    // ← Faster loading
});

const playfair = Playfair_Display({
  subsets: ['latin'],
  variable: '--font-playfair',
  display: 'swap',
  weight: ['400', '700'],
});

export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable} ${playfair.variable}`}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

/* globals.css */
h1, h2, h3 {
  font-family: var(--font-playfair);
}

body {
  font-family: var(--font-inter);
}

// app/blog/[slug]/page.tsx

// Generate top 100 posts at build time
export async function generateStaticParams() {
  const posts = await getTop100Posts();
  return posts.map((post) => ({ slug: post.slug }));
}

// For other posts, generate on-demand and cache
export const dynamic = 'force-static';
export const revalidate = 3600;  // Revalidate every hour

export default async function BlogPost(
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const post = await getPost(slug);
  return <Article data={post} />;
}

# Run bundle analyzer
BUNDLE_ANALYZE=true npm run build