static-rendering
Static Rendering
Based on our discussion on SSR, we know that a high request processing time on the server negatively affects the TTFB. Similarly, with CSR, a large JavaScript bundle can be detrimental to the FCP, LCP and TTI of the application due to the time taken to download and process the script.
Static rendering or static generation (SSG) attempts to resolve these issues by delivering pre-rendered HTML content to the client that was generated when the site was built.
When to Use
- Use this for static content like About pages, blog posts, and product listings that don't change per-request
- This is helpful when you want the fastest possible TTFB via CDN-served static HTML
When NOT to Use
- For highly dynamic, personalized content that changes per request (e.g., user dashboards, real-time feeds)
- When the dataset is so large that build times become impractical without ISR
- For pages requiring authentication-gated content that can't be pre-rendered at build time
Instructions
More from patternsdev/skills
react-2026
Provides a comprehensive guide to the modern React 2026 stack. Use when starting a new React project or modernizing an existing one with current frameworks, build tools, routing, state management, or AI integration.
501ai-ui-patterns
Teaches design patterns for building AI-powered React interfaces. Use when creating chatbots, intelligent assistants, streaming UIs, or any AI-driven user experience in React.
485hooks-pattern
Teaches React Hooks for reusing stateful logic across components. Use when extracting shared behavior like form handling, subscriptions, or side effects into reusable custom hooks.
434react-composition-2026
Teaches modern React composition patterns for 2025/2026. Use when designing component APIs, building shared UI libraries, or refactoring prop-heavy components.
430react-data-fetching
Teaches modern React data fetching patterns with TanStack Query, SWR, and Suspense. Use when implementing caching, deduplication, optimistic updates, or parallel loading in React applications.
415react-render-optimization
Teaches React rendering performance optimization patterns. Use when reducing unnecessary re-renders, optimizing memoization, improving state design, or diagnosing React performance issues.
411