rendering-strategies

Select and apply rendering strategies for React and Next.js applications.

3|Updated Apr 12, 2026

Search Tags:#react #rendering #nextjs #ssr #ssg #isr #ppr

Ready to run

npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill rendering-strategies-mauriciodelrio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: rendering-strategies
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/rendering-strategies
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill rendering-strategies-mauriciodelrio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps developers choose and implement the most appropriate rendering strategy (SSG, ISR, SSR, Streaming, RSC, PPR, CSR) for React and Next.js applications, avoiding performance pitfalls and simplifying architecture decisions.

Core Features & Use Cases

Strategy selection matrix that matches data freshness and user interaction requirements to SSG, ISR, SSR, etc.
Implementation snippets for each strategy, including Next.js config settings and React Suspense usage.
Cheat sheet with quick decision criteria for common page types like blogs, e‑commerce catalogs, dashboards, and admin panels.

Quick Start

Use the rendering‑strategies skill to get the optimal rendering approach for a product catalog page that updates hourly.

Frequently Asked Questions about rendering-strategies

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

FAQPage Schema

How do I choose the best React and Next.js rendering strategy for my application?▼

To choose the best React and Next.js rendering strategy, match your data freshness and user interaction requirements against a strategy matrix covering SSG, ISR, SSR, streaming, server components, PPR, and client-side rendering.

What is the difference between SSG, ISR, and SSR in Next.js?▼

SSG generates static pages at build time, ISR allows incremental regeneration of static pages after deployment, and SSR renders pages on the server per request to ensure maximum data freshness for dynamic content.

When should I use Partial Prerendering instead of standard SSR in Next.js?▼

Use Partial Prerendering when you need to combine static page shells with streamed dynamic content, leveraging React Suspense boundaries to isolate sections requiring fresh server data instead of rendering the entire page server-side.

How do I configure Next.js for Incremental Static Regeneration on an hourly schedule?▼

Configure Next.js incremental static regeneration by setting a revalidate time in your data fetching logic, allowing the framework to serve stale static content while updating the page cache in the background up to your specified hourly limit.

Does this rendering strategy selection approach require specific Next.js routing or configuration knowledge?▼

Yes, selecting and implementing rendering strategies requires knowledge of Next.js routing, data fetching APIs, and the ability to configure next.config.ts along with using React Suspense boundaries for streaming and partial prerendering.

What is the best rendering strategy for an e-commerce product catalog that updates hourly?▼

For an e-commerce catalog updating hourly, Incremental Static Regeneration is the optimal rendering strategy, balancing fast static delivery with periodic background data updates to keep product information fresh without full server-side rendering.