Comparative Analysis of Rendering Approaches in React: Server Components (RSC) in TanStack Start and Next.js, and Client-Side Rendering (CSR)

Abstract

The choice of rendering strategy in React applications directly determines content display speed and user experience quality. React Server Components (RSC), stabilized in React 19, are implemented in two frameworks with fundamentally different architectures: Next.js App Router sends an HTML shell immediately and streams content through a Suspense boundary, while TanStack Start blocks route rendering until the route loader completes and sends fully formed HTML in a single step. To date, no peer-reviewed comparative studies of these frameworks' performance based on Core Web Vitals metrics exist, which complicates informed decision-making during development. The study conducted controlled testing of TanStack Start and Next.js App Router; Vite + React (CSR) was used as a control implementation to identify the CLS trade-off of client-side rendering. Testing was performed in an isolated AWS EC2 environment; the metric set was composed from Google Lighthouse: LCP, FCP, TBT, CLS, Speed Index, and TTFB. Measurements were taken at four data volumes – 25, 50, 75, and 100 records – under warm PostgreSQL database conditions. The results show that TanStack Start consistently demonstrates lower values for LCP (67–107 ms vs. 97–113 ms in Next.js), TTFB (44–49 ms vs. 77–120 ms), and Speed Index (114–144 ms vs. 291–330 ms) across all load levels. Both SSR frameworks achieve zero CLS values, while Vite CSR exhibits CLS = 0.027 due to re-rendering during data loading. It was established that the aggregate Lighthouse Performance score of 100/100 is identical in both SSR frameworks and does not reflect differences in rendering strategy. The obtained results provide a practical basis for informed selection of a rendering framework when developing React applications with Core Web Vitals performance requirements.