React Newsletter #89

Scaling React SSR, the future of Styled Components, and making website building fun


Articles

Scaling React Server-Side Rendering

An illustrated tour of the triumphs and tragedies experienced while scaling React server-side rendering within a microservice architecture. Learn about isomorphic rendering, load balancing strategies, load shedding with Node Cluster, elastically adding 8x emergency capacity with client-side rendering fallback, the subtle dangers of per-component caching, the importance of keeping your dependencies up to date, the unreasonable effectiveness of the Aggregation of Marginal Gains philosophy, migrating a legacy monolith to use React server-side rendering, and more!

With styled-components into the future

This article is all about the past, present, and future of Styled Components.

Making website building fun

In this article Gatsby creator Kyle Matthews walks through the growing complexity of creating web applications and how Gatsby makes website building fun (again!) by creating higher-level components and design tools that allow you to more easily express your intent.

Error Boundaries in React 16

With React 16, instead of unmounting the whole app every time there’s an error, you can use error boundaries. Think of error boundaries like try-catch statements, but for React components.

componentDidMakeSense — React Lifecycle Explanation

Learn the React lifecycle methods and when/how to use them.

A React And Preact Progressive Web App Performance Case Study: Treebo

Treebo is India’s top rated budget hotel chain. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production. What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interactive. and loaded in under 4 seconds over 3G for many typical visitors and on their target hardware. This article walks through that change.


Projects

Introducing Redux Zero

Redux Zero is a lightweight state container based on Redux with a single store and no reducers, 100% written in TypeScript. Less than 1kb (gzip). Made for (p)react.

React-Sight

React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux.


Videos

Redux Wizardry Using RxJS Observables

This advanced talk will show you how to combine synchronous and asynchronous code flawlessly using RxJS & Redux-Observable to take your JavaScript apps to the next level.

How Pinterest Switched Their Template Rendering Engine to React

A deep dive into how Pinterest migrated their web infrastructure to serve React pages, which required moving a huge amount of code without breaking the site. Details on the legacy stack (Django web server and Nunjucks/Jinja template rendering) moving to Node and migrating our templates to React.


made with ❤️ by ui.dev