Fix server redirects to work properly with RSC responses

Fixes #947

examples/template-hydrogen-default/src/routes/products/[handle].server.jsx

@@ -1,4 +1,4 @@
-import {useShopQuery, Seo, useRouteParams} from '@shopify/hydrogen';
+import {Link, useShopQuery, Seo, useRouteParams} from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
 import ProductDetails from '../../components/ProductDetails.client';

examples/template-hydrogen-default/src/routes/redirect.server.jsx

@@ -1,4 +1,3 @@
 export default function Redirect({response}) {
-  response.redirect('/products/snowboard');
-  return <div>This page is redirected</div>;
+  return response.redirect('/products/snowboard');
 }

packages/hydrogen/src/foundation/Redirect/Redirect.client.tsx

@@ -0,0 +1,20 @@
+import {useEffect} from 'react';
+import {useNavigate} from '../../client';
+
+type RedirectProps = {
+  to: string;
+};
+
+export default function Redirect({to}: RedirectProps) {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (to.startsWith('http') || to.startsWith('https')) {
+      window.location.href = to;
+    } else {
+      navigate(to);
+    }
+  }, []);
+
+  return null;
+}

packages/hydrogen/src/framework/Hydration/ServerComponentResponse.server.ts

@@ -1,6 +1,8 @@
 import {renderToString} from 'react-dom/server';
 import {CacheSeconds, generateCacheControlHeader} from '../CachingStrategy';
 import type {CachingStrategy} from '../../types';
+import Redirect from '../../foundation/Redirect/Redirect.client';
+import React from 'react';
 
 export class ServerComponentResponse extends Response {
   private wait = false;
@@ -55,6 +57,7 @@ export class ServerComponentResponse extends Response {
 
   redirect(location: string, status = 307) {
     this.writeHead({status, headers: {location}});
+    return React.createElement(Redirect, {to: location});
   }
 
   /**

packages/hydrogen/src/framework/docs/pages.md

@@ -126,15 +126,13 @@ export default function CustomPage({response}) {
 
 #### `response.redirect()`
 
-If you want to return users to a different URL, use `response.redirect()` in your server components.
+If you want to return users to a different URL, use `response.redirect()` in your server components. Make sure to return
 
 {% codeblock file %}
 
 ```jsx
 export default function PageThatShouldRedirect({response}) {
-  response.redirect('https://yoursite.com/new-page');
-
-  return <p>Redirecting...</p>;
+  return response.redirect('/new-page');
 }
 ```
 
@@ -145,7 +143,7 @@ The `redirect` function accepts a `location` URL and an optional `statusCode`, w
 {% codeblock file %}
 
 ```jsx
-response.redirect('https://yoursite.com/new-page', 301);
+return response.redirect('https://yoursite.com/new-page', 301);
 ```
 
 {% endcodeblock %}
@@ -154,7 +152,7 @@ response.redirect('https://yoursite.com/new-page', 301);
 > This redirect method only supports initial server-rendered page responses. It does not yet support client-navigated responses.
 
 > Caution:
-> You must call `response.redirect()` before any calls to `useQuery` or `useShopQuery` to prevent streaming while the Suspense data is resolved, or use `response.doNotStream()` to prevent streaming altogether on the response.
+> You must call `return response.redirect()` before any calls to `useQuery` or `useShopQuery` to prevent streaming while the Suspense data is resolved, or use `response.doNotStream()` to prevent streaming altogether on the response. The value must also be returned.
 
 #### `response.send()`
 

packages/playground/server-components/src/routes/index.server.jsx

@@ -14,6 +14,10 @@ export default function Index() {
       <Link className="btn" to="/about">
         About
       </Link>
+      <br />
+      <Link className="redirect-btn" to="/redirected">
+        Redirect
+      </Link>
     </>
   );
 }

packages/playground/server-components/src/routes/redirected.server.jsx

@@ -1,9 +1,3 @@
 export default function Redirected({response}) {
-  response.redirect('/about');
-
-  return (
-    <div>
-      <h1>This page has been moved to /about</h1>
-    </div>
-  );
+  return response.redirect('/about');
 }

packages/playground/server-components/tests/e2e-test-cases.ts

@@ -45,8 +45,12 @@ export default async function testCases({
   });
 
   it('follows synchronous redirects', async () => {
-    await page.goto(getServerUrl() + '/redirected');
-    expect(await page.url()).toContain('/about');
+    await page.goto(getServerUrl() + '/');
+
+    await page.click('.redirect-btn');
+
+    await page.waitForURL('**/about');
+
     expect(await page.textContent('h1')).toContain('About');
   });