[BUG] RSC does not handle redirect

[michenly]

Describe the bug
Using the redirect.server.jsx route in demo shop.

export default function Redirect({response}) {
  response.redirect('/products/snowboard');
  return <div>This page is redirected</div>;
}

you can see the page redirected on page load, but not when you click into it and the page is being loaded from RSC streaming.

before.mp4

Expected behaviour
That redirect from a server component will work in both SSR & RSC

Additional context
Add any other context about the problem here. eg.

• Hydrogen version: v0.12.0
• Node version: v16.13.0

[michenly]

I have tried to implement this inside entry-server.tsx : hydrate(), but since the status code inside RSC is always 200, there is no differentiator for which RSC streaming need to be redirected instead.

[jplhomer]

IIRC the answer here is to create a <Redirect> client component which gets streamed back as an RSC response, renders in browser, and performs the redirect. We covered SSR-style redirects in #89 but this was the other part of that story. Thanks for adding the issue!

[frandiox]

There's more info about this in #172

RSC hydration, synchronous
In the "SPA-takeover", Hydrogen makes hydration requests (to /react?state... using fetch). This means that server components run normally in the backend and redirect logic can trigger. Returning a normal 3xx redirect here would instruct fetch to download /b but this would return plain HTML, not the "wire" syntax we expect. Therefore, I see two alternatives here:

1. We alter the location header internally and move to /react?state={pathname:/b} instead. This sort of works but the browser URL won't change. We would need to read and parse the response and figure out that the response is for a different page that we requested, and then update the URL.
2. Return a mock response that instructs the frontend to trigger an SPA redirect (using component for example). This is the one implemented in this PR initially. The tricky part here is that Header to opt out of opaque redirect whatwg/fetch#601 so we can't read headers. Instead, I'm using a custom HTTP code (299) for now. Let's discuss about this.

The mentioned implementation was removed from that PR but it's there as a reference.

That said, I think we should explore first the approach Josh mentioned about returning an RSC response containing a custom <Redirect /> client component. The only drawback I see there is that it needs to make a separate request to download the client component but perhaps we could just lazy load it in every app before any redirect.