#380 We Improved React Loading Times by 70% with Next.js

sponsor

Login & Authentication Workflows

Auth is critical, and getting it right starts with understanding authentication for traditional, SPAs, and mobile apps. Download this technical guide from FusionAuth, including detailed workflows for Native Login and Oauth2.

this week's favorite

We Improved React Loading Times by 70% with Next.js

By switching from CRA to Next.js, we reduced our initial page load times by 70% and unlocked a new level of developer experience.

How To Mutate Data From Your React App Like The Pros

Changing data via a REST API is easy: just call axios.post or axios.patch in a React click handler. Done. But unfortunately, production apps need more than that: e.g. you have to handle loading and error state, invalidate the cache, or refetch data. And as a result, your code can easily turn into messy spaghetti.

Next.js 13: Layouts, React Server Components (async/await), Streaming

Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image component, and the brand new font component.

Seeding the Query Cache

With suspense for data fetching on the horizon, it is now more important than ever to make sure your cache is seeded properly to avoid fetch waterfalls.

Introducing Turbopack: Rust-based successor to Webpack

Each time we moved from a JavaScript-based tool to a Rust-based one, we saw enormous improvements. We migrated away from Babel, which resulted in 17x faster transpilation. We replaced Terser, which resulted in 6x faster minification to reduce load times and bandwidth usage.

newsletters

Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.