Preferable way to exclude specific route from bundle in multi-tenant app

[meanstackmax]

I have a multi-tenant (clients) app and I currently searching for a best way to enable specific route for single client, thus the route should be only included into a bundle for the client where the route is available.
I researched a bit on the issue and found couple of options here:

1. Use manual chunks to exclude some prohibited routes for specific clients like:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('SomeComponent')) {
            return null; // Exclude this chunk
          }
          // Other chunking logic...
          if (id.includes('/components')) {
            return id.split('/').pop().split('.')[0];
          } else if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

and then use route-function to exclude that route as well (but not sure if it’s used since we’re using client routing) or do that inside the AppRouterWrapper.tsx

2.Simply extract the content of the page into a separate file and load that lazy on demand on condition (then it should be excluded from the bundle) and perform a client redirection to not-found-page inside +page.tsx .
Probably this second approach will require some unified wrapper as well.

3. Use guard() function. But this option will not take off the chunk I guess.

I'd be happy if you could advice a good way of achieving this.

UPD: I've resolved this with the following code but wanted to know if there any built-in or cleaner solution:

// +route.ts
import type { RouteSync } from 'vike/types';

const CURRENT_CLIENT = import.meta.env.VITE_APP_CLIENT;

// Original route is '/sonnerei-anlage-1'
function route(): ReturnType<RouteSync> {
 if (CURRENT_CLIENT !== 'fancy-client') {
   return false;
 }

 return true;
}

export { route };

in conjunction with:

// +onBeforePrerenderStart.ts
const CURRENT_CLIENT = import.meta.env.VITE_APP_CLIENT;

async function onBeforePrerenderStart() {
 // NOTE: we need to pass '/' here to to avoid page url mismatch
 if (CURRENT_CLIENT !== 'fancy-client') {
   return {
     url: '/',
     pageContext: {}
   };
 }

 return {
   url: '/route-for-fancy-client-only',
   pageContext: {}
 };
}

export { onBeforePrerenderStart };

And then excluded the related chunk with rollupOptions:

// vite.config.ts
rollupOptions: {
     output: {
       manualChunks(id) {
         if (id.includes('/pages/content/+Page') && currentClient !== 'fancy-client') {
           return null; // Exclude this chunk
         }
       }
     }
   }

[brillout]

I ain't exactly sure what you want to achieve but, indeed, there isn't any built-in functionality for "split deployments".

I have a multi-tenant (clients) app

Feel free to elaborate; at first sight your motivation seems abstract and weird to me. I'd be more inclined to have one app per deployment while sharing code using private packages using a monorepo.

I'd be curious to know why you don't go with the more classical monorepo approach.

[meanstackmax]

I wanted to switch to monorepo in case there are more differences in the structure than just one route. So far the structure is identical across the clients. The functionality is mostly the same except some tweaks.

[snake-py]

@brillout We are building a multi tenant app. Meaning we have one core Frontend (same functions and components and then switch out css files based on ENV vars). Sometimes, clients want to add their own special static page. As of right now we are bundling the special page for all clients.

Client A has following pages:

/home
/about

Client B has same pages as Client A, but requests an additional page:

/home
/about
/client-b-page

We can now protect the /client-b-page with a guard, to redirect any user which might stumble up on it (in case we deliver the Frontend for Client A). However, it would be cleaner if we could simply tell the render engine to ignore the page for the current build output.

I understand if you say, this is not something Vike wants to support then we will see how we deal with it. We just wanted to make sure that there isn't an option like this.

[brillout]

AFAICT the cleanest solution would be to programmatically define pages. You'll then, for example, be able to use environmental variables to add/remove pages.

It's actually something we very much plan to implement, see #1691. Although it will take a little while until we get there (we're currently working on other higher priority features).

[brillout]

In the meantime, I'd indeed use a guard() hook. (@meanstackmax This approach doesn't bloat client-side KBs: code that is unique to a page doesn't leak to other pages.)

[snake-py]

AFAICT the cleanest solution would be to programmatically define pages. You'll then, for example, be able to use environmental variables to add/remove pages.

Yes this is basically what we asked for 👍

Thank you for your feedback!