Astro vs Next.js vs Gatsby comparison - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Astro handle component rendering compared to Next.js?

Consider a simple component that displays a greeting. How does Astro's rendering approach differ from Next.js in this case?

A Next.js renders components to static HTML by default, while Astro requires client-side rendering for all components.

B Astro always renders components on the client side only, whereas Next.js only supports static HTML rendering.

C Both Astro and Next.js render components exclusively on the client side with no server rendering.

D Astro renders components to static HTML by default, sending minimal JavaScript to the browser, while Next.js renders components on the server or client with more JavaScript sent.

💡 Hint

Think about how much JavaScript each framework sends to the browser by default.

Astro focuses on shipping as little JavaScript as possible by rendering components to static HTML by default. Next.js supports server-side rendering and client-side rendering, often sending more JavaScript to the browser.

📝 Syntax

intermediate

Which syntax correctly defines a page route in Next.js?

Identify the correct way to define a page route in Next.js using the App Router.

A export default function Page() { return <h1>Hello</h1>; } // placed in app/page.tsx

B export const route = '/home'; function Home() { return <h1>Home</h1>; }

C function Page() { return <h1>Hello</h1>; } export { Page as default }; // placed anywhere

D const Page = () => { return <h1>Hello</h1>; }; export default Page; // placed in pages/home.js

💡 Hint

Next.js App Router uses a special folder structure for routing.

In Next.js App Router, page components are default exports placed in the app directory with filenames like page.tsx to define routes.

🔧 Debug

advanced

Why does Gatsby fail to build when using a React hook inside gatsby-node.js?

Given that React hooks are used inside gatsby-node.js, what is the cause of the build failure?

A gatsby-node.js runs in Node.js environment where React hooks cannot be used, causing a runtime error.

B React hooks require a special plugin in Gatsby to work inside gatsby-node.js.

C gatsby-node.js must be written in TypeScript to support React hooks.

D React hooks are only allowed inside Gatsby page components, not in any other files.

💡 Hint

Consider where gatsby-node.js runs and what React hooks require.

gatsby-node.js runs in the Node.js environment during build time, which does not support React hooks that require a React rendering context.

❓ state_output

advanced

What is the output of this Astro component with client:load directive?

Consider this Astro component snippet:

<script client:load>
  let count = 0;
  function increment() {
    count += 1;
    document.getElementById('count').textContent = count;
  }
</script>
<button onclick="increment()">Clicked <span id="count">0</span> times</button>

What will the user see initially and after clicking the button?

A Initially shows 'Clicked 0 times'. Clicking does not update the count because Astro does not hydrate this component.

B Initially shows nothing. After clicking, the button appears with count 1.

C Initially shows 'Clicked 0 times'. After clicking, the count increases and updates on the button.

D The component throws an error because client:load is not a valid directive.

💡 Hint

Think about what client:load does in Astro.

The client:load directive hydrates the component on page load, enabling interactivity like updating state on button clicks.

🧠 Conceptual

expert

Which framework best suits a content-heavy blog with minimal JavaScript needs?

You want to build a blog with many static pages and minimal client-side JavaScript. Which framework is the best choice?

A Gatsby, because it requires heavy client-side JavaScript for navigation.

B Astro, because it renders static HTML by default and sends minimal JavaScript to the browser.

C Next.js, because it uses server-side rendering for all pages by default.

D Next.js, because it only supports client-side rendering.

💡 Hint

Consider which framework optimizes for static content with less JavaScript.

Astro is designed to generate static HTML with minimal JavaScript, making it ideal for content-heavy sites with little interactivity.

Practice

1. Which framework is best suited for building a fast, simple website that can use components from multiple frontend frameworks?

easy

A. Gatsby

B. Next.js

C. Astro

D. Vue.js

Solution

1. Step 1: Understand Astro's main feature

   Astro is designed to build fast, simple sites and supports using components from different frontend frameworks together.

2. Step 2: Compare with Next.js and Gatsby

   Next.js focuses on dynamic React apps with server features, and Gatsby is for static React content sites, so they don't emphasize mixed frameworks.

3. Final Answer:

   Astro -> Option C

