Modern web framework

• Work with any UI framework (React, Vue, …)
  • Use adapters (React adapter, Vue adapter, …)
  • Runs UI framework code at build time or on server
  • Outputs static HTML (ships JS if hydration is needed)
• Has own compiler.
  • Removes unused JS
  • Tree-shakes aggressively
  • Bundles each island separately
  • Sends only what that component needs
• Minimal JS shipped to the browser
  • Astro renders HTML at build time
  • Very fast load times (min js, partial hydration)
  • Add interactivity only when needed
• Perfect for static sites and hybrid sites
  • SSG (default) / SSR / both
  • Great SEO

So astro is good for website that need SEO, and is content-heavy with less interacitvity.

Astro build
     ↓
Components rendered on server
     ↓
Pure HTML files generated
     ↓
Browser receives ready-made HTML 
(no JS execution needed)

Create Project

1. Build astro project

   npm create astro@latest
   

2. Where should we create your new project?

   • . (mean current folder)

3. How would you like to start your new project?

   • Empty

4. Install dependencies?

   • Yes

5. Initialize a new git repository?

   • Yes

6. Add preact into Astro

   npx astro add preact
   

7. Install dependencies?

   • Yes