Why Astro excels at performance - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Astro reduce JavaScript on the client?

Astro is known for sending less JavaScript to the browser. Which feature of Astro directly helps achieve this?

A Astro requires developers to write all JavaScript in TypeScript to reduce size.

B Astro renders components to static HTML by default, sending no JavaScript unless explicitly requested.

C Astro uses server-side rendering only and never hydrates components on the client.

D Astro bundles all JavaScript into a single large file to optimize loading.

💡 Hint

Think about how Astro handles component rendering and JavaScript delivery.

Astro renders components to static HTML by default, so the browser gets minimal JavaScript. JavaScript is only sent when you add client-side interactivity explicitly.

❓ component_behavior

intermediate

What happens when you use in Astro?

In Astro, adding to a component changes how it behaves. What is the effect on the rendered page?

Astro

<MyComponent client:load />

A The component is rendered as static HTML and hydrated immediately after page load with its JavaScript.

B The component is never rendered on the server and only loads on user interaction.

C The component is rendered only on the server and no JavaScript is sent to the client.

D The component is preloaded but JavaScript is deferred until scrolling near it.

💡 Hint

Consider when the JavaScript for the component runs with .

tells Astro to render the component as static HTML on the server and then hydrate it with JavaScript immediately after the page loads.

❓ lifecycle

advanced

Why does Astro's partial hydration improve performance?

Astro uses partial hydration to improve page speed. What best explains how partial hydration works in Astro?

A Astro bundles all component JavaScript into one file and hydrates them all at once.

B Astro hydrates all components on the page but delays JavaScript execution until user interaction.

C Only components marked for client interactivity receive JavaScript and hydration, while others remain static HTML.

D Astro disables hydration completely and relies on server rendering for all updates.

💡 Hint

Think about how Astro decides which parts of the page get JavaScript.

Partial hydration means Astro only sends JavaScript for components that need it, keeping the rest as fast static HTML.

📝 Syntax

advanced

Identify the correct Astro client directive for lazy loading a component

Which client directive in Astro delays loading a component's JavaScript until it scrolls into view?

Astro

<LazyComponent ??? />

A <LazyComponent client:idle />

B <LazyComponent client:load />

C <LazyComponent client:media />

D <LazyComponent client:visible />

💡 Hint

This directive waits until the component is visible on screen.

tells Astro to load and hydrate the component only when it becomes visible in the viewport, improving performance by delaying JavaScript.

🔧 Debug

expert

Why does this Astro page load slowly despite using static rendering?

An Astro page uses many components but loads slowly. The developer notices all components have . What is the main cause of slow loading?

Astro

<ComponentA client:load />
<ComponentB client:load />
<ComponentC client:load />

A All components hydrate immediately, sending lots of JavaScript at once, causing slow load times.

B Astro ignores <client:load> and renders everything statically, so JavaScript is missing causing errors.

C The components are not hydrated at all, so the page waits for server responses repeatedly.

D Astro bundles JavaScript separately for each component, causing many network requests but fast load.

💡 Hint

Consider what happens when many components hydrate immediately on page load.

Using on many components causes all their JavaScript to load and run immediately, increasing load time and hurting performance.

Practice

1. Why does Astro send less code to the browser compared to other frameworks?

easy

A. Because it uses server-side rendering only without any client code

B. Because it compiles code into a single large JavaScript file

C. Because it only sends the HTML and CSS needed, not all JavaScript by default

D. Because it disables CSS to reduce code size

Solution

1. Step 1: Understand Astro's code sending strategy

   Astro sends only the HTML and CSS needed for the page, avoiding unnecessary JavaScript by default.

2. Step 2: Compare with other options

   Other frameworks often send all JavaScript upfront or disable CSS, which is not true for Astro.

3. Final Answer:

   Because it only sends the HTML and CSS needed, not all JavaScript by default -> Option C

