How to override and combine client & server routing #605

vchirikov · 2023-01-22T16:04:40Z

vchirikov
Jan 22, 2023

Hi, first of all thanks for the great framework, I'm exploring VPS and have questions about routing & sharing the code.

Let's imagine situations:

/ - all pages should use clientRouting = false (do not define anything, because if you set to false it will throw)
/admin - pages should use clientRouting = true

Everything is ok, we can override clientRouting in /admin routing with custom pages/admin/renderer/_default.page.client.tsx with export const clientRouting = true;. We also should create a pages/admin/renderer/_default.page.server.tsx with redefine passToClient because without it VPS will throw a warning (e.g. pageContext.urlPathname is already available in the browser when using Client Routing), so it's not so clean to redefine, but it works.

/ all pages should use client-side router(clientRouting = true)
/blog pages should use server router (clientRouting = false;) but if we set clientRouting in the /renderer/_default.page.client.tsx we can't override it, because the exception:

/_default.page.client.tsx has export { clientRouting } with the value false which is forbidden: remove export { clientRouting } instead.

So I have next questions:

How do you advise to implement 2?
Could the code know, which router is used on a page?

For example I want to have a function which navigates whatever router is used on a page:

import { navigate } from 'vite-plugin-ssr/client/router';
import { isBrowser } from '#shared/utils';

type NavigateParams = Parameters<typeof navigate>;
type NavigateReturn = ReturnType<typeof navigate>;

const completed = Promise.resolve();

/** Navigates to the url */
export function goto(url: string, parameters?: NavigateParams[1]): NavigateReturn {
  // if it is not browser => do nothing
  if (!isBrowser) {
    return completed;
  }
  // contains scheme:// so it's an external url, navigate through redirect
  if (url.indexOf(':') > 0) {
    window.location.href = url;
    return completed;
  }

  const href = url.startsWith('/') ? `${basePath}/${url.slice(1)}` : url;
  // we should check it is client routing page or not
  // implementation detail (!)
  const globalNavigate = window['__vite_plugin_ssr']['navigate.ts']['navigate'];

  if (globalNavigate.constructor.name === 'AsyncFunction') {
    // we are on page with client-side routing, use navigate
    return navigate(href, parameters);
  }
  // we are on page with server-side routing
  else {
    window.location.href = href;
  }
  return completed;
}