Lesson 4: Static vs Dynamic Content

🗿 What is STATIC Content?

Static content is HTML that's generated at BUILD TIME and doesn't change after the page is sent to the browser.

Example: This timestamp is STATIC

Built on: 12/14/2025, 4:33:57 PM

💡 Refresh the page - the timestamp stays the same! It was generated once during build and "frozen" into the HTML.

Characteristics of Static Content:

When to use STATIC:

⚡ What is DYNAMIC Content?

Dynamic content is content that changes or updates in the browser after the page loads, using JavaScript.

Example: This timestamp is DYNAMIC

Loading...

💡 This updates every second! It's calculated in your browser using JavaScript, not during the build.

Characteristics of Dynamic Content:

When to use DYNAMIC:

🎯 Astro's Philosophy: "Static by Default"

Ship ZERO JavaScript by default.
Add JavaScript ONLY where you need it.

Traditional Frameworks (React, Vue, etc.)

Everything is JavaScript

✅ Very interactive

❌ Heavy bundle size

❌ Slower initial load

❌ Runs even for static content

Astro's Approach

Static HTML by default

✅ Lightning fast

✅ Zero JavaScript for static parts

✅ Add interactivity only where needed

✅ Best of both worlds

🔥 The Power: Static + Dynamic Together

The magic of Astro is you can have STATIC content with DYNAMIC enhancements. This is perfect for creative development!

Blog Post (Mostly Static)

  • Static: Article text, images
  • Dynamic: "Like" button, comments

Result: Fast load + Interactive features

Portfolio Site (Mixed)

  • Static: Project info, images
  • Dynamic: GSAP scroll animations

Result: SEO-friendly + Stunning animations

Landing Page (Strategic)

  • Static: Hero, features, pricing
  • Dynamic: Email signup form

Result: Instant load + Functional forms

🎨 For Creative Developers: Where Does GSAP Fit?

GSAP runs at RUNTIME (in the browser), not at build time.

Your Typical Workflow:

  1. Build Time (Astro frontmatter):
    Generate static HTML structure, fetch project data, set up page layout
  2. Runtime (<script> tag):
    GSAP animates the static HTML elements

Example: Animated Portfolio Item

---
// BUILD TIME: Fetch project data
const project = {
  title: "Cool Project",
  description: "An amazing site"
};
---

<!-- STATIC: HTML structure generated at build -->
<div class="project" id="project-1">
  <h3>{project.title}</h3>
  <p>{project.description}</p>
</div>

<!-- DYNAMIC: GSAP animation runs in browser -->
<script>
  import gsap from 'gsap';

  // This runs when the page loads in the browser
  gsap.from('#project-1', {
    opacity: 0,
    y: 50,
    duration: 1
  });
</script>

The Benefit:

✅ Your HTML loads instantly (static)
✅ GSAP then animates it (dynamic)
✅ Best performance + Beautiful animations

🧠 Mental Model: Two Phases

Phase 1: BUILD TIME

When: You run npm run build

Where: Your computer / CI server

What happens:

  • Frontmatter code runs
  • Data is fetched from APIs
  • HTML files are generated
  • CSS is processed and bundled
  • Images are optimized

Output:

Static files in dist/ folder

⬇️

Phase 2: RUNTIME

When: User visits your site

Where: User's browser

What happens:

  • Static HTML is loaded instantly
  • <script> tags execute
  • GSAP animations run
  • User can interact with page
  • Forms can be submitted

Experience:

Fast load + Interactive features

📝 Key Takeaways

1. Two Types of Code

Frontmatter: Runs at build time (once)

<script>: Runs in browser (every visit)

2. Static by Default

Astro generates static HTML

No JavaScript unless you add it

3. Add Dynamic as Needed

Use <script> tags for interactivity

GSAP goes in <script> tags

4. Best of Both Worlds

Fast static content

+ Beautiful animations

= Perfect for creative dev! 🎯

🎮 Interactive Demo

Static Element

This text was rendered at build time.

It can't change without rebuilding the site.

Dynamic Element

Click count: 0

This counter uses JavaScript to update dynamically.