S
SolidJS•4mo ago
Odama626

client only routes

Hey all, I am running into issues with ssr enabled again. I am trying to prerender my marketing pages, and then keep everything else that requires auth as client only. I tried using 
const AuthenticatedRoutes = clientOnly(() => import('./clientOnly'));
const AuthenticatedRoutes = clientOnly(() => import('./clientOnly'));
so now those routes work for client side navigation, but if I refresh the page on any of those routes I get a 404
4 Replies
Madaxen86
Madaxen86•4mo ago
Doing this in the route.tsx should work (filerouting) 
import { clientOnly } from '@solidjs/start';

function NoSSRPage() {
  return <h1>no SSR</h1>;
}

export default clientOnly(async () => ({ default: NoSSRPage }));
import { clientOnly } from '@solidjs/start';

function NoSSRPage() {
  return <h1>no SSR</h1>;
}

export default clientOnly(async () => ({ default: NoSSRPage }));
Odama626
Odama626OP•4mo ago
I was able to get something working like this but now I am running into a new issue lol 
export function ClientRoute(props: Parameters<typeof Route> & { import: string }) {
  const [localProps, restProps] = splitProps(props, ['import']);

  return <Route {...props} component={clientOnly(() => import(localProps.import))} />;
}

export function AuthClientRoute(props: Parameters<typeof Route> & { import: string }) {
  const [localProps, restProps] = splitProps(props, ['import']);

  return (
    <Route
      {...props}
      component={clientOnly(
        async () => {
          const isAuthenticated = pb.authStore.isValid;
          const navigate = useNavigate();

          if (!isAuthenticated) {
            InternalRedirects.setCurrent('auth');
            navigate('/user/login');
            return () => null;
          }

          return import(localProps.import);
        },
        { lazy: true }
      )}
    />
  );
}
export function ClientRoute(props: Parameters<typeof Route> & { import: string }) {
  const [localProps, restProps] = splitProps(props, ['import']);

  return <Route {...props} component={clientOnly(() => import(localProps.import))} />;
}

export function AuthClientRoute(props: Parameters<typeof Route> & { import: string }) {
  const [localProps, restProps] = splitProps(props, ['import']);

  return (
    <Route
      {...props}
      component={clientOnly(
        async () => {
          const isAuthenticated = pb.authStore.isValid;
          const navigate = useNavigate();

          if (!isAuthenticated) {
            InternalRedirects.setCurrent('auth');
            navigate('/user/login');
            return () => null;
          }

          return import(localProps.import);
        },
        { lazy: true }
      )}
    />
  );
}
      <AuthClientRoute path='/self/:accountId' import={'./lib/account-context'}>
        <AuthClientRoute path='/' import='./routes/self/page' />
        <ClientRoute path='/legal' component={LegalPage} />
        <IntroductionRoutes />
      </AuthClientRoute>
      <AuthClientRoute path='/self/:accountId' import={'./lib/account-context'}>
        <AuthClientRoute path='/' import='./routes/self/page' />
        <ClientRoute path='/legal' component={LegalPage} />
        <IntroductionRoutes />
      </AuthClientRoute>
'./lib/account-context' is a context provider and it looks like the provider code isn't running
Madaxen86
Madaxen86•4mo ago
or you can create a layout to wrap all your authenticated routes so you don't have to do this everywhere like 
export default function AuthLayout(props:RouteSectionProps) {
  const [mounted,setMounted] = createSignal(false);
  onMount(()=> setMounted(true));
  return <Show when={mounted()} fallback="loading page...">
    {props.children}
  </Show> 
}
export default function AuthLayout(props:RouteSectionProps) {
  const [mounted,setMounted] = createSignal(false);
  onMount(()=> setMounted(true));
  return <Show when={mounted()} fallback="loading page...">
    {props.children}
  </Show> 
}
Odama626
Odama626OP•4mo ago
oh thanks! that works other than the initial 404 flicker that makes context work too I wrapped my 404 page content in that too and now it just flickers without showing page not found lol man, I was overcomplicating things

Did you find this page helpful?