Next.js 16 use cache & RSC Streaming: Sub-100ms TTFB

Partial Prerendering (PPR), introduced as an experimental feature (experimental.ppr) back in Next.js 15, has evolved into a completely new paradigm in Next.js 16. Moving beyond the binary “Is this page static or dynamic?” rendering decisions, the "use cache" directive is now standard, enabling you to explicitly control static and dynamic cache boundaries at the component level within a single page.

This guide delivers a comprehensive walkthrough of an enterprise Next.js 16 rendering architecture. By combining the Next.js 16 "use cache" directive with React Server Components (RSC) streaming, you will achieve a sub-100ms Time-to-First-Byte (TTFB) while leveraging the default Turbopack bundler for 10x faster HMR in development.

Key Takeaways

• "use cache" Directive: Declaring this directive at the top of a component or function automatically caches its output on the edge/server during build time or initial render. Subsequent requests are returned instantly from cache, dropping TTFB to under 100ms.
• RSC Streaming + Suspense Holes: A static HTML shell is delivered immediately, while dynamic areas (database queries, API calls) stream chunk-by-chunk inside <Suspense> boundaries as soon as rendering completes.
• Default Turbopack Bundler: Built on Rust, Turbopack is now enabled by default, delivering 5x faster production builds and 10x faster Fast Refresh.
• Introducing proxy.ts: Replaces legacy middleware.ts to cleanly separate network boundaries, offering native framework support for edge logic such as authentication and redirects.
• React 19.2 Integration: Latest React APIs—including View Transitions API, useEffectEvent(), and <Activity> components—work natively out of the box.

1. Legacy PPR vs "use cache" Architecture

Here is the key architectural difference between Next.js 14–15 experimental PPR and Next.js 16 standard:

[Next.js 14-15 PPR (Experimental)] ⚠️
next.config.js ──► experimental: { ppr: true } ──► Page-level static/dynamic determination (Implicit)

[Next.js 16 "use cache" (Standard)] ⭕️
Individual Component/Function ──► "use cache" directive ──► Component-level explicit cache control

2. RSC Streaming Architecture: Dual Rendering with Static Shell + Dynamic Holes

Here is the streaming rendering flow according to the official Next.js 16 documentation:

[HTTP Request Received]
        │
        ▼
[Immediate Static HTML Shell Transmission] ──► Renders layout UI in browser under 0.5s
        │                                        (Cached static content: Header, Nav, Footer, etc.)
        │
        ▼
[Parallel Streaming of Dynamic Suspense Holes]
   ├── <Suspense fallback={<Skeleton/>}>
   │     └── <ProductRecommendations/> ──► Streams chunk immediately upon DB query completion
   │
   └── <Suspense fallback={<Skeleton/>}>
         └── <UserReviews/> ──► Streams chunk immediately upon API response completion

With this pattern, users see the complete layout UI at sub-100ms TTFB, while dynamic content streams and hydrates as soon as backend rendering completes.

3. Practical Implementation Code: "use cache" + RSC + Suspense Streaming

Defining Cached Component (app/components/ProductGrid.tsx)

// Declaring "use cache" automatically stores this Server Component's output
// in the edge/server cache, serving subsequent requests instantly.
"use cache";

import { cacheTag } from 'next/cache';

interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
}

export async function ProductGrid({ category }: { category: string }) {
  // Register category-specific cache tag for fine-grained invalidation
  cacheTag(`products-${category}`);

  const products: Product[] = await fetch(
    `https://api.store.com/products?category=${category}`,
  ).then(res => res.json());

  return (
    <section className="grid grid-cols-2 md:grid-cols-4 gap-6">
      {products.map(product => (
        <article key={product.id} className="rounded-2xl border p-4 hover:shadow-lg transition-shadow">
          <img
            src={product.imageUrl}
            alt={product.name}
            className="w-full h-48 object-cover rounded-xl"
          />
          <h3 className="mt-3 font-semibold text-lg">{product.name}</h3>
          <p className="text-brand-primary font-bold">${product.price.toLocaleString()}</p>
        </article>
      ))}
    </section>
  );
}

