← All work
Rebuild
React to Astro: my own site, rebuilt to load under a quarter of the JavaScript
- Client
- My own portfolio site
- Site
- sohailrana.com ↗
- From → To
- React + Vite single-page app → Astro static site
- Stack
- Astro, React (rendered at build time), Tailwind CSS, GSAP, Netlify
- Timeline
- October 2026
- Key result
- Main pages load about 43 kB of JavaScript instead of 194 kB
01 / The problem
My site was a React single-page app built with Vite. To give Google a real page for every URL, I had written my own prerender script, and every page still loaded about 194 kB of JavaScript for a site that is mostly text and images.
Content below the hero also stayed hidden until that JavaScript ran, so a slow phone or a blocked script showed a nearly empty page.
02 / What I did
- Moved every page to Astro, keeping the React components but rendering them to plain HTML at build time.
- Replaced the router, the animation library and the page-meta code with Astro's routing and one small script.
- Kept React in the browser only for the forms that need it.
- Generated titles, meta tags, structured data, the sitemap and redirects from the same content files as before.
- Compared the old and new builds page by page: the same text, meta tags, sitemap and redirects on every page.
03 / The result
| Before | After | |
|---|---|---|
| JavaScript on main pages (gzipped) | About 194 kB | About 43 kB |
| Content without JavaScript | Hidden below the hero | Visible on every page |
| Prerendering | My own script | Built into Astro |
Same content, same design, and nothing for search engines or AI tools to wait for.
What I'd do for you
Is your site a React app or a page builder that loads slowly? Send me the link and I'll tell you what a move to Astro would take.
Send me your site