Performance Comparison of Next.js (SSR) and React (CSR) under Dynamic Loading Strategies

Abstract

While JavaScript front-end frameworks are becoming increasingly popular, literature lacks empirical studies examining how framework choice, application complexity, and optimization strategy interact to determine runtime performance. This study compares Next.js and React across four dynamic loading strategies (Code Splitting, Skeleton UI, Image Lazy Loading, and DOM Pagination) in simple and complex application scenarios, considering context. A 2x2x2 factorial design produced eight core configurations, broken down into 16 single techniques as a built-in ablation, totaling 24 configurations, each evaluated once with Google Lighthouse version 11, except memory usage, measured over three runs. The four strategies combined increased Performance Scores by 33–43 points and reduced Total Blocking Time (TBT) by 91.3– 100 percent, with the greatest gain in React Complex. Despite optimization, FCP remained fixed at 0.2 seconds for Next.js and 1.2 seconds for React Complex, though React Simple's FCP fell to 0.3 seconds once optimized, leaving a 9-point score gap in Complex systems traced to SSR-versus-CSR deployment rather than the frameworks themselves. The single-technique breakdown identified DOM Pagination as the strongest driver of TBT reduction, and revealed a layout-stability trade-off, where Code Splitting alone pushed Cumulative Layout Shift above the Core Web Vitals threshold, an effect offset by Skeleton UI. Hydration Cost (FCP plus TBT) decreased consistently with optimization, while bundle size and memory usage showed no comparable improvement, indicating gains came from rendering and loading behavior rather than payload size or memory efficiency. TBT emerged as the most responsive metric, offering context-specific guidance for selecting optimization techniques in component-based front-end development.