This note records one core rendering strategy adjustment in my blog: if the project itself is a better fit for SSG, then the main pages should not remain full-page client:only.

Although the blog was already using Astro at the beginning, several main pages were still rendered with full-page client:only="react".

The biggest problems with that approach were:

  • the first-screen HTML was almost empty
  • the page could not appear until JavaScript was downloaded and executed
  • the user had to wait for React to fully render the page
  • Astro’s static output advantage was weakened directly

1. Why this project is a better fit for SSG

This site is essentially a blog, portfolio, and knowledge-base site.

Its characteristics are fairly clear:

  • most page content is static
  • it does not depend on logged-in state
  • it does not need request-time HTML generation
  • it benefits from fast first paint, simple deployment, and high CDN hit rates

That makes it a better fit for SSG (Static Site Generation), where HTML is generated during the build.

Once that direction is chosen, the optimization rules become clear:

  1. Output as much content as possible during the build
  2. Leave only the truly interactive parts to the client
  3. Do not make page visibility depend on JavaScript startup

2. Problems with page-level client:only

Page-level client:only is convenient.

Many client-only or SSR-incompatible parts can simply be ignored as long as they work in the browser.

But the trade-offs are direct:

  • there is no real content on the first paint
  • white-screen risk becomes higher
  • language switching flicker becomes more likely
  • content that could have been static is unnecessarily pushed to the client

For an Astro project, that is basically the wrong direction.

3. What this project actually changed

This round of changes did not remove React completely. Instead, it made a trade-off that fits Astro much better:

  • the page entry is no longer full-page client:only
  • Astro outputs page HTML during the build
  • React still handles hydration for interactive parts

This is not “do not use React”. It is “do not make the entire page wait until React starts.”