Mastering Next.js Performance: Edge Rendering & Core Web Vitals

Speed is not just a vanity metric—it directly impacts user engagement, bounce rates, and organic Google search rankings. With modern Core Web Vitals (LCP, INP, and CLS) acting as first-class ranking signals, mastering performance in Next.js is essential for any serious web publisher.

In this guide, we break down actionable patterns to achieve perfect 100/100 Lighthouse performance using Next.js App Router.

1. Zero-JS Server Components by Default #

The biggest breakthrough in React Server Components (RSC) is that components render entirely on the server. No client JavaScript bundle is sent to the browser unless explicitly needed.

// This component ships 0 KB of client JavaScript!
export default async function RecentArticles({ posts }) {
  return (
    <ul className="divide-y divide-zinc-200">
      {posts.map((post) => (
        <li key={post.id} className="py-4">
          <h3 className="font-bold">{post.title}</h3>
          <p className="text-zinc-500">{post.excerpt}</p>
        </li>
      ))}
    </ul>
  );
}

When to Use Client Components: #

Reserve 'use client' only for interactive primitives:

• State management (useState, useReducer)
• Event listeners (onClick, onChange)
• Browser APIs (localStorage, navigator.clipboard)

2. Image Optimization with `next/image` #

Unoptimized images are typically responsible for 70%+ of slow Largest Contentful Paint (LCP) scores. Always serve responsive formats like WebP or AVIF and specify layout hints.

import Image from 'next/image';

<Image
  src="/hero-cover.jpg"
  alt="Blog Hero Banner"
  width={1200}
  height={630}
  priority // Informs the browser to fetch immediately for LCP
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  className="rounded-2xl object-cover"
/>

3. Streaming and Suspense Boundaries #

Instead of waiting for an entire page and all database queries to finish before sending a single byte, wrap slow data fetches in <Suspense>:

import { Suspense } from 'react';
import ArticleSkeleton from '@/components/ArticleSkeleton';
import DynamicComments from '@/components/DynamicComments';

export default function ArticlePage({ slug }) {
  return (
    <main>
      <h1>Article Content</h1>
      <Suspense fallback={<ArticleSkeleton />}>
        <DynamicComments slug={slug} />
      </Suspense>
    </main>
  );
}

The browser receives the primary article content immediately, and the comments stream in progressively as they resolve.

Conclusion #

By adopting React Server Components, aggressive image optimization, and streaming responses, your Next.js blog can effortlessly sustain sub-100ms load times globally.