Create a structured decision framework for choosing between server-side rendering, static site generation, and client-side rendering based on performance, SEO, infrastructure, and developer experience.
You are a web architecture consultant who helps engineering teams select the optimal rendering strategy for their applications. Create a comprehensive rendering strategy decision framework for the following project. Project Context: Application Type: [MARKETING SITE/E-COMMERCE/SAAS DASHBOARD/BLOG/NEWS PORTAL/SOCIAL PLATFORM] Content Update Frequency: [REAL-TIME/HOURLY/DAILY/WEEKLY/RARELY] SEO Importance: [CRITICAL/IMPORTANT/NOT IMPORTANT] Personalization Level: [NONE/SEGMENT-BASED/FULLY PERSONALIZED] Framework: [NEXT.JS/NUXT/SVELTEKIT/ASTRO/REMIX/UNDECIDED] Team Experience: [FRONTEND-HEAVY/FULL-STACK/BACKEND-HEAVY] Section 1 - Rendering Strategy Evaluation Matrix: Create a detailed comparison matrix evaluating SSR, SSG, ISR, and CSR across the dimensions of initial load performance, time to interactive, SEO crawlability, content freshness, server costs, build times, and developer complexity. Define the decision criteria specific to the project type including which pages need real-time data, which pages benefit from static generation, and which require client-side interactivity. Analyze the hybrid rendering approach where different pages use different strategies within the same application. Evaluate the impact of each strategy on Core Web Vitals including Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. Provide benchmark data for each rendering approach including typical TTFB, time to first byte, and full page load metrics. Define the edge rendering option where SSR runs at CDN edge nodes and when this approach provides meaningful benefits over origin SSR. Section 2 - SSR Architecture Design: Design the server-side rendering architecture including the rendering server configuration, caching layer, and CDN integration. Specify the data fetching strategy for SSR pages including parallel data loading, waterfall prevention, and timeout handling for slow data sources. Create the streaming SSR implementation plan that sends HTML progressively as data becomes available rather than waiting for the complete page. Define the SSR cache strategy including full-page caching, fragment caching, and cache key composition based on URL, user segments, and data versions. Specify the error handling for SSR failures including fallback to CSR, stale cache serving, and error page rendering. Design the session and authentication handling for SSR including how cookies and tokens are forwarded to API calls during server rendering. Section 3 - Static Generation Strategy: Define which pages and routes should be statically generated at build time versus on-demand. Design the incremental static regeneration configuration including revalidation intervals for different content types and on-demand revalidation triggers. Specify the build optimization strategy for large sites including parallel page generation, build caching, and selective rebuilds for changed content only. Create the fallback page strategy for statically generated dynamic routes including loading states and not-found handling. Define the data source integration for build-time data fetching including CMS webhooks, database queries, and API calls with error handling for unavailable sources. Design the preview mode implementation that allows content editors to see unpublished changes before they go live. Section 4 - Client-Side Rendering and Hydration: Design the client-side rendering strategy for highly interactive application sections including state management, data fetching with SWR or React Query patterns, and loading state management. Specify the hydration optimization strategy including selective hydration, progressive hydration, and islands architecture for mixing static and interactive content. Define the code splitting strategy that minimizes the JavaScript bundle sent to the client including route-based splitting, component-based splitting, and dynamic imports. Create the offline support strategy using service workers for caching rendered content and enabling offline functionality. Specify the real-time data update strategy for pages that combine server-rendered initial content with live client-side updates. Design the error boundary architecture that prevents client-side rendering failures from breaking the entire page. Section 5 - Infrastructure and Deployment: Design the infrastructure architecture for the chosen rendering strategy including compute resources for SSR, CDN configuration for static assets, and edge function deployment for ISR. Specify the deployment pipeline including build process, asset upload, CDN cache invalidation, and SSR server rolling updates. Create the environment configuration strategy for development, staging, and production including how rendering behavior is consistent across environments. Define the scaling strategy for SSR workloads including auto-scaling triggers, connection pooling, and cold start mitigation for serverless rendering. Specify the monitoring and performance tracking including server render time, cache hit rates, and client-side performance metrics. Design the disaster recovery plan for rendering infrastructure failures including CDN failover, SSR server redundancy, and static fallback pages. Section 6 - Migration and Implementation Plan: Create the phased implementation plan for migrating from the current rendering approach to the recommended strategy. Define the page-by-page migration priority based on traffic volume, SEO importance, and implementation complexity. Specify the A/B testing framework for comparing rendering strategy performance on production traffic. Create the performance budget that defines acceptable thresholds for load time, bundle size, and server response time. Define the rollback plan for reverting rendering strategy changes if performance degrades. Document the team training requirements for the chosen rendering approach including framework-specific patterns, debugging techniques, and performance optimization skills.
Or press ⌘C to copy