static-rendering

Configure Next.js static rendering with getStaticProps and getStaticPaths.

1|Updated Jul 12, 2025

Search Tags:#caching #nextjs #cdn #ssg #ttfb #static generation #incremental static regeneration

Ready to run

npx skills add https://github.com/ubay1/next15-starter --skill static-rendering-ubay1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: static-rendering
Source: https://github.com/ubay1/next15-starter/tree/main/.agents/skills/static-rendering
Command: npx skills add https://github.com/ubay1/next15-starter --skill static-rendering-ubay1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Static rendering (SSG) solves slow server response times and heavy client JavaScript by pre-generating HTML at build time, so users receive cacheable pages that load quickly.

Core Features & Use Cases

Build-time HTML generation: Pre-render routes into static HTML so TTFB improves and server work during requests is minimized.
Dynamic route pre-rendering: Generate pages for each known parameter set using static paths (e.g., products/[id]) so individual detail pages are also fast.
Use when content is stable: Ideal for About pages, marketing pages, blog lists, and product listings that don’t change per request, with optional periodic updates via ISR.

Quick Start

Apply static rendering to your Next.js pages by generating HTML at build time for public content routes that do not depend on per-request user state.

Frequently Asked Questions about static-rendering

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

FAQPage Schema

How do I pre-render Next.js pages at build time to improve TTFB?▼

Pre-render Next.js pages at build time by configuring static generation with getStaticProps for data fetching and getStaticPaths for dynamic routes. This eliminates runtime server rendering overhead, delivering cacheable CDN-ready HTML with improved Time To First Byte.

What is static generation and when should I use it instead of server rendering?▼

Static generation pre-renders HTML at build time rather than per request. Use it for stable content like marketing pages, blog listings, and product detail pages where parameters are known during build, eliminating slow server response times and heavy client JavaScript overhead.

Can I statically generate dynamic routes like products/[id] in Next.js?▼

Yes, statically generate dynamic routes by enumerating known parameter sets using getStaticPaths or generateStaticParams. This pre-renders individual detail pages into static HTML at build time so each product page loads quickly from the CDN without runtime server work.

Does static rendering support incremental updates without rebuilding the entire site?▼

Yes, static rendering optionally supports Incremental Static Regeneration (ISR) for periodic content updates. ISR allows you to update static pages after the initial build without rebuilding the whole site, making it suitable for content that changes periodically but not per request.

When should I avoid static generation for my Next.js routes?▼

Avoid static generation for routes that depend on per-request user state or frequently changing data. It is designed for stable content like marketing pages and product listings where parameters are known during build, not for personalized dashboards or real-time data requiring server rendering.