4. Quick Check:

   Less code sent = only needed HTML/CSS sent [OK]

Hint: Astro sends minimal code by default, mainly HTML and CSS [OK]

Common Mistakes:

• Thinking Astro sends all JavaScript upfront
• Believing Astro disables CSS to reduce size
• Confusing Astro with frameworks that bundle all code

2. Which of the following is the correct way to load JavaScript only when needed in Astro?

easy

A. ...

B.

C.

D. ...

Solution

1. Step 1: Identify Astro's client directives

   Astro uses client directives like client:load or client:visible to load JavaScript only when needed.

2. Step 2: Match correct syntax

   <MyComponent client:visible>...</MyComponent> is the correct way to load JS when the component becomes visible.

3. Final Answer:

   <MyComponent client:visible>...</MyComponent> -> Option A

4. Quick Check:

   Use client directives to load JS only when needed [OK]

Hint: Look for components with client:visible directive to defer JS [OK]

Common Mistakes:

• Using plain <script> tags without defer or client directives
• Confusing import inside <script> as lazy loading
• Using client:always which loads JS immediately

3. Given this Astro component snippet:

<MyWidget client:idle />

What happens to the JavaScript for MyWidget?

medium

A. It loads only when the browser is idle

B. It loads immediately when the page loads

C. It never loads, only HTML is sent

D. It loads only when the user clicks the widget

Solution

1. Step 1: Understand client:idle directive

   The client:idle directive tells Astro to load the JavaScript when the browser is idle, not immediately.

2. Step 2: Compare other options

   Loading immediately is client:load, never loading is incorrect, and loading on click is client:click.

3. Final Answer:

   It loads only when the browser is idle -> Option A

4. Quick Check:

   client:idle means load JS when browser is idle [OK]

Hint: client:idle defers JS until browser is free [OK]

Common Mistakes:

• Assuming client:idle loads JS immediately
• Confusing client:idle with client:click
• Thinking JS never loads with client:idle

4. You wrote this Astro code:

<MyComponent client:load />

But the JavaScript never loads on the client. What is the likely problem?

medium

A. Astro does not support client-side JavaScript

B. client:load is not a valid directive in Astro

C. You need to add defer attribute to the script tag

D. You forgot to import MyComponent in the Astro file

Solution

1. Step 1: Check if MyComponent is imported

   Astro requires components to be imported before usage; missing import means no JS bundle is generated.

2. Step 2: Validate client:load directive

   client:load is a valid directive, so the issue is not the directive itself.

3. Final Answer:

   You forgot to import MyComponent in the Astro file -> Option D

4. Quick Check:

   Missing import means JS won't load [OK]

Hint: Always import components before using client directives [OK]

Common Mistakes:

• Thinking client:load is invalid
• Assuming Astro disables client JS
• Adding defer attribute manually instead of using directives

5. You want to build a blog with Astro that loads JavaScript only for interactive widgets when visible, and sends static HTML for the rest. Which approach best achieves this?

hard

A. Use <script> tags with defer for all widgets

B. Use <MyWidget client:visible /> for widgets and normal Astro components for static content

C. Disable JavaScript globally and use only server rendering

D. Wrap all components in <AstroIsland client:load> to load JS immediately

Solution

1. Step 1: Identify how to load JS only when widgets are visible

   The client:visible directive loads JavaScript only when the widget scrolls into view, saving resources.

2. Step 2: Use normal Astro components for static content

   Static content can be rendered as plain HTML without JavaScript, improving performance.

3. Final Answer:

   Use <MyWidget client:visible /> for widgets and normal Astro components for static content -> Option B

4. Quick Check:

   client:visible loads JS on visibility, static content stays HTML [OK]

Hint: Use client:visible for widgets, normal components for static parts [OK]

Common Mistakes:

• Loading all JS immediately wastes resources
• Disabling JS globally breaks interactivity
• Using plain <script> tags misses Astro's lazy loading