client:load directive in Astro - Mini Project: Build & Apply

Using the client:load Directive in Astro

📖 Scenario: You are building a simple Astro website that shows a welcome message and a button. You want the button to show an alert when clicked, but only after the page has fully loaded in the browser.

🎯 Goal: Create an Astro component that uses the client:load directive to load a small interactive script only after the page loads, so the alert button works correctly.

📋 What You'll Learn

Create an Astro component with a heading and a button

Add a script that shows an alert when the button is clicked

Use the client:load directive to load the script only after the page loads

💡 Why This Matters

🌍 Real World

Websites often need interactive parts that should only run after the page loads to improve speed and user experience.

💼 Career

Knowing how to use client directives in Astro helps build fast, modern websites with optimized loading behavior.

1

Create the Astro component with heading and button

Create an Astro component with a <h1> heading that says Welcome to Astro! and a <button> with the text Click me. Name the component file Welcome.astro.

Astro

Welcome to Astro!
Click me

Hint

Use standard HTML tags inside the Astro component.

2

Add a script to show alert on button click

Add a <script> tag inside the component that adds a click event listener to the button. When clicked, it should show an alert with the message Button clicked!.

Astro

Welcome to Astro!
Click me

  // Your code here

Hint

Use document.querySelector to select the button and addEventListener to listen for clicks.

3

Use the client:load directive on the script

Modify the <script> tag to include the client:load directive so that the script runs only after the page has fully loaded in the browser.

Astro

Welcome to Astro!
Click me

  // Your code here

Hint

Add client:load inside the opening <script> tag.

4

Complete the component with client:load script

Ensure the component includes the <h1> heading, the <button>, and the <script client:load> with the alert logic exactly as shown.

Astro

Welcome to Astro!
Click me

  // Your code here

Hint

Check that all parts are included and the script uses client:load.