Server islands respond with 404 when deployed to vercel

[Trombach]

Astro Info

Astro                    v5.1.1
Node                     v22.10.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  @astrojs/vercel
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Sever islands have stopped working on vercel and the _server-islands route only responds with a 404 message. They still work fine in dev mode. I have deployed the provided minimal example to vercel here. Please note that the unused.astro page is only there to work around another issue that exists with server-islands at the moment which is being tracked here #12744

I believe the last version of Astro that didn't have this issue was 5.0.5, so this might have been introduced by the refactor in #12597. I have done a little bit of digging, but haven't been able to pin-point the error, but it does look like the server island endpoint is missing from the manifest.

I might be able to look into this more in the coming days

What's the expected result?

Server islands should work when deploying to vercel

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/Trombach/withastro-astro-4hurafak

Participation

• I am willing to submit a pull request for this issue.

[Cocodrulo]

Hapenning to me as well!!

[gtom84]

I tried downgrading to 5.0.5 and <Serverisland server:defer /> was working on Vercel but only without ISR on. When I enabled ISR it stopped working with the HTTP/404.

I used the same src code with only difference being isr: { /* */ }

export default defineConfig({
  output: "server",
  adapter: vercel({
    isr: {

       bypassToken: "***",
       exclude: [ "/some/path", "/some/path2"]

    }
  }),
});

[aczw]

I can reproduce the issue appearing past v5.0.5. Downgrading to 5.0.5 fixed the issue for me. In my astro.config.ts the output is set to "server" and I am not using ISR.

[CodeWithShreyans]

updates on this?

[CodeWithShreyans]

Side question but does ISR work for Server Islands?

[gtom84]

Side question but does ISR work for Server Islands?

Vercel says

ISR function requests do not include search params, similar to requests in static mode.

By this logic it should not because Server Island is loaded with searchParams but the same applies for static build and that works in 5.0.5.

I tested in the most recent 5.1.2 and still the same results as in originaly reported 5.1.1.

[Trombach]

I've not had time to properly look into the root cause, but the breakage is due to the astro:build:done hook not returning the _server-islands/[name] route in the (deprecated) routes array. Currently the vercel (and probably other adapters too) use this to generate the route config. This should be fixed when withastro/adapters#454 lands, since it moves all adapters to the newer astro:routes:resolved hook which I've confirmed works as expected.

Even though the routes parameter in astro:build:done is deprecated, it's still a regression and potentially breaks integrations that rely on server island routes being contained in the data. It's a bit of an edge case, that's probably why it slipped through.

[trueberryless]

Currently the vercel (and probably other adapters too) use this to generate the route config.

I can confirm that the issue also exists with Node adapter. Reference

[andrijantasevski]

I can also confirm that this issue exists with the Node adapter on 5.1.2. I can provide a repro if needed.

Update: still not working in 5.1.3 with the Node adapter.

[bluwy]

Related: withastro/adapters#457 (comment)

[bluwy]

@andrijantasevski can you provide a repro? I've tested locally and 5.1.3 seems to be working fine now

[github-actions]

Hello @Trombach. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[Trombach]

This is working again for me using Astro 5.1.3. Using the vercel adapter

[andrijantasevski]

@andrijantasevski can you provide a repro? I've tested locally and 5.1.3 seems to be working fine now

Here's a repository with a minimal repro:

https://github.com/andrijantasevski/astro-server-islands

Astro v5.1.3
Node v20.9.0
System Linux (x64)
Package Manager pnpm
Output static
Adapter @astrojs/node
Integrations none

[gtom84]

This is working again for me using Astro 5.1.3. Using the vercel adapter

Does it work for you if you also enable ISR in Vercel adapter?

I tested the above minimal repo and it works with Vercel in both output: static and server but only without ISR.

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: vercel({
    isr: true,   // Server Islands don't work with this line in 5.1.3, returns HTTP/400 Bad request
  }),
});

[andrijantasevski]

I got server islands to work after tweaking the settings.

With the node adapter, I had to add the property output: server in the astro config file.

I also had to mark the page with the directive export const prerender = true.

It would be great if the documentation could be updated with this information because I thought the compiler knows how to automatically render the islands dynamically without having to explicitly mark the pages as prerender/static.

The Astro server islands example that is inspired by Next.js PPR needs to be updated as well because it is an older implementation that is based on the hybrid rendering, which I assume doesn't require us to explicitly mark the pages as prerendered with a SSR adapter.

[Trombach]

I got server islands to work after tweaking the settings.

With the node adapter, I had to add the property output: server in the astro config file.

I also had to mark the page with the directive export const prerender = true.

It would be great if the documentation could be updated with this information because I thought the compiler knows how to automatically render the islands dynamically without having to explicitly mark the pages as prerender/static.

The Astro server islands example that is inspired by Next.js PPR needs to be updated as well because it is an older implementation that is based on the hybrid rendering, which I assume doesn't require us to explicitly mark the pages as prerendered with a SSR adapter.

You shouldn't have to do those steps, so that sounds like a bug. I believe the docs are correct.

I think you're seeing another issue tracked in #12744

@gtom84 I'll try to test my page with isr enabled later today

[trueberryless]

With the node adapter, I had to add the property output: server in the astro config file.

I also had to mark the page with the directive export const prerender = true.

I can confirm that this is also happening in my project, as you can see in this PR.

Disclaimer: I have not looked into #12744, it's probably that issue instead...

In order to repro:

1. Checkout the docs-update branch
2. Revert the changes from trueberryless-org/starlight-plugin-show-latest-version@da8f1fb (these changes make it possible to work, as @andrijantasevski mentions)
3. pnpm build -> pnpm preview
4. The badge in the site title should be empty (no version visible) in contrast to the badges you can see here: http://localhost:4321/components#versionbadge

[bluwy]

It looks like the issue here is that we're adding the server-island route handler here:

astro/packages/astro/src/core/routing/manifest/create.ts

Lines 743 to 752 in 0770810

	if (dev || settings.buildOutput === 'server') {
	injectImageEndpoint(settings, { routes }, dev ? 'dev' : 'build');
	// Ideally we would only inject the server islands route if server islands are used in the project.
	// Unforunately, there is a "circular dependency": to know if server islands are used, we need to run
	// the build but the build relies on the routes manifest.
	// This situation also means we cannot update the buildOutput based on wether or not server islands
	// are used in the project. If server islands are detected after the build but the buildOutput is
	// static, we fail the build.
	injectServerIslandRoute(settings.config, { routes });
	}

It depends on settings.buildOutput during build, however that field actually isn't finalized yet when we try to read it. At that point, it returns "static". But when running the node adapter, it'll later set it as "server" here:

astro/packages/astro/src/integrations/hooks.ts

Lines 330 to 332 in 0770810

	if (adapter.adapterFeatures?.buildOutput !== 'static') {
	settings.buildOutput = 'server';
	}

The two code above belongs to the createRouteManifest and runHookConfigDone functions respectively. The former always runs first, then the latter. (example, and few other places). Maybe we need to swap the order to fix this, though I'm not sure if it's safe.