fix: redirect when using RSC

examples/file-router/components/form.tsx

@@ -1,7 +1,10 @@
 "use client";
+
 import { useActionState } from "react";
 import { useState } from "react";
 
+import { Link } from "@lazarv/react-server/navigation";
+
 import { createOrUpdateNote, Note } from "../actions";
 
 export default function NoteForm({ note }: { note: Note }) {
@@ -42,9 +45,9 @@ export default function NoteForm({ note }: { note: Note }) {
  )) ??
  (state.error && <p className="error">{state.error?.toString()}</p>)}
  <div className="button-group">
- <a href="/forms" className="button">
+ <Link to="/" className="button">
  Cancel
- </a>
+ </Link>
  <button type="submit" className="button primary" disabled={isPending}>
  Save Note
  </button>

examples/file-router/pages/(error).middleware.ts

@@ -0,0 +1,8 @@
+import { usePathname } from "@lazarv/react-server";
+
+export default function RedirectMiddleware() {
+ const pathname = usePathname();
+ if (pathname === "/middleware-error") {
+ throw new Error("Error thrown in middleware");
+ }
+}

examples/file-router/pages/(redirect_extern).middleware.ts

@@ -0,0 +1,19 @@
+import { redirect, usePathname } from "@lazarv/react-server";
+
+export const priority = 200;
+
+export default function RedirectMiddleware() {
+ const pathname = usePathname();
+ if (pathname === "/redirect-notfound") {
+ redirect("notexisting");
+ }
+ if (pathname === "/redirect-external") {
+ redirect("https://react-server.dev");
+ }
+ if (pathname.startsWith("/redirect-api-external")) {
+ redirect("/api-redirect");
+ }
+ if (pathname === "/redirect-about") {
+ redirect("/about");
+ }
+}

examples/file-router/pages/GET.api-redirect.server.ts

@@ -0,0 +1,3 @@
+export default async function GetRedirect() {
+ return Response.redirect("https://react-server.dev", 302);
+}

examples/file-router/pages/about.tsx

@@ -1,9 +1,11 @@
+import { Link } from "@lazarv/react-server/navigation";
+
 export default function AboutPage() {
  return (
  <div>
  <h1>About Page</h1>
  <p>This is the about page of the file-based routing example.</p>
- <a href="/">Go to Home Page</a>
+ <Link to="/">Go to Home Page</Link>
  </div>
  );
 }

examples/file-router/pages/auth/login.tsx

