Is it possible to run multiple Vike builds in a single process (e.g., separate mobile/desktop bundles)?

[alexmnv]

Context

I have a Vue + Vike app. The server side is an Express app (server.js) that handles incoming requests and calls renderPage(), which executes code from dist to generate the page output.

The app serves both mobile and desktop clients, and many underlying components have entirely separate implementations for each platform. Currently, both mobile and desktop code is bundled into a single server and client build, meaning all users download code for both platforms.

What I want to achieve

I'd like to produce two separate Vike builds - /dist/mobile and /dist/desktop - so each bundle only includes code for its target platform. Then in the Express request handler, I'd detect the platform (mobile or desktop) and make renderPage execute the code of the corresponding build:

app.all('*', async (req, res) => {
  const platform = detectPlatform(req); // 'mobile' | 'desktop'
  const pageContext = await renderPage({
    urlOriginal: req.originalUrl,
    build: `/dist/${platform}`, // something like this
  });
  // ...
});

Current limitations

Looking at Vike's API, renderPage doesn't accept a build path or build reference - it operates against whichever build was loaded at startup. There's no way to switch the active build per-request.

The only workaround I see is running two separate Node.js processes and routing at the reverse proxy level, which adds operational complexity.

Why defineAsyncComponent isn't a good fit

I've considered wrapping platform-specific components with defineAsyncComponent so Vite code-splits them into separate chunks. The problem is that the split goes very deep - a page component uses sub-components, which use their own sub-components, and mobile/desktop-specific variants can appear at any level of this tree. I'd end up having to wrap a huge number of components across the whole codebase. On top of that, every defineAsyncComponent produces a separate chunk file, so the build would be split into a large number of small files.

Question

1. Is there a way to achieve per-request build selection with the current Vike API that I'm missing?
2. Is there any plan to support multiple build contexts in a single process (e.g., passing a build reference to renderPage)?

[brillout]

What is your end goal? What issue are trying to solve?

1. Is there a way to achieve per-request build selection with the current Vike API that I'm missing?

There currently isn't a way to achieve that — the build dist/ always contains all the pages.

But note that:

• The code of pages is dynamically imported via import(). (E.g. if a page is never rendered then its +Page.js file is never loaded.)
• It's very much on the radar to implement server-side code splitting (so that each page can be deployed to a different deployment target, e.g. to a different edge worker).

2. Is there any plan to support multiple build contexts in a single process (e.g., passing a build reference to renderPage)?

In general, I ain't sure that would be the right approach.

I'm inclined to think that a cleaner appraoch would be the BFF pattern (Backend For Frontend):

• Each frontend has its own separate backend
• Each backend is continuously deployed
• All backends are defined inside a single monorepo

While it adds (negligible?) operational complexity, it seems to be the cleanest and most future proof approach.

[alexmnv]

Thanks for taking the time to respond.

What is your end goal? What issue are you trying to solve?

The goal is to reduce the amount of JS and CSS sent to the client.

Here's a contrived example of how mobile/desktop code is currently handled in my app:

<HeaderMobile v-if="IS_MOBILE" :class="$style.header" />
<HeaderDesktop v-else :class="$style.header" />

.header {
	@include mobile {
		// mobile-specific styles
	}
	
	@include desktop {
		// desktop-specific styles
	}
}

IS_MOBILE is a static (non-reactive) variable determined at request time based on the user agent.

The issue is that users always download code for both platforms, even though only one is used. It can be mitigated with "defineAsyncComponent", but it does not fully solve the problem.

The idea was to define IS_MOBILE at build time and rely on dead code elimination to generate two separate bundles - one for mobile and one for desktop.

This is something I've seen in another project (Webpack-based, no SSR), where separate platform-specific bundles are generated.

[brillout]

That's technically easier because you'll only serve different client-side code.

What you can do is generate two different client-side builds dist/client-mobile/ and dist/client-desktop/ and serve them accordingly. You can achieve that by running $ vike build twice to generate dist-temp-mobile/client/ and dist-temp-desktop/client/ and then restructure the build directory.

But note that this works if you don't use SSR:

I've seen in another project (Webpack-based, no SSR) [emphasis mine]

If you do use SSR, then you'll most likely get hydration mismatches. To avoid them you'll also need two different server builds => we're back at my original reply.