React vs Astro: Why I Chose Astro for My Portfolio

Why I Chose Astro Over React for My Portfolio

When I sat down to build my portfolio site, the first question was straightforward: which framework should I use?

React was the obvious candidate - it’s what I use daily, it’s battle-tested, and the ecosystem is enormous. But the more I thought about what a portfolio actually needs, the more I realized React might be solving problems I don’t have - while quietly creating ones I do.

Here’s my honest breakdown.

The Case for React

React is a phenomenal UI library. It gives you a true Single Page Application (SPA) experience: instant navigation between pages, smooth transitions, shared state across routes, and a developer experience that’s hard to beat. For applications with real interactivity - dashboards, social feeds, e-commerce carts - React is often the right tool.

But “React is great” is not the same as “React is right for every project.” And a portfolio site is a very specific kind of project.

The Problem with React for a Portfolio

1. SEO Suffers by Default

React SPAs render content on the client side. When a search engine crawler visits your page, it often sees a near-empty HTML shell - JavaScript hasn’t executed yet, so your content simply isn’t there. While Googlebot has improved its JS rendering, relying on it is risky, inconsistent, and slow. For a portfolio, where discoverability is everything, this is a serious liability.

2. Bundle Size Grows Fast

Even a minimal React app ships React, ReactDOM, your router, and whatever supporting libraries you’ve pulled in. That’s a baseline of ~40–50 KB (gzipped) before you write a single line of your own code. For a portfolio with a few pages of mostly static content, you’re shipping a runtime that does almost nothing useful.

3. Performance Drops Without Extra Work

A React SPA requires the browser to download, parse, and execute JavaScript before anything meaningful appears on screen. This hurts your Core Web Vitals - particularly Largest Contentful Paint (LCP) and Time to Interactive (TTI) - which affects both user experience and search engine rankings.

Just Add SSR - Solution?

The standard answer to React’s SEO and performance problems is Server-Side Rendering (SSR). Frameworks like Next.js make this possible, and they’re genuinely impressive pieces of engineering.

But SSR isn’t free.

• You need a Node.js server running 24/7 to render pages on demand.
• That means paying for compute - a VPS, a serverless function, or a managed platform like Vercel or Railway.
• For a portfolio site, which changes maybe once a month, you’re paying to run a server that renders the same HTML every single time.

This is overkill. A portfolio doesn’t have dynamic data. It doesn’t need per-request rendering. It just needs fast, well-structured HTML that search engines can read and users can load instantly.

Why Astro Is the Right Tool Here

Astro was built with a simple but powerful idea: ship zero JavaScript by default, and only add it where you actually need it.

Static Site Generation (SSG) - Zero Hosting Cost

Astro can build your entire site at compile time into plain HTML files. These files can be hosted on Cloudflare Pages, GitHub Pages, Netlify, or Vercel’s free tier - all of which serve static files at no cost. No server, no compute bills, no cold starts.

For a portfolio, this is ideal. The content is static. The cost should match: zero.

Full SEO Out of the Box

Since Astro generates real HTML at build time, every page is fully rendered before a crawler ever visits. Your titles, descriptions, headings, and content are all present in the initial response. No JavaScript required, no rendering delays, no SEO guesswork.

Near-Zero JavaScript by Default

Astro’s “Islands Architecture” means JavaScript only runs in components you explicitly mark as interactive. A fully static page ships 0 KB of JavaScript. The performance implications are significant - pages load almost instantly, and Core Web Vitals scores are naturally strong.

”But You Can Use React Inside Astro”

Yes - and this is actually one of Astro’s best features. Astro supports React, Vue, Svelte, and other component libraries through its integration system.

But for my portfolio, I deliberately chose not to use React inside Astro, and here’s why:

My site has no dynamic data. There’s no user authentication, no real-time updates, no complex client-side state. Adding React components inside Astro would mean:

1. Opting into client-side JavaScript for components that don’t need it
2. Adding complexity to a project that doesn’t warrant it
3. Introducing a dependency that serves no functional purpose

If I were using Astro in SSR mode - for something like a CMS-backed site or a page with user-specific data - then reaching for React components to build interactive UI would make perfect sense. The hybrid model would shine there.

But in SSG mode, which is what my portfolio uses, adding React is adding overhead without adding capability. Astro’s own component syntax handles everything I need: layouts, components, data fetching at build time, and Markdown content collections.

The Real Question: Which Is Best?

This is the wrong question. The right question is: which is best for your use case?

Criteria	React (SPA)	React + SSR	Astro (SSG)
SEO	Poor by default	Good	Excellent
Performance	JS-heavy	Good	Excellent
Hosting Cost	Free (static)	Paid server	Free (static)
Interactivity	Excellent	Excellent	Opt-in only
Best For	Web apps, dashboards	Dynamic sites, e-commerce	Blogs, portfolios, docs

React is a genuinely excellent library. For a product dashboard, a social app, or anything with rich client-side interactivity, it’s hard to beat. For content-heavy, mostly-static sites where SEO and performance are priorities, the trade-offs start working against you.

For my portfolio, the calculus was clear:

• I have static content → SSG is perfect
• I want zero hosting cost → static files win
• I need strong SEO → pre-rendered HTML wins
• I don’t need complex client-side interactivity → React’s strengths are irrelevant here

It is not about Astro is better than React. It’s better for this.

Final Thoughts

Every framework exists to solve a problem. React solves the problem of building complex, interactive UIs. Astro solves the problem of building fast, SEO-friendly, content-first websites with minimal JavaScript.

My portfolio is a content-first website. The choice wasn’t hard - once I asked the right question.

If you’re building a portfolio, a blog, or a documentation site, I’d strongly encourage you to look at Astro before defaulting to React. Your Lighthouse score, your users, and your hosting bill will thank you.