- React Digest
- Posts
- We Improved React Loading Times by 70% with Next.js
We Improved React Loading Times by 70% with Next.js
#380 – October 31, 2022
sponsor
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
By switching from CRA to Next.js, we reduced our initial page load times by 70% and unlocked a new level of developer experience.
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 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.
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.
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.