4. Quick Check:

   Fast, simple, mixed frameworks = Astro [OK]

Hint: Astro = fast + mixed frameworks [OK]

Common Mistakes:

• Confusing Next.js as supporting multiple frameworks
• Thinking Gatsby supports mixed frameworks
• Choosing Vue.js which is not part of the comparison

2. Which of the following is the correct way to describe Next.js?

easy

A. A React framework with server-side rendering and API routes

B. A CSS framework for styling React apps

C. A tool for building websites using multiple frontend frameworks

D. A static site generator focused on markdown content

Solution

1. Step 1: Identify Next.js features

   Next.js is a React framework that supports server-side rendering and API routes for dynamic apps.

2. Step 2: Eliminate incorrect options

   A static site generator focused on markdown content describes Gatsby more closely, a CSS framework for styling React apps is unrelated, and a tool for building websites using multiple frontend frameworks describes Astro.

3. Final Answer:

   A React framework with server-side rendering and API routes -> Option A

4. Quick Check:

   Next.js = React + server features [OK]

Hint: Next.js = React + server-side + APIs [OK]

Common Mistakes:

• Confusing Next.js with Gatsby's static focus
• Thinking Next.js supports multiple frontend frameworks
• Mixing up CSS frameworks with Next.js

3. Given the following scenario: You want to build a blog with lots of static content and React components. Which framework will generate a fully static site optimized for fast loading?

medium

A. Astro

B. Gatsby

C. Next.js

D. Express.js

Solution

1. Step 1: Identify Gatsby's strength

   Gatsby is known for generating static sites optimized for content-rich blogs using React components.

2. Step 2: Compare with other frameworks

   Astro is fast but focuses on mixed frameworks, Next.js supports dynamic server features, and Express.js is a backend framework, not for static sites.

3. Final Answer:

   Gatsby -> Option B

4. Quick Check:

   Static React blog = Gatsby [OK]

Hint: Static React content = Gatsby [OK]

Common Mistakes:

• Choosing Next.js for static-only sites
• Confusing Astro's mixed framework support with Gatsby
• Selecting Express.js which is backend only

4. You wrote a Next.js app but your API routes are not working as expected. Which of the following is a common mistake that could cause this issue?

medium

A. Placing API route files outside the /pages/api directory

B. Using Astro components inside API routes

C. Using Gatsby plugins in Next.js config

D. Not importing React in every component

Solution

1. Step 1: Understand Next.js API route structure

   API routes must be inside the /pages/api directory to work correctly in Next.js.

2. Step 2: Identify common mistakes

   Placing API files elsewhere will cause routes not to work. Using Astro components or Gatsby plugins is unrelated to API routes. React import is automatic in Next.js 17+.

3. Final Answer:

   Placing API route files outside the /pages/api directory -> Option A

4. Quick Check:

   API routes must be in /pages/api [OK]

Hint: API routes go in /pages/api folder [OK]

Common Mistakes:

• Putting API files in wrong folders
• Mixing plugins from other frameworks
• Assuming React import is always needed

5. You want to build a website that loads very fast, uses React components, and also includes some Vue components. Which framework should you choose and why?

hard

A. Create React App, because it supports Vue components

B. Gatsby, because it is optimized for React and static content

C. Next.js, because it supports multiple frontend frameworks natively

D. Astro, because it allows mixing React and Vue components with fast loading

Solution

1. Step 1: Identify framework supporting mixed components

   Astro allows mixing components from React, Vue, and others in one project.

2. Step 2: Consider performance and framework features

   Astro focuses on fast loading by shipping less JavaScript. Next.js and Gatsby focus mainly on React. Create React App does not support Vue components.

3. Step 3: Choose the best fit

   Astro fits the need for fast loading and mixed React + Vue components.

4. Final Answer:

   Astro, because it allows mixing React and Vue components with fast loading -> Option D

5. Quick Check:

   Fast + React + Vue = Astro [OK]

Hint: Astro mixes frameworks and loads fast [OK]

Common Mistakes:

• Thinking Next.js supports multiple frameworks natively
• Choosing Gatsby which is React-only
• Assuming Create React App supports Vue