https://github.com/ohansemmanuel/astrojs-ditch-the-runtime-react
A case for AstroJS. Ditch the client runtime overhead where appropriate 🤝
https://github.com/ohansemmanuel/astrojs-ditch-the-runtime-react
astro astrojs reactjs
Last synced: about 1 month ago
JSON representation
A case for AstroJS. Ditch the client runtime overhead where appropriate 🤝
- Host: GitHub
- URL: https://github.com/ohansemmanuel/astrojs-ditch-the-runtime-react
- Owner: ohansemmanuel
- Created: 2023-01-12T21:19:28.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-16T15:44:07.000Z (over 2 years ago)
- Last Synced: 2025-03-14T22:52:28.253Z (about 2 months ago)
- Topics: astro, astrojs, reactjs
- Language: Astro
- Homepage: https://astrojs-ditch-the-runtime-react.netlify.app/
- Size: 119 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro: ditch the runtime (React)
An astro clone of a [React starter project](https://create-react-app.dev) for educational purposes.
## Aim 🎯
To make a **simple** comparison between a similar Astro and React project and consider the runtime implication.
Results upon building the same project:
| Library | file | loc(lines of code) | size | |
| --------- | ----------- | ------------------ | --------- | --- |
| Astro | index.html | 44 | 1kb | |
| React | index.html | 23 | 744b | |
| **Astro** | **main.js** | **0** | **0kb** | |
| **React** | **main.js** | **9,360** | **318kb** | |
| Astro | main.css | 43 | 872b | |
| React | main.css | 56 | 1kb | |
## Conclusion 🥂
The effect of asset optimisation in both libraries is arguably negligible. The major difference is the amount of Javascript shipped to the client.
**Astro ships none by default.**
**React ships over 9000+ lines of Javascript** for the same trivial application, with the React runtime overhead being the major culprit.
## Run the project 🛖
```bash
git clone https://github.com/ohansemmanuel/astrojs-ditch-the-runtime-react.git
cd astrojs-ditch-the-runtime-react
npm install
npm run start
```