React on Rails Performance Demo

Multimedia showcase

A media-heavy page rendered the React Server Components way: the page shell, section layout, and this very copy are produced on the server and stream as HTML — zero of this text ships as JavaScript. Only the genuinely interactive pieces (the two video players and the two image lightboxes) hydrate as small client islands.

Everything below distills hands-on experiments into one page:

  • Video, two ways — react-player v3 in light/facade mode vs. a hand-rolled <video> + hls.js. Both defer the heavy player/streaming JS until you click, which is the single biggest LCP win the benchmarks found.
  • Image gallery, two ways — the same responsive grid wired to react-image-lightbox and to its maintained successor yet-another-react-lightbox.

Read the code comments for why each choice was made — they cite the measurements behind them.

Video · react-player v3

Light mode (facade)

react-player renders just the poster + a play icon; the hls.js engine and the player module are both fetched on click. The poster is a real video frame from Mux's image service.

Poster frame for react-player v3 — light (facade) mode
react-player v3 — light (facade) mode. Click to play — the hls.js engine and the player module are both fetched on demand (light/facade mode), so the page loads only this poster frame.
Video · hand-rolled

Vanilla <video> + hls.js

No player library. Feature-detected (MSE-first, native-HLS fallback), with hls.js dynamically imported only on the first click. The poster is self-supplied because this raw test stream has no thumbnail service.

vanilla <video> + hls.js. Feature-detected (MSE-first, native HLS fallback). hls.js is downloaded only on click; the page ships no video JS up front.
Gallery · react-image-lightbox

The deprecated incumbent

A responsive thumbnail grid (srcset/sizes, explicit dimensions, lazy below the fold) wired to react-image-lightbox — archived since 2023 but still widely used. Click any thumbnail.

Gallery · yet-another-react-lightbox

The maintained successor

The same grid wired to yet-another-react-lightbox — actively maintained, React-19-ready, SSR-safe, with a cleaner controlled API. This is the recommended replacement.

Why this is CLS-safe

Every media slot reserves its space before the heavy widget loads: videos sit in a fixed 16:9 box behind a real poster frame, and gallery thumbnails declare explicit width/height (intrinsic 3:2). So when hls.js, react-player, or a lightbox finally hydrates, nothing reflows — Cumulative Layout Shift stays ~0.

This mirrors the established SSR / Client / RSC demo pages: the markup you can render on the server, we render on the server; the browser only gets JavaScript for the parts that truly need it.