Redirects

[rmarscher]

I'd like an easy way to redirect from a server component or server action function. I'm not sure what React might already be working on in this area. Being able to return a Response object from a server component instead of JSX sounds like one way to handle it.

I'd like my redirect to work with client-side navigation too... so if I navigate to a protected route, the RSC handler would be able to check - maybe with a suspense boundary to render a shell - and then redirect before any protected components are sent over the wire.

I can currently achieve a redirect in Waku by using middleware.

Roughly like this:

import type { Middleware } from "waku/config";
import { getHonoContext } from "waku/unstable_hono";

const redirectsMiddleware: Middleware = () => {
  return async (ctx, next) => {
    if (
      ctx.req.url.pathname.startsWith("/protected") ||
      ctx.req.url.pathname.startsWith("/RSC/protected")
    ) {
      const isRSC = ctx.req.url.pathname.startsWith("/RSC/");
      const c = getHonoContext();
      if (!c.get('user')) {
        if (isRSC) {
          // TODO return a meta refresh tag instead of the normal RSC payload? 
          return;
        }
        const resUrl = new URL(ctx.req.url.toString());
        resUrl.pathname = "/login";
        c.redirect(resUrl.toString(), 302);
        ctx.res.status = 302;
        ctx.res.body = null;
        return;
      }
    }
  };
};

I found I had to set the redirect on the hono context and in the ctx.res to get it to work. I though it would work to just set ctx.res.status but it didn't.

I saw unstable_redirect() exists in waku/router/server but I wasn't sure how to use it. Really I want something I can invoke from a server component or server function.

[dai-shi]

unstable_redirect is only for client navigation.

[dai-shi]

You probably called it in a component (render function). Try calling it in a server function (action).

So, currently, redirects are out of the scope of Waku.
Similar discussion is open now: #929

[dai-shi]

Well, it's not totally out of the scope. My assumption was this is for middleware, like examples/08_cookies.

So, we might be able to design an API for that. It's just that unstable_redirect isn't for that. (we can change the name, or add the capability.)

[rmarscher]

I found I can return <meta httpEquiv="refresh" content="0;url=/" /> from a server component render function along with a loading screen when I need to redirect the user instead of showing the requested page. That accomplishes what I need to do there for now.

[dai-shi]

a good hack for now.

My plan:

1. rename current unstable_redirect to something else.
2. develop a middleware to support server redirects. waku/middleware/redirect or something.
3. attach an api to waku/server

You can help with 2 and 3. It's going to be something similar to waku/middleware/headers and unstable_getHeaders.

[dai-shi]

1: #931

[dai-shi]

I can currently achieve a redirect in Waku by using middleware.

Yeah, that's something what I imagine.

I though it would work to just set ctx.res.status but it didn't.

There might be a way to improve it.

[rmarscher]

I can look into that when I have a moment.

[dai-shi]

I'm not sure what React might already be working on in this area.

Basically, React doesn't recommend for server components to interact with Response.
It's because a server component can render after the response has already been sent.

[dai-shi]

When used in a streaming context, this will insert a meta tag to emit the redirect on the client side.

That's clever. Though, I'm not sure if it's Waku's territory.

[dai-shi]

It's pretty hard for many Nextjs concepts.

Nextjs is SSR framework with RSC added.
Waku is RSC framework with SSR that can be opt-out.

[rmarscher]

When used in a streaming context, this will insert a meta tag to emit the redirect on the client side.

That's clever. Though, I'm not sure if it's Waku's territory.

Yeah, I also just stumbled on returning a meta tag as a solution. #927 (reply in thread)

[rmarscher]

Waku is RSC framework with SSR that can be opt-out.

🎉 Yeah, I love that. I don't like fighting with SSR on apps and pages that don't even benefit from it.

[rmarscher]

I realized my middleware needs to handle the /RSC/* routes. For my login/account context middleware, that gets things working for either context. I updated the example in the description of this discussion to note that.

[dai-shi]

#929 (reply in thread)

I will probably consider making RSC path a spec, for both waku minimal api and waku/router.

[rmarscher]

This seems to work:

function redirectRSC(ctx: HandlerContext, path: string, component: string) {
  ctx.res.headers = {
    ...ctx.res.headers,
    // "Content-Type": "text/x-component",
    "Content-Type": "text/plain; charset=utf-8",
  };
  const flightData = `2:{"name":"${component}","env":"Server","key":null,"owner":null}
1:D"$2"
0:{"${path.slice(1)}":"$L1"}
1:["$","meta",null,{"httpEquiv":"refresh","content":"0;url=/login"},"$2"]
`;
  ctx.res.body = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode(flightData));
      controller.close();
    },
  });

const accountMiddleware: Middleware = () => {
  return async (ctx, next) => {
    console.log("req path:", ctx.req.url.pathname);
    if (
      ctx.req.url.pathname.startsWith("/account")
      || ctx.req.url.pathname.startsWith("/account")
    ) {
      const isRSC = ctx.req.url.pathname.startsWith("/RSC/");
      const account = await getAccount(ctx);
      if (!account) {
        if (isRSC) {
          // Send a meta refresh tag over RSC
          redirectRSC(ctx, "/layout", "Layout");
          return;
        }
        const resUrl = new URL(ctx.req.url.toString());
        if (ctx.req.headers["x-forwarded-host"]) {
          resUrl.hostname = ctx.req.headers["x-forwarded-host"];
        }
        resUrl.pathname = "/login";
        c.redirect(resUrl.toString(), 302);
        ctx.res.status = 302;
        ctx.res.body = null;
        return;
      }
      ctx.context.account = account;
    }
  }
}

export default accountMiddleware;

I could not find a simple function to turn basic html element jsx into the flight format. I think this renderFragment might be what I'm looking for - but it isn't exported. https://github.com/facebook/react/blob/main/packages/react-server/src/ReactFlightServer.js#L1433

It's an interesting experiment... but it's probably better to just await next(); return; if isRSC is true and setup the server components to return a client-side redirect in useEffect with router.push or router.replace.

[dai-shi]

seems like a very interesting experiment. 🤯

[rmarscher]

I saw this error when it was deployed... so not quite that easy...

Failed to read a RSC payload created by a development version of React on the server while using a production version on the client. Always use matching versions on the server and the client.

Now I'm curious to see how the production payload is different.