Transform React SPA to SSR/SSG

Analyze the architectural trade-offs between CSR, SSR, and SSG for large-scale React applications.

Describe the React hydration process and diagnose common hydration mismatch errors.

Integrate Tanstack Router into a React application and define routes using its file-based conventions.

Implement type-safe navigation and parameter handling using Tanstack Router's APIs.

Structure applications with nested routes and shared layouts.

Use route loaders to fetch data on the server before component rendering.

Implement route-level error boundaries and pending UI states.

Access and validate URL search parameters in route loaders using a schema library like Zod.

Initialize a Tanstack Start project using both Node.js and Bun runtimes.

Differentiate the server and client entry points and configure environment variables for each context.

Create type-safe server functions (`createServerFn`) to execute server-only logic.

Analyze the production build output to verify that server functions are excluded from the client bundle.

Implement server-side middleware for handling requests and responses.

Compare the development and runtime characteristics of Node.js vs. Bun for a Tanstack Start application.

Configure React Query with initialData from route loaders for server-side rendering.

Implement the full React Query hydration flow: prefetching on the server, dehydrating the cache, and rehydrating on the client.

Integrate OpenAPI-generated React Query hooks within server-side route loaders.

Implement cookie-based session management for persistent authentication in an SSR context.

Securely manage authentication tokens (access and refresh) using server-side logic and HTTP-only cookies.

Create a React context provider to bridge authentication state from the server to the client.

Implement protected routes using server-side authentication checks in route loaders or middleware.

Analyze an existing SPA to identify code dependent on client-side browser APIs (e.g., window, localStorage).

Map the route structure of a client-side router (e.g., React Router) to Tanstack Router's file-based conventions.

Convert client-side data fetching patterns (e.g., `useQuery` in components) to server-side fetching in route loaders.

Transform client-side data mutations into server functions while maintaining React Query's client-side cache integration.

Refactor components with client-side dependencies to run conditionally or be isolated using dynamic imports with `ssr: false`.

Assess third-party library dependencies for SSR compatibility and isolate incompatible libraries.

Configure static site generation (SSG) for specific routes within the Tanstack Start application.

Test the migrated application to validate and resolve hydration errors.

Describe the architectural patterns of React Server Components (RSCs) and apply RSC-inspired patterns in Tanstack Start using server functions.

Implement route prefetching on user intent (e.g., link hover) using Tanstack Router's `preload` capabilities.

Optimize data fetching by executing parallel queries within route loaders.

Implement streaming SSR with React Suspense to improve perceived performance.

Configure HTTP caching headers (e.g., Cache-Control) for server-rendered pages.

Implement a server-side in-memory cache for frequently requested data in route loaders.

Profile server-side rendering performance to identify and resolve bottlenecks.

Measure and optimize Time to First Byte (TTFB) for server-rendered pages.

Generate and inspect a production-ready build of a Tanstack Start application.

Deploy a Tanstack Start application to a serverless Node.js platform (e.g., Vercel).

Create a production-ready Dockerfile for a Tanstack Start application using the Bun runtime.

Deploy the containerized Bun application to a suitable hosting platform (e.g., Fly.io).

Integrate a third-party error tracking service (e.g., Sentry) to capture both client and server-side errors.

Implement structured logging for server-side operations and errors.

Monitor server-side performance metrics, including request and response times.