@@ -1,3 +1,5 @@
+import { Link } from "@lazarv/react-server/navigation";
+
 export default function LoginPage() {
  return (
  <div>
@@ -15,7 +17,7 @@ export default function LoginPage() {
  <br />
  <button type="submit">Login</button>
  </form>
- <a href="/">Go to Home Page</a>
+ <Link to="/">Go to Home Page</Link>
  </div>
  );
 }

examples/file-router/pages/index.tsx

@@ -1,15 +1,29 @@
+import { Link } from "@lazarv/react-server/navigation";
+
 export default function IndexPage() {
  return (
  <div>
  <h1>Welcome to the File Router Example</h1>
  <p>This is the home page of the file-based routing example.</p>
- <a href="/about">Go to About Page</a>
+ <Link to="/about">Go to About Page</Link>
  <br />
- <a href="/auth">Go to Login Page</a>
+ <Link to="/auth">Go to Login Page</Link>
  <br />
- <a href="/forms">Go to Forms Page</a>
+ <Link to="/forms">Go to Forms Page</Link>
  <br />
- <a href="/forms-simple">Go to Simple Forms Page</a>
+ <Link to="/forms-simple">Go to Simple Forms Page</Link>
+ <br />
+ <Link to="/notexisting">404 Route not found</Link>
+ <h2>Redirect:</h2>
+ <Link to="/redirect-notfound">404 Route not found</Link>
+ <br />
+ <Link to="/redirect-external">External</Link>
+ <br />
+ <Link to="/redirect-api-external">External with API</Link>
+ <br />
+ <Link to="/redirect-about">Internal redirect to existing about page</Link>
+ <h2>Error:</h2>
+ <Link to="/middleware-error">Throw error in middleware</Link>
  </div>
  );
 }

examples/pokemon/src/lib/pokemon.ts

@@ -23,6 +23,9 @@ export async function getAllPokemons(): Promise<Pokemon[]> {
  let next = `https://pokeapi.co/api/v2/pokemon?limit=${process.env.POKEMON_LIMIT || 1000}`;
  while (next) {
  const response = await fetch(next);
+ if (!response.ok) {
+ throw new Error("Failed to fetch Pokemons");
+ }
  const data = await response.json();
  pokemons = pokemons.concat(data.results);
  next = data.next;
@@ -68,6 +71,9 @@ export async function getPokemons(
 export async function getPokemon(name: string): Promise<Pokemon> {
  "use cache";
  const pokemonData = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
+ if (!pokemonData.ok) {
+ throw new Error(`Failed to fetch Pokemon: ${name}`);
+ }
  return pokemonData.json();
 }
 
@@ -87,6 +93,9 @@ export type AbilityDetails = {
 export async function getAbility(name: string): Promise<AbilityDetails> {
  "use cache";
  const abilityData = await fetch(`https://pokeapi.co/api/v2/ability/${name}`);
+ if (!abilityData.ok) {
+ throw new Error(`Failed to fetch Ability: ${name}`);
+ }
  return abilityData.json();
 }
 
@@ -101,6 +110,9 @@ export type TypeDetails = {
 export async function getType(name: string): Promise<TypeDetails> {
  "use cache";
  const typeData = await fetch(`https://pokeapi.co/api/v2/type/${name}`);
+ if (!typeData.ok) {
+ throw new Error(`Failed to fetch Type: ${name}`);
+ }
  return typeData.json();
 }
 
@@ -125,29 +137,37 @@ export async function getSpecies(name: string): Promise<SpeciesDetails> {
  const speciesData = await fetch(
  `https://pokeapi.co/api/v2/pokemon-species/${name}`
  );
+ if (!speciesData.ok) {
+ throw new Error(`Failed to fetch Species: ${name}`);
+ }
  return speciesData.json();
 }
 
 export async function getPokemonDetails(name: string): Promise<
- Omit<Pokemon, "abilities" | "types" | "species"> & {
- abilities: AbilityDetails[];
- types: TypeDetails[];
- species: SpeciesDetails;
- }
+ | (Omit<Pokemon, "abilities" | "types" | "species"> & {
+ abilities: AbilityDetails[];
+ types: TypeDetails[];
+ species: SpeciesDetails;
+ })
+ | null
 > {
  "use cache";
- const pokemon = await getPokemon(name);
+ try {
+ const pokemon = await getPokemon(name);
 
- if (!pokemon) {
- throw new Error(`Pokemon "${name}" not found`);
- }
+  if (!pokemon) {
+  throw new Error(`Pokemon "${name}" not found`);
+  }
 
- const abilities = await Promise.all(
- pokemon.abilities.map((ability) => getAbility(ability.ability.name))
- );
- const types = await Promise.all(
- pokemon.types.map((type) => getType(type.type.name))
- );
- const species = await getSpecies(pokemon.species.name);
- return { ...pokemon, abilities, types, species };
+ const abilities = await Promise.all(
+ pokemon.abilities.map((ability) => getAbility(ability.ability.name))
+ );
+ const types = await Promise.all(
+ pokemon.types.map((type) => getType(type.type.name))
+ );
+ const species = await getSpecies(pokemon.species.name);
+ return { ...pokemon, abilities, types, species };
+ } catch {
+ return null;
+ }
 }

packages/react-server/client/ClientProvider.jsx

@@ -686,8 +686,10 @@ function getFlightResponse(url, options = {}) {
  try {
  response = await fetch(srcString, {
  ...options.request,
- method: options.method ?? (options.body ? "POST" : "GET"),
- body: options.body,
+ method:
+ options.method ??
+ (options.body && options.body !== "{}" ? "POST" : "GET"),
+ body: options.body === "{}" ? undefined : options.body,
  headers: {
  ...options.request?.headers,
  accept: "text/x-component",
@@ -698,6 +700,13 @@ function getFlightResponse(url, options = {}) {
  credentials: "include",
  signal: abortController?.signal,
  });
+
+ if (!response.body) {
+ throw new Error(
+ `The fetch to ${srcString} did not return a readable body.`
+ );
+ }
+
  const { body } = response;
 
  window.dispatchEvent(
@@ -716,18 +725,50 @@ function getFlightResponse(url, options = {}) {
  return;
  }
 
+ let chunks = 0;
+ let redirectTo = null;
  const reader = body.getReader();
+ const decoder = new TextDecoder();
  while (true) {
  const { done, value } = await reader.read();
  if (value) {
+ if (!redirectTo) {
+ const decodedValue = decoder.decode(value);
+ redirectTo = decodedValue.match(
+ /1:E\{"digest":"Location=(?<location>[^"]+)"/
+ )?.groups.location;
+ }
+
  controller.enqueue(value);
+ chunks++;
  }
  if (done) {
  break;
  }
  }
+
+ if (chunks === 0) {
+ throw new Error(
+ `The fetch to ${srcString} returned an empty body.`
+ );
+ }
+
  controller.close();
 
+ if (redirectTo) {
+ const url = new URL(redirectTo, location.origin);
+
+ if (url.origin === location.origin) {
+ navigate(redirectTo, {
+ outlet: options.outlet,
+ external: options.outlet !== PAGE_ROOT,
+ push: false,
+ });
+ } else {
+ location.replace(redirectTo);
+ }
+ }
+
  if (outletAbortControllers.has(options.outlet || url)) {
  const abortControllers = outletAbortControllers.get(
  options.outlet || url
@@ -759,7 +800,11 @@ function getFlightResponse(url, options = {}) {
  const encoder = new TextEncoder();
  await new Promise((resolve) => setTimeout(resolve, 0));
 
- controller.enqueue(encoder.encode(`0:["$L1"]\n1:null\n`));
+ controller.enqueue(
+ encoder.encode(
+ `0:["$L1"]\n1:E{"digest":"${e.digest}","message":"${e.message}","env":"${e.environmentName}","stack":[],"owner":null}\n`
+ )
+ );
  controller.close();
  resolve();
  });

packages/react-server/client/ErrorBoundary.jsx

@@ -193,7 +193,16 @@ function FallbackRenderComponent({
 
  useEffect(() => {
  if (redirectTo) {
- navigate(redirectTo, { outlet, external: outlet !== PAGE_ROOT });
+ const url = new URL(redirectTo, location.origin);
+ if (url.origin === location.origin) {
+ navigate(redirectTo, {
+ outlet,
+ external: outlet !== PAGE_ROOT,
+ push: false,
+ });
+ } else {
+ location.replace(redirectTo);
+ }
  }
  }, [redirectTo, navigate, outlet]);
 

packages/react-server/client/ReactServerComponent.jsx

@@ -236,6 +236,10 @@ function FlightComponent({
  } else {
  throw error;
  }
+ } else if (
+ Component?.[0]?._payload?.reason?.digest?.startsWith("Location=")
+ ) {
+ componentToRender = prevComponent.current;
  } else {
  prevComponent.current = Component;
  }