Choosing which component to render in the handler

[mr-mobster]

I would like to choose which component to display in a handler based on some conditions. For example, if a user is authenticated, I would like to render my app page, otherwise I want to render the landing page with a login form. But I only have access to ctx.render() in the handler function, with the component already preset. Is there a way to change which component is rendered inside the handler?

[nascode]

You can render route component with custom props. Here is a snippet for example:

/** @jsx h */
import { h } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";

interface CustomProps {
  componentA: boolean;
}

export const handler: Handlers<CustomProps> = {
  async GET(req, ctx) {
    const resp = await ctx.render({ componentA: true });
    return resp;
  },
};

export default function Home(props: PageProps<CustomProps>) {
  return props.data.componentA
    ? <div>Render Component A</div>
    : <div>Render Component B</div>;
}

[mr-mobster]

Sure, that's one way of doing it. However, I was hoping there is a way to avoid this kind of boilerplate.

[marvinhagemeister]

This has become a lot easier with Async route components:

export default async function MyPage(req: Request, ctx: RouteContext) {
  const isLoggedIn = await checkUserAuth(req);
  
  if (!isLoggedIn) {
    return <p>not logged in</p>
  }
  
  return <p>logged in</p>
}