In late 2014, in response to a focus on improving performance to drive organic traffic and deliver a great customer experience, and also in response to a call from engineers to modernize our stack, we started a migration to use React. Today, we’re announcing the next step in our journey, open sourcing our server, React Server.
React Server ships with seamless server rendering that reduces time to first byte by keeping track of above-the-fold content, and emitting the server-rendered HTML as soon as it is ready, letting the browser continue rendering where the server left off, so that the above-the-fold content is interactive as soon as possible. This also allows React Server to provide a crisp, snappy user experience, instead of having individual components load into place out-of-order, pushing content down the page as images and data-heavy components grow to fit their late-arriving contents.
React Server includes command-line tools for a great developer experience. We recommend developers use React Server cli, which does the heavy lifting to build and deploy a performant React Server instance. Developers get incremental builds from a Webpack development server, transpilation with Babel to allow use of ES6 and ES7 features, compression and minification with compression and uglify for faster page load times, and hot reloading from React hot loader, all out-of-the-box with no configuration required. To create a new React Server project, developers can use our Yeoman generator to scaffold out a new project in just a few minutes.
React Server is an ecosystem to make setting up a performant server for React more achievable. Most React stacks are “some assembly required,” meaning that to get started you have to choose a Flux implementation (or a Relay implementation), a bundler, a build system, a server stack, a transpiler, a logger, and a hundred other tiny decisions that contribute to Javascript fatigue. Getting all of these tools to work together in harmony can be very difficult. React Server makes this much simpler by packaging a build system, server rendering, a logger, and a whole lot more into a single package with sane defaults, and then launching that in a cluster for scalability. Users that want to change the default behavior add a .reactserverrc, and customize React Server to meet their needs.
React Server is a battle-tested solution based on the most popular server stack for Node.js, Express. We’ve been using it here at Redfin in production for over a year and it serves the three highest traffic pages on the site. We’re serving 1 billion requests a month from our React Server instance; hundreds of requests per second during peak hours.
To find out more, you can check out our examples, read the docs, check out the slides, or close your eyes and jump:
npm i -g yo generator-react-server yo react-server npm start
United States
Canada