React Is Often Overused

Did you know the bundle size of a static hello world page in Nextjs is almost 10x larger than the ouput of Svelte or Astro? The same goes for build times.

The reason for that is a ton of unused JavaScript that you ship with your static pages powered by React.

React has been designed for dynamic content

Interactive content, applications, client-side data fetching, etc. This is why people use React. You need JavaScript for the interactive parts. And React makes it easy for you. However, for static content like landing pages or blogs we simply don’t need that much JavaScript required to run a React-powered website.

Next.js is not the best option for performance

When you hear SSG, first thing that pops into your mind is probably Next. Yes, Next.js is a big step forward for React. It solves SEO issues and significantly boosts performance. But…

Next.js doesn’t support partial hydartion. It loads and rehydrates the entire page in the browser. We basically ship a ton of unused JavaScript that unnecesseraly bloats the bundle size and slows page loads times.

Did you know the bundle size of a static hello world page in Next.js is almost 10x larger than the output of Svelte or Astro? The same goes for build times.

Boost your website’s performance by using better tools for the job

I’ve recently discovered Astro. It is a fresh JavaScript framework. IT uses a modern server-side templating language that renders directly to HTML & CSS, eliminating heavy JavaScript automatically.

But the best part? Astro ships with optional integrations for React, Preact, Svelte, Vue, SolidJS, and Lit. One or several Astro integrations can be installed and configured in your project.

React is a powerful library. But it isn’t the be-all, end-all of front-end development. Sometimes, there’s a more efficient way to get the job done.