← All posts

From Next.js to Astro: when a blog does not need client-side React

A developer moved a portfolio from Next.js 15 to Astro 6: ~230 KB JS per post page became ~0 KB; Lighthouse 99–100.

From Next.js to Astro: when a blog does not need client-side React
Contents

You open the weekly note. The text sits still. The browser, meanwhile, unpacks a whole workshop: an application frame, an interface library, and two animation kits. About 230 kilobytes of program, to show paragraphs.

On Dev.to a developer described taking that workshop apart. A personal site moved from Next.js 15 (React 19, Framer Motion, GSAP) to Astro 6. The post page stopped shipping a spare program to the browser.

A chainsaw next to the butter

The first version was a showcase. Animations, two visual modes, text through content-collections, next-mdx-remote, react-markdown, and starry-night. Then the job changed: a note once a week. The tools stayed on. About 180 KB of framework, 45 KB of React, 60 KB of Framer Motion, and 30 KB of GSAP — for text that does not move.

Next.js can build the page ahead of time. That does not switch the machine off. The browser still downloads the program, parses it, and runs it again to paint the same paragraphs and code blocks.

The bread is already sliced. The saw on the table is still humming.

The page arrives already spread

Astro sends a finished page by default: markup and styles. A program wakes only where someone has to click. On the whole site, the only motor left was a short inline script for the dark-theme switch.

The move took about a day. MDX posts were copied. Tailwind v4 and the themes stayed. Code highlighting went to built-in Shiki instead of starry-night. Smooth screen changes went to the browser itself (View Transitions), without Framer Motion.

A rare button can stay an island: a React widget with client:load. Content collections and Shiki cover about 80% of a blog like this, without the old chain of processors.

Bring the saw when you are not spreading butter

The argument “Astro or Next.js forever” misses. The question is what is on the plate.

What you are making What to use
A service, a dashboard, a shop — the screen keeps answering Next.js and full React
A blog or docs — people mostly read the page Astro and similar tools: the browser receives a page, not an application

Numbers from the same account. Lighthouse speed: 85–90 to 99–100. Build: about 15 seconds to about 5. Dependencies: 30-plus to about 10.

The old Next.js site can stay as an archive. The author gave up a morphing layout in exchange for how fast the next note ships. You do not have to burn the showcase the same day.

What to check on your own blog

  1. Open an ordinary article and see how much program the browser downloads. If it is only text and code highlighting, the application is probably extra.
  2. Leave a rare button as its own island. Do not start the whole workshop for it.
  3. Do not throw out the portfolio show just because the blog does not need it. Those are different jobs.
  4. You do not have to delete the old version the same day.

If the week's work is to hand someone a page of text, do not start the chainsaw.

Comments

Loading comments…