Astro Web Framework

Build Fast & Modern Websites with Astro

A presentation by Tri Hargianto

Who’s the Speaker

  • 🧑‍🚀 Tri Hargianto
  • 👨🏻‍💻 Frontend Engineer @Mamikos
  • 🫡 Co-organizer @JogjaJS

Visit trihargianto.com to know me more

Why I Talk About Astro 🧑‍🚀

  • 🧠 Personal Experience
  • 📚 Learning Outcomes
  • ❤️ I Think People Will Love It

What is Astro?

Astro is the web framework for building
content-driven websites like blogs, marketing, and e-commerce.


For fast-loading and SEO-friendly web, choose Astro

Philosophy: Zero JS by Default

Astro prioritizes
sending JavaScript only when necessary, resulting in lighter and faster-loading pages.

Rendering Strategies

Static website

  • Pages served as static HTMLs
  • Simple and efficient
  • Struggles with dynamic data

Single-Page Applications (SPA)

  • No full page reload on navigates
  • Heavy reliance on JavaScript
  • Faster User Experience once loaded

              
                <html>
                  <body>
                    

                    
                  </body>
                </html>

Multi-Page Applications (MPA)

  • Page reloads per request
  • Slower User Experience speed
  • Higher Backend Complexity

SPA vs MPA Lifecycle

Server-Side Rendering (SSR)

  • Pages rendered on the server on-demand
  • Fully formed HTML in initial load
  • JavaScript is fetched alongside it

Static Site Generation (SSG)

  • Pages are pre-built & uploaded to a static host
  • Requires site redeployment whenever data changes
  • JavaScript is fetched alongside it

Hydration

Hydration

Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers.

Dan Abramov

SSR Flow

The Problem

Entire page is hydrated at once, meaning that JavaScript runs across all components
—even those that don’t need interactivity

Where does Astro fit in here?

  • Multi-page application
  • SSG by default with opt-in to SSR
  • Ability to feel like a SPA with Islands

Islands Architecture

Islands Architecture

  • Divides a page into independent sections (islands)
  • Islands are hydrated only as needed
  • Reduces the overall load

Islands: Progressive Hydration

  • Delay JS by loading on demand
  • Load JS during downtime

Astro's code sneak peek

Prequisites

Install via Terminal


            $ pnpm create astro@latest

Opinionated Project Structure

Creating pages

Put your *.astro files inside ./src/pages folder 


          <!-- src/pages/index.astro -->

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <title>Homepage</title>
          </head>
          <body>
            This is the astro homepage 
          </body>
          </html>

Files inside `pages` will be accessible


File URL
./src/pages/about.astro /about
./src/pages/profile.astro /profile
./src/pages/contact.astro /contact

Creating pages With Markdown

Put your *.md files inside ./src/pages folder 


          

          ---
          title: Homepage
          ---

          # Welcome to Astro

          This is the Astro homepage created with Markdown.

All files inside `pages` will be accessible

File URL
./src/pages/about.md /about
./src/pages/profile.md /profile

Astro Components

Simple Component Creation

Using JavaScript statement


            
            ---
            const type = "button";
            ---

            <Button type={button}>
              
            </Button>

Import and Re-use


          
          ---
          import Button from '../components/Button.astro';
          ---

          <Button>Click Me</Button>

Re-usable Props


          
          ---
          const { variant } = Astro.props;
          ---
          

          <Button class={`button ${variant}`}>
            <slot />
          </Button>

Passing Props to Button


          
          ---
          import Button from '../components/Button.astro';
          ---
          <Button variant="primary">Primary Button</Button>
          <Button variant="secondary">Secondary Button</Button>

Styling

Scoped Styling


          
          

          <Button class="button">
            <slot />
          </button>

Global Styling

Create the css file


            /* src/styles/global.css */
            body {
              font-family: Arial, sans-serif;
            }

Import the CSS file


            
            ---
            import '../styles/global.css';
            ---

Using TailwindCSS 4

Install TailwindCSS via Terminal


          $ pnpm install tailwindcss

Import in src/styles/global.css


            @import "tailwindcss";

Use it in your Astro file


            
            

              TailwindCSS Styled Div

Layout Component

Creating a Layout


          
         <html>
           <body>
            
Header Content

              

                
              


              
Footer Content

           </body>
         </html>

Using a Layout


          
          ---
          import BaseLayout from '../layouts/BaseLayout.astro';
          ---
          <BaseLayout>
            
Welcome to Astro

          </BaseLayout>

Interactivity with <script>

Adding a Script


          
          

          
Welcome to Astro

Using Client-side JavaScript


          
          
          
          
          
          
0

Interactivity with Multiple Frameworks

Install React


          $ pnpm astro add react

Install Vue


          $ pnpm astro add vue

Install Svelte


          $ pnpm astro add svelte

Using React


        
        ---
        import ReactCounter from '../components/ReactCounter.jsx';
        ---

        <ReactCounter />

Using React

Don't forget to put client directive to make it interactive! 


        
        ---
        import ReactCounter from '../components/ReactCounter.jsx';
        ---

        <ReactCounter client:idle />

Using Vue, React, and Svelte


          
          ---
          import ReactCounter from '../components/ReactCounter.jsx';
          import VueCounter from '../components/VueCounter.vue';
          import SvelteCounter from '../components/SvelteCounter.svelte';
          ---

          <ReactCounter client:idle />
          <VueCounter client:idle />
          <SvelteCounter client:idle />

Use Cases

What Astro suitable at

Content-Focused Websites

Ideal for news sites, blogs, documentation, and portfolios that prioritize content and fast load times.

Not Meant for High-Interactivity Apps

Astro is better suited for websites with
light interactivity rather than applications that demand complex real-time interactions.

Deployment Options

  • Vercel
  • Netlify
  • Cloudflare Pages
  • Traditional Hosting

Thank You

Any questions?

trihargianto.com/slide-astro