Tag: static

Introducing Second: a framework for mostly-static React applications

TL;DR

• Second is a framework for building React applications where the data is fetched on the server and most of the components do not change after the first render.
• Components can declare their data dependencies using a container similar to Facebook’s Relay.
• By default components are only rendered on the server; client-side rendering is opt-in by using the component dehydrator.
• Second works with any React-like library including Preact.

Why build this framework?

While using React to build the BBC News front page and several other mostly-static pages, a common theme emerged: only a small number of components on these pages require client-side JavaScript to function. Rendering every component in the browser does not provide an optimal experience — especially for users on low-powered devices or low-speed connections. Instead, selectively bundling components for the browser reduces bundle sizes and minimizes CPU overhead without sacrificing React’s event system and stateful components.

Second is not a large or complex framework. It is the result of combining several simple and well-tested techniques—

• Server-side rendering
• Container components for declarative data requirements
• Selective client-side rendering

—and combining them into a single package that can be easily reused across multiple applications.