Astro vs Next.js vs Gatsby comparison - Hands-On Comparison

Astro vs Next.js vs Gatsby Comparison

📖 Scenario: You are building a simple website that shows a comparison of three popular web frameworks: Astro, Next.js, and Gatsby. This site will help visitors understand the key differences by displaying a list of features for each framework.

🎯 Goal: Create a small Astro project that holds data about Astro, Next.js, and Gatsby features, configures a filter to show only frameworks with a certain feature, and renders the filtered list on a webpage.

📋 What You'll Learn

Create an object called frameworks with exact keys Astro, NextJS, and Gatsby and their features as arrays

Add a variable called requiredFeature with the exact string Static Site Generation

Use a comprehension or filter to create a new object filteredFrameworks containing only frameworks that include requiredFeature

Render the filtered frameworks and their features in an Astro component using semantic HTML

💡 Why This Matters

🌍 Real World

Comparing frameworks helps developers choose the right tool for their projects by understanding features and trade-offs.

💼 Career

Knowing how to organize data, filter it, and render it in a modern framework like Astro is a key skill for frontend developers.

1

DATA SETUP: Create the frameworks data object

Create an object called frameworks with these exact entries: Astro with features ["Static Site Generation", "Partial Hydration", "Markdown Support"], NextJS with features ["Server-side Rendering", "Static Site Generation", "API Routes"], and Gatsby with features ["Static Site Generation", "GraphQL", "Plugins"].

Astro

# Create the frameworks object with exact keys and features
# Your code here

Hint

Use a JavaScript object with keys for each framework and arrays of strings for their features.

2

CONFIGURATION: Define the required feature filter

Add a variable called requiredFeature and set it to the string "Static Site Generation".

Astro

const frameworks = {
  Astro: ["Static Site Generation", "Partial Hydration", "Markdown Support"],
  NextJS: ["Server-side Rendering", "Static Site Generation", "API Routes"],
  Gatsby: ["Static Site Generation", "GraphQL", "Plugins"]
};

// Define the required feature to filter frameworks
# Your code here

Hint

Just create a constant string variable with the exact name and value.

3

CORE LOGIC: Filter frameworks by the required feature

Create a new object called filteredFrameworks that includes only the entries from frameworks where the features array includes the requiredFeature. Use Object.entries, filter, and Object.fromEntries.

Astro

const frameworks = {
  Astro: ["Static Site Generation", "Partial Hydration", "Markdown Support"],
  NextJS: ["Server-side Rendering", "Static Site Generation", "API Routes"],
  Gatsby: ["Static Site Generation", "GraphQL", "Plugins"]
};

const requiredFeature = "Static Site Generation";

// Filter frameworks to only those that include requiredFeature
# Your code here

Hint

Use Object.entries to get key-value pairs, filter by checking if features include the required feature, then convert back to an object.

4

COMPLETION: Render the filtered frameworks in an Astro component

In an Astro component, use semantic HTML to render a <section> with a heading <h2> "Frameworks with Static Site Generation" and a list <ul> of the filtered frameworks. For each framework, show its name in a <h3> and its features in a nested <ul> with <li> items.

Astro

const frameworks = {
  Astro: ["Static Site Generation", "Partial Hydration", "Markdown Support"],
  NextJS: ["Server-side Rendering", "Static Site Generation", "API Routes"],
  Gatsby: ["Static Site Generation", "GraphQL", "Plugins"]
};

const requiredFeature = "Static Site Generation";

const filteredFrameworks = Object.fromEntries(
  Object.entries(frameworks).filter(([, features]) => features.includes(requiredFeature))
);

---


# Your code here

Hint

Use Astro's frontmatter for JavaScript and JSX-like syntax to render the list with semantic HTML elements and accessible labels.

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