#498 – March 23, 2025
SSR, pre-rendering, hydration, and static site generation
SSR Deep Dive for React Developers
35 minutes by Nadia Makarevich
Nadia provides a comprehensive guide to server-side rendering approaches in React, explaining how SSR, pre-rendering, hydration, and Static Site Generation address the limitations of client-side rendering. It demonstrates how these techniques improve search engine visibility and social media sharing while potentially enhancing performance metrics like First Contentful Paint and Large Contentful Paint. She explores the technical implementation details, performance implications, and trade-offs of each approach, concluding that while implementing custom SSR solutions is possible, using established frameworks like Next.js is typically more practical for production applications.
Tests are dead. Meticulous AI is here.
sponsored by Meticulous
Meticulous automatically creates and maintains an exhaustive e2e UI test suite that covers every corner of your application – with no developer intervention required whatsoever. Dropbox, Lattice, Bilt Rewards and hundreds of organisations rely on Meticulous for their frontend testing. It is built from the Chromium level up with a deterministic scheduling engine – making it the only testing tool that eliminates flakes.
Common React libraries architecture
4 minutes by Felipe Gustavo
In this post Felipe explains how most React libraries share a similar architecture consisting of a core logic and a React binding. Libraries typically create core objects externally to avoid re-rendering issues, then connect them to React components via Context API through Provider components. To synchronize external state with React's rendering cycle, libraries commonly implement the Observer pattern and use either the useSyncExternalStore hook or custom hooks built with useEffect and useReducer, with each approach having performance tradeoffs regarding React's concurrent features.
Live Mode
3 minutes by Maximilian Kaske
In this guide Maximilian provides a practical manual for implementing live data updates with TanStack's Infinite Queries, focusing on how to efficiently fetch both older and newer data using cursor-based pagination. It explains the API endpoint requirements, client implementation details, and offers a custom auto-refresh mechanism that avoids refetching all pages. He includes code examples and a link to a live demo at logs.run where readers can see the implementation in action.
The URL is a great place to store state in React
5 minutes by Sahaj Jain
Sahaj discusses leveraging URLs for state management in web applications. He explains that storing state in URLs offers advantages like shareability, speed, and persistence across page reloads, which can be useful for components like modals that need to remain open after refreshing. The article compares URL-based state management with alternatives and demonstrates implementation using React Router's useSearchParams or vanilla JavaScript's URLSearchParams. Sahaj concludes by offering guidelines on when to use URL parameters versus other state management approaches based on persistence, shareability, and navigation requirements.
Next.js vs TanStack
8 minutes by Kyle Gill
In this post Kyle explains why he's moving away from Next.js to TanStack with Vite for web development. While acknowledging Next.js's strengths in quick setup and high-scale optimizations, he criticizes its unnecessary complexity for smaller applications, difficult learning curve, debugging challenges, and financial incentives tied to Vercel's cloud services. He prefers TanStack's simplicity, transparency, and elegance, finding it provides better abstractions without the baggage of Next.js, while Vite offers speed and simplicity for most development needs.
Design System PoC Live Demo
sponsored by Progress Telerik
Would you accept the challenge of creating a design system PoC in front of a live audience in under an hour? We did! Join us on March 26th to watch the simulation.
And the most popular article from the last issue was: