skills.rest
ngxtm
ngxtmCOMMUNITY
Explore all skills by this author →
GitHub

Next.js Rendering Strategies

Explain Next.js rendering strategies including SSG, ISR, SSR, and PPR.

Updated Jan 22, 2026
Search Tags:#performance#rendering#nextjs#ssr#ssg#isr#ppr
One-click install
npx skills add https://github.com/ngxtm/skill-rule --skill next-js-rendering-strategies-ngxtm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Next.js Rendering Strategies
Source: https://github.com/ngxtm/skill-rule/tree/main/rules/nextjs/rendering
Command: npx skills add https://github.com/ngxtm/skill-rule --skill next-js-rendering-strategies-ngxtm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and implement various Next.js rendering strategies to optimize application performance, scalability, and user experience.

Core Features & Use Cases

  • Rendering Strategy Comparison: Understand the trade-offs between SSG, ISR, SSR, and PPR.
  • Performance Optimization: Learn patterns to avoid SSR waterfalls and improve Time To First Byte (TTFB).
  • Use Case: A developer needs to decide whether to use Static Site Generation (SSG) for a marketing blog, Incremental Static Regeneration (ISR) for an e-commerce product catalog, or Server-Side Rendering (SSR) for a user dashboard. This Skill provides the decision matrix and code examples for each.

Quick Start

Explain the difference between SSR and ISR in Next.js.

Frequently Asked Questions about Next.js Rendering Strategies

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

FAQPage Schema
What is the difference between SSR and ISR in Next.js?▼

Next.js SSG pre-renders pages at build time for maximum performance, while SSR renders pages dynamically on each request. SSG is optimal for static blogs, whereas SSR suits personalized user dashboards requiring fresh data.

How do I decide which Next.js rendering strategy to use for my application?▼

Compare Next.js rendering strategies by analyzing data update frequency and user context. SSG optimizes static marketing pages, ISR balances e-commerce catalogs, and SSR handles personalized dashboards with live data.

How does Partial Prerendering (PPR) work in the Next.js App Router?▼

PPR combines static generation with dynamic rendering by using Suspense boundaries to prerender the static shell of a route while streaming dynamic content, significantly improving Time To First Byte (TTFB).

How do I avoid SSR data waterfall performance issues in Next.js?▼

Avoid SSR waterfalls in Next.js by implementing Suspense for streaming HTML and fetching data in parallel, which prevents sequential blocking requests and improves the overall Time To First Byte (TTFB).

Does Next.js Edge runtime support SSR and SSG?▼

Next.js Edge runtime supports SSR to execute server-side logic closer to users, reducing latency for dynamic routes, while SSG remains a build-time process independent of the chosen runtime environment.

Related Skills

Explore More Software Engineering Skills→
JoaquimCassanoJoaquimCassano
1

nextjs-developer

Optimize Next.js 14+ applications with App Router and edge runtime.

Community
Advanced
minh1609minh1609

firebase-app-hosting-basics

Deploy and manage web apps on Firebase App Hosting with apphosting.yaml.

Community
Intermediate
ArieGoldkinArieGoldkin
10

react-server-components-framework

Design React Server Components with Next.js 15 App Router.

Community
Basic
armanzeroeightarmanzeroeight
29

ssr-ssg-advisor

Advise on Next.js rendering strategies for SSR, SSG, ISR, and CSR.

Community
Intermediate