nextjs-performance

Optimize Next.js 15 App Router performance with caching and streaming strategies.

1|Updated Jan 31, 2026

Search Tags:#caching #streaming #nextjs #app-router #server-components #lcp #partial-prerendering

Ready to run

npx skills add https://github.com/SilverAssist/performance-toolkit --skill nextjs-performance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-performance
Source: https://github.com/SilverAssist/performance-toolkit/tree/main/src/templates/skills/nextjs-performance
Command: npx skills add https://github.com/SilverAssist/performance-toolkit --skill nextjs-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers optimize Next.js 15 App Router performance, addressing LCP, streaming, Partial Prerendering (PPR), and the Server/Client Component architecture to deliver faster, more responsive applications.

Core Features & Use Cases

Performance optimization patterns for Next.js 15 routes and components.
Caching and streaming strategies to improve initial load and runtime UX, including PPR and appropriate use of the cache directive.
Guidance for architecture decisions such as where to place Server vs Client Components and how to structure layouts for optimal LCP and streaming behavior.
Use cases include debugging LCP bottlenecks, implementing image preloading, and configuring routing and metadata streaming.

Quick Start

To begin, enable Next.js 15 features in your app, review your layout and page components for server/dynamic content placement, and apply caching and streaming patterns described in this skill.

Frequently Asked Questions about nextjs-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize Next.js 15 App Router performance for faster LCP?▼

To optimize Next.js 15 App Router performance and improve LCP, structure your layouts to prioritize static content and apply image preloading patterns. You should also strategically place Server and Client Components to prevent render-blocking.

How does Partial Prerendering work with caching strategies in Next.js?▼

Partial Prerendering combines static shells with dynamic content holes, leveraging Next.js caching strategies and the cache directive to prerender pages. This approach streams dynamic parts asynchronously, significantly improving initial load times.

When should I use Server Components versus Client Components for streaming?▼

Use Server Components for static layouts and data fetching to enable immediate streaming, reserving Client Components for interactivity. This architectural split prevents JavaScript execution from blocking the initial server response and improves runtime UX.

Does Next.js 15 support routing metadata streaming?▼

Yes, Next.js 15 supports routing metadata streaming to optimize performance. By configuring metadata streaming within your App Router architecture, you avoid blocking the initial HTML response, allowing the browser to render content progressively.

What is the best way to debug Next.js performance bottlenecks?▼

The best way to debug Next.js performance bottlenecks is to analyze your LCP metrics and review component architecture. Identify slow data fetches in Server Components and apply appropriate caching or streaming patterns to isolate delays.

Can I use the cache directive with experimental PPR in Next.js?▼

Yes, you can use the cache directive alongside experimental PPR in Next.js. Enabling these features allows you to define static segments and cache dynamic data fetches, creating faster, smoother user experiences without sacrificing dynamic capabilities.