Assembling Streaming Page (app/shop/[category]/page.tsx)

import { Suspense } from 'react';
import { ProductGrid } from '@/components/ProductGrid';
import { UserReviews } from '@/components/UserReviews';
import { ProductSkeleton, ReviewSkeleton } from '@/components/Skeletons';

// This page sends a static shell instantly while streaming dynamic sections.
export default async function ShopCategoryPage({
  params,
}: {
  params: Promise<{ category: string }>;
}) {
  const { category } = await params;

  return (
    <main className="max-w-7xl mx-auto px-6 py-12">
      <h1 className="text-3xl font-bold mb-8">{category} Collection</h1>

      {/* Cached Product Grid: "use cache" dramatically reduces TTFB */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductGrid category={category} />
      </Suspense>

      {/* User Reviews: Real-time data streaming */}
      <Suspense fallback={<ReviewSkeleton />}>
        <UserReviews category={category} />
      </Suspense>
    </main>
  );
}

Tag-Based Fine-Grained Invalidation (app/api/revalidate/route.ts)

import { revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

// When products in a specific category update in the CMS, precisely invalidate only that tag
export async function POST(request: NextRequest) {
  const { category, secret } = await request.json();

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

  // Instantly invalidate only the specific category cache instead of the entire site
  revalidateTag(`products-${category}`);

  return NextResponse.json({
    revalidated: true,
    tag: `products-${category}`,
    timestamp: Date.now(),
  });
}

4. Next.js 16 Rendering Performance Benchmarks

Here are core Web Vitals benchmarks measured in an e-commerce project with 10,000 products and 500 categories:

Similar to the Rust bundler trends explored in our Vite 8 & Rolldown 1.0 Bundling Guide, Turbopack in Next.js 16 leverages a Rust-based compiler to dramatically boost developer productivity.

5. proxy.ts: Edge Network Layer Replacing middleware.ts

To resolve the complexity and ambiguous execution scope of legacy middleware.ts, Next.js 16 introduces proxy.ts, a new network boundary entry point.

// proxy.ts: Request proxy executing on the edge network layer
import type { NextProxy } from 'next/proxy';

export default {
  async proxy(request: NextProxy) {
    const url = new URL(request.url);

    // Immediately redirect to login page if auth token is missing
    const token = request.cookies.get('auth-token');
    if (!token && url.pathname.startsWith('/dashboard')) {
      return Response.redirect(new URL('/login', request.url));
    }

    // A/B Testing: Route 50% of traffic to new UI version
    if (url.pathname === '/home' && Math.random() > 0.5) {
      url.pathname = '/home-v2';
      return fetch(url, request);
    }

    // Default pass-through: Forward original request to Next.js server
    return fetch(request);
  },
} satisfies NextProxy;

proxy.ts executes on Cloudflare Workers or Vercel Edge Functions, integrating seamlessly with the edge network proxy patterns discussed in our Cloudflare AI Gateway Cost Control Guide.

6. Enterprise Adoption Checklist

Frequently Asked Questions

How does "use cache" differ from legacy getStaticProps / ISR?

getStaticProps and ISR only allowed page-level cache control, while App Router caching was fragmented across fetch options. "use cache" is declared inline on individual components or functions—enabling Component A to be cached for 10 minutes while Component B renders in real-time on the very same page.

Will existing Webpack plugins work when switching to Turbopack by default?

Most standard Webpack loaders and plugins work out of the box via Turbopack’s compatibility layer. However, plugins with complex custom loader chaining require migration to Turbopack native APIs. You can verify individual plugin compatibility status in the official migration guide.

Can I deploy Next.js 16 to Cloudflare Pages?

Yes, absolutely. With the Build Adapters API introduced in Next.js 16.2, "use cache" and RSC streaming function seamlessly on non-Vercel hosting platforms such as Cloudflare Pages, AWS Amplify, and Netlify.

How do I use the View Transitions API?

React 19.2’s startViewTransition() API is fully integrated into Next.js 16. When navigating via the <Link> component, CSS transition animations apply automatically without requiring third-party libraries.