When should I use SSR instead of SSG in Next.js?

Use SSR (Server-Side Rendering) for pages containing highly dynamic or personalized data that must be fresh for every request. SSG (Static Site Generation) is preferred for content that doesn't change frequently to ensure maximum performance and CDN edge caching.

Does this skill support the Next.js App Router?

Yes, the advisor provides specific instructions and code snippets for both the modern App Router (using 'fetch' cache options) and the legacy Pages Router (using getStaticProps and getServerSideProps).

What is the benefit of using ISR?

Incremental Static Regeneration (ISR) allows you to update static pages after you've built your site without needing to rebuild the entire site, providing the performance of SSG with the freshness of SSR.

How does this help with SEO optimization?

The advisor identifies which rendering strategies (like SSG and SSR) ensure your content is fully rendered on the server, making it easily discoverable and indexable by search engine crawlers compared to CSR.

Next.js Rendering Strategy Advisor

Name: Next.js Rendering Strategy Advisor
Author: armanzeroeight

byarmanzeroeight

•

学习与文档

Optimizes Next.js application performance by recommending the ideal rendering strategy based on content type, SEO needs, and data update frequency.

The Next.js Rendering Strategy Advisor is a specialized skill designed to help developers navigate the complexities of modern web architecture. It provides expert guidance on choosing between Static Site Generation (SSG), Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), and Client-Side Rendering (CSR). By analyzing specific project requirements such as personalization needs and SEO priority, the skill offers tailored implementation patterns, code snippets for both App and Pages routers, and performance optimization tips to ensure fast-loading, scalable applications.

主要功能

01Guidance on Incremental Static Regeneration (ISR)

02Performance troubleshooting for build times and TTFB

03Comprehensive decision matrix for rendering strategies

0419 GitHub stars

05App Router and Pages Router implementation patterns

06On-demand revalidation and caching configuration

使用场景

01Optimizing blog or documentation build times using ISR and fallback strategies

02Selecting the right data fetching strategy for high-traffic e-commerce pages

03Implementing personalized user dashboards with efficient SSR and CSR combinations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add armanzeroeight/fastagent-plugins ssr-ssg-advisor

For use in Claude.ai and ChatGPT

Download Skill