Protected routes and middleware in Astro - Performance & Optimization

Performance: Protected routes and middleware

MEDIUM IMPACT

This concept affects page load speed and interaction responsiveness by controlling when and how protected content is rendered or blocked.

Protecting a route to restrict access to authenticated users

Astro

export async function middleware({ request, redirect }, next) {
  const user = await fetchUserFromRequest(request);
  if (!user) {
    return redirect('/login');
  }
  return next();
}

export async function get() {
  return {
    status: 200,
    body: await getProtectedContent()
  };
}

Middleware intercepts requests early to redirect unauthorized users, avoiding loading protected content unnecessarily.

📈 Performance GainPrevents unnecessary data fetching and rendering; reduces LCP by blocking unauthorized content early.

Protecting a route to restrict access to authenticated users

Astro

export async function get() {
  const user = await fetchUser();
  if (!user) {
    return {
      status: 302,
      headers: { Location: '/login' }
    };
  }
  const body = await getProtectedContent();
  return {
    status: 200,
    body: body
  };
}

This loads protected content before checking authentication, causing unnecessary data fetching and rendering.

📉 Performance CostBlocks rendering until user fetch completes; triggers full page load even if unauthorized.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Loading protected content before auth check	High (loads full DOM)	Multiple (full page reflow)	High (renders unauthorized content)	[X] Bad
Middleware redirects unauthorized early	Low (no DOM for unauthorized)	None (no reflow)	Low (no paint for unauthorized)	[OK] Good

Rendering Pipeline

Middleware runs before the main rendering pipeline, deciding if the request should proceed or redirect. If allowed, the page content is fetched and rendered. Unauthorized requests are redirected early, skipping layout and paint.

→Request Handling

→Server Response

→Layout

→Paint

⚠️ BottleneckServer Response delay if middleware performs heavy checks

Core Web Vital Affected

LCP

This concept affects page load speed and interaction responsiveness by controlling when and how protected content is rendered or blocked.

Optimization Tips

1Use middleware to redirect unauthorized users before rendering protected content.

2Keep middleware logic simple to avoid server response delays.

3Cache authentication checks when possible to speed up middleware.

Performance Quiz - 3 Questions

What is the main performance benefit of using middleware for protected routes?

A It blocks unauthorized users before loading protected content, reducing load time.

B It loads all content first, then checks authorization.

C It delays rendering until all scripts load.

D It caches all pages regardless of user status.

DevTools: Network

How to check: Open DevTools Network panel, filter by document requests, and observe if unauthorized requests get redirected before full page load.

What to look for: Look for 302 redirects happening quickly without loading full page resources, indicating middleware is blocking unauthorized access early.

Practice

1. What is the main purpose of middleware in Astro when protecting routes?

easy

A. To check user access before loading a page

B. To style the page content dynamically

C. To fetch data after the page loads

D. To optimize images on the page

Solution

1. Step 1: Understand middleware role

   Middleware runs before a page loads to perform checks or actions.

2. Step 2: Identify middleware use in protected routes

   It checks if a user has permission to access certain pages before showing them.

3. Final Answer:

   To check user access before loading a page -> Option A

4. Quick Check:

   Middleware checks access = D [OK]

Hint: Middleware runs first to check access before page loads [OK]

Common Mistakes:

• Thinking middleware styles pages
• Assuming middleware fetches data after load
• Confusing middleware with image optimization

2. Which syntax correctly defines a middleware matcher for protecting all routes under /dashboard in Astro?

easy

A. export const matcher = '/dashboard/*';

B. export const matcher = ['/dashboard/*'];

C. export const matcher = ['/dashboard'];

D. export const matcher = '/dashboard';

Solution

1. Step 1: Recall matcher syntax

   Matcher must be an array of strings specifying route patterns.

2. Step 2: Match all routes under /dashboard

   Using '/dashboard/*' inside an array matches all subpaths.

3. Final Answer:

   export const matcher = ['/dashboard/*']; -> Option B

4. Quick Check:

   Matcher is array with pattern string = A [OK]

Hint: Matcher must be an array of route strings [OK]

Common Mistakes:

• Using string instead of array for matcher
• Missing wildcard * to match subroutes
• Using exact path without wildcard for nested routes

3. Given this middleware code in Astro, what happens when a user visits /profile without a valid token?

export const matcher = ['/profile'];

export async function middleware({ request, redirect }) {
  const token = request.headers.get('authorization');
  if (!token) {
    return redirect('/login');
  }
  return;
}

medium

A. Middleware throws an error

B. User sees the /profile page

C. User is redirected to /login

D. User is redirected to /home

Solution

1. Step 1: Check token presence

   The middleware checks if the 'authorization' header exists in the request.

2. Step 2: Redirect if no token

   If token is missing, middleware redirects user to '/login'.

3. Final Answer:

   User is redirected to /login -> Option C

4. Quick Check:

   No token means redirect to /login = A [OK]

Hint: No token triggers redirect to login [OK]

Common Mistakes:

• Assuming user sees page without token
• Expecting error instead of redirect
• Redirecting to wrong path

4. Identify the error in this Astro middleware code meant to protect /admin routes:

export const matcher = '/admin/*';

export function middleware({ request, redirect }) {
  const user = request.headers.get('user');
  if (user !== 'admin') {
    redirect('/not-authorized');
  }
}

medium

A. request.headers.get does not exist

B. redirect should be called with await

C. middleware must be async function

D. matcher should be an array, not a string

Solution

1. Step 1: Check matcher syntax

   Matcher must be an array of strings, not a single string.

2. Step 2: Confirm redirect usage

   Redirect can be called synchronously; no await needed here.

3. Final Answer:

   matcher should be an array, not a string -> Option D

4. Quick Check:

   Matcher array required = C [OK]

Hint: Matcher must always be an array even for one route [OK]

Common Mistakes:

• Using string instead of array for matcher
• Thinking redirect needs await
• Confusing request.headers API

5. You want to protect both /dashboard and /settings routes using middleware in Astro. Which matcher setup correctly protects both paths and their subpaths?

hard

A. export const matcher = ['/dashboard/*', '/settings/*'];

B. export const matcher = ['/dashboard', '/settings'];

C. export const matcher = ['/dashboard*', '/settings*'];

D. export const matcher = ['/dashboard/**', '/settings/**'];

Solution

1. Step 1: Understand wildcard usage

   '/*' matches all subpaths under a route, ensuring protection of nested pages.

2. Step 2: Verify matcher array format

   Matcher must be an array of strings with correct wildcard patterns.

3. Final Answer:

   export const matcher = ['/dashboard/*', '/settings/*']; -> Option A

4. Quick Check:

   Array with '/*' wildcard protects subpaths = B [OK]

Hint: Use '/*' wildcard in array to protect all subroutes [OK]

Common Mistakes:

• Omitting wildcard to protect subpaths
• Using incorrect wildcard like '**'
• Using string instead of array for matcher