How Client Islands Keep WebSockets Efficient in React Server Components

Developers using React Server Components (RSC) are advised against wrapping entire pages in 'use client' to handle real-time WebSocket features, as this inflates client bundles and worsens Interaction to Next Paint (INP) scores. A recommended alternative involves keeping pages as Server Components and isolating WebSocket logic inside small client islands — typically just 5–20 lines of code. These islands push incoming data into a client-side cache such as TanStack Query or SWR, limiting re-renders to only the components that consume the updated data. This approach preserves RSC benefits like server-rendered HTML, streaming, and minimal JavaScript delivery to the browser. Trade-offs include the need for a well-thought-out cache invalidation strategy and a different debugging model where state is split between server renders and client caches.