SolidJS•2y ago

Simple SSR server redirect not working

I've found a few similar questions with auth redirects, and I thought I've ticked all the boxes, but I still can't get a server redirect happening as soon as there's an await. Everything works, response is logged properly, but the <div> still loads. As soon as I remove the fetch, the redirect works. I've tried with/without <Suspense>, reading/not reading the routeData, throwing or returning the redirect. To replicate, - create a new solid start typescript/tailwind project. - create blah.tsx in /routes and paste in:

import { createComputed, createEffect, Suspense } from "solid-js";
import { useRouteData } from "solid-start";
import { createServerData$, redirect } from "solid-start/server";

export function routeData() {
  return createServerData$(async () => {
    const response = await fetch("http://swapi.dev/api/planets/1");

    const json = await response.json();
    console.log(`fetched, got response`, json);

    return redirect(`/about`);
    // Also tried throw redirect(`/about`);
  });
}

export default function Blah() {
  const data = useRouteData();

  createEffect(() => {
    // Read in discord that you need to access the routeData for it to properly execute??
    console.log(`data`, data);
  });

  return <div>You shouldn't see me.</div>;
}

import { createComputed, createEffect, Suspense } from "solid-js";
import { useRouteData } from "solid-start";
import { createServerData$, redirect } from "solid-start/server";

export function routeData() {
  return createServerData$(async () => {
    const response = await fetch("http://swapi.dev/api/planets/1");

    const json = await response.json();
    console.log(`fetched, got response`, json);

    return redirect(`/about`);
    // Also tried throw redirect(`/about`);
  });
}

export default function Blah() {
  const data = useRouteData();

  createEffect(() => {
    // Read in discord that you need to access the routeData for it to properly execute??
    console.log(`data`, data);
  });

  return <div>You shouldn't see me.</div>;
}

- navigate to http://localhost:3000/blah, see the response logged, and also see the forbidden <div> with no redirect. What am I missing!?

10 Replies

Razboy20•2y ago

Set the deferStream property on createServerData$ to true also throw redirect is best inside routedata e.g. in my own app, I have something like

export function routeData() {
  return createServerData$(
    async (_, { request }) => {
      // check if authenticated
      // ...
      // let's assume they are not,
      throw redirect("/login");
    },
    {
      deferStream: true,
    }
  );
}

export function routeData() {
  return createServerData$(
    async (_, { request }) => {
      // check if authenticated
      // ...
      // let's assume they are not,
      throw redirect("/login");
    },
    {
      deferStream: true,
    }
  );
}

and in terms of usage, you need to access routeData, but don't have to actually save it or log anything from it, e.g. useRouteData<typeof routeData>(); by itself is good enough

Some Call Me TimOP•2y ago

I hadn't tried deferStream, but just did and things still aren't redirecting!

export function routeData() {
  return createServerData$(
    async (_, { request }) => {
      console.log(`going to fetch`);
      const response = await fetch('http://swapi.dev/api/planets/1', {
        credentials: 'include',
        method: 'GET',
      });

      console.log(`fetched response`, response);

      throw redirect(`/test`);
    },
    { deferStream: true },
  );
}

export default function SBClientSnapViewer() {
  const data = useRouteData<typeof routeData>();

  return <div>Nope!</div>;
}

export function routeData() {
  return createServerData$(
    async (_, { request }) => {
      console.log(`going to fetch`);
      const response = await fetch('http://swapi.dev/api/planets/1', {
        credentials: 'include',
        method: 'GET',
      });

      console.log(`fetched response`, response);

      throw redirect(`/test`);
    },
    { deferStream: true },
  );
}

export default function SBClientSnapViewer() {
  const data = useRouteData<typeof routeData>();

  return <div>Nope!</div>;
}

I see both the logs, as well as the <div> on page load....

Razboy20•2y ago

in entry-server.tsx, are you using renderAsync or renderStream?

Some Call Me TimOP•2y ago

export default createHandler(
  renderAsync((event) => <StartServer event={event} />)
);

export default createHandler(
  renderAsync((event) => <StartServer event={event} />)
);

I'll create a brand new ss project now just to make sure it's not a project issue...

Razboy20•2y ago

Instead of <div>Nope!</div>, try

<Show when={data()}>
  <div>Test</div>
</Show>

<Show when={data()}>
  <div>Test</div>
</Show>

Also yeah-data has to be invoked to trigger suspense

Some Call Me TimOP•2y ago

I get nothing with the <Show>

Razboy20•2y ago

in your test case here, you call data, but don't actually read it, as you should have data() so nothing renders?

Some Call Me TimOP•2y ago

nope, blank page

Razboy20•2y ago

well that is good, possibly hm not sure why it isn't redirecting Here is a snippet of code that had fixed this issue for me in the past: https://discord.com/channels/722131463138705510/910635844119982080/1011688878983348245

Some Call Me TimOP•2y ago

Just did a new project, and with the <Show when={data()}> it does redirect... but yeah you were right, the () and deferStream were the missing pieces... that said, my project still doesn't redirect. Sooooo, something is up with my project. Thanks for the link as well, that's super helpful

Gaming

Programming

Simple SSR server redirect not working