#502 – April 20, 2025
bridging the gap between server-side data handling and client-side rendering
JSX Over The Wire
about 1 hour by Dan Abramov
In this article Dan explores a novel approach to bridging the gap between server-side data handling and client-side rendering in modern web applications. He demonstrates how React Server Components can solve the fundamental tension between data models and view models by allowing components to load their own data on the server while maintaining rich interactivity on the client, all in a single network roundtrip.
How Clerk integrates with a Next.js application using Supabase
sponsored by Clerk
Explore how Supabase's client-side data access, secured by PostgreSQL Row Level Security (RLS), integrates seamlessly with Next.js. Learn how Clerk enhances this stack by issuing JWTs that Supabase verifies via Clerk's JWKS endpoint, ensuring secure, backend-less authentication. This integration streamlines development while maintaining robust security.
React: First Puzzle Pieces
22 minutes by Iasmim Cristina
React is one of the most popular tools out there but sometimes, it can feel like a maze. In this guide Iasmim pieces this puzzle together and explores the best ways to make the most of it. She explains what its main features are, and the best ways to use them. She also dives into using Vite with React, working with components, and exploring some other key concepts in React to help us get started on building web apps.
Avoid the State Synchronization Trap
11 minutes by Ondrej Velisek
Dive deep into common pitfalls in state management, particularly around state synchronization. Ondrej presents a case study of an orders table that evolves over time, demonstrating how duplicate state often leads to bugs, UI glitches, and performance issues.
The Back-end for Front-end Pattern
9 minutes by Phil Calçado
Phil describes the evolution of the Back-end for Front-end architecture pattern at SoundCloud. He explains how their architecture transitioned from a monolithic system to one where each client application had its own dedicated backend service, which simplified client-side code and improved performance by aggregating data from multiple microservices.
React AI Chat with OpenAI API
7 minutes by Robin Wieruch
In this tutorial Robin demonstrates how to build a full-stack AI chat application using React.js on Next.js with the OpenAI API. It covers setting up the development environment, creating an API route to handle OpenAI requests, building a responsive chat interface, and implementing real-time response streaming for a more natural conversational experience. Robin walks you through both a manual implementation approach and mentions how using AI SDK could simplify the development process.
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.
And the most popular article from the last issue was: