rendering-patterns
Web Rendering Patterns
Overview
Rendering determines when and where HTML is generated. Each pattern has distinct performance, SEO, and infrastructure implications.
Rendering Pattern Summary
| Pattern | When Generated | Where Generated | Use Case |
|---|---|---|---|
| CSR | Runtime (browser) | Client | Dashboards, authenticated apps |
| SSR | Runtime (each request) | Server | Dynamic, personalized content |
| SSG | Build time | Server/Build | Static content, blogs, docs |
| ISR | Build + revalidation | Server | Content that changes periodically |
| Streaming | Runtime (progressive) | Server | Long pages, slow data sources |
Client-Side Rendering (CSR)
Browser generates HTML using JavaScript after page load.
More from kinfe123/fm-skills
middleware-patterns
Explains middleware concepts, patterns, and implementations. Covers server middleware, edge middleware, request/response pipelines, and common use cases like auth, logging, and CORS. Use when implementing middleware or understanding request processing pipelines.
12meta-frameworks-overview
Explains meta-frameworks like Next.js, Nuxt, SvelteKit, Remix, Astro, and their architectural patterns. Use when comparing frameworks, choosing a framework for a project, or understanding what features meta-frameworks provide beyond base UI libraries.
11routing-patterns
Explains client-side routing, server-side routing, file-based routing, and navigation patterns in web applications. Use when implementing routing, understanding how navigation works in SPAs vs MPAs, or configuring routes in meta-frameworks.
9web-app-architectures
Explains Single Page Applications (SPA), Multi Page Applications (MPA), and hybrid architectures. Use when discussing app architecture decisions, comparing SPA vs MPA, explaining how traditional vs modern web apps work, or when building a new web application.
9seo-fundamentals
Explains SEO for web applications including crawling, indexing, Core Web Vitals, structured data, and SEO challenges with SPAs. Use when optimizing for search engines, discussing SEO implications of architecture decisions, or implementing SEO best practices.
5build-pipelines-bundling
Explains JavaScript bundling, code splitting, chunking strategies, tree shaking, and build pipelines. Use when optimizing bundle size, understanding how modern build tools work, configuring Webpack/Vite/esbuild, or debugging build output.
5