If you get this warning:

Client runtime of both Server Routing and Client Routing loaded

Then this means that the page loads the client runtime of Server Routing as well as the client runtime of Client Routing.

A given page should either use Server Routing or Client Routing, never both. Thus only one runtime should be loaded.

The problem is often due to one the following.

• You configured Rollup's code splitting in a way that includes both runtimes inside a same bundle. For example:

  // vite.config.js
   
  // This will lead to the warning above. We recommend against this practice: not only because
  // of the above warning but also because, in general, a given page should only load what is
  // strictly needed for that page. (Initial page load speed is usually more critical than
  // subsequent page load speed.)
  const rollupOptions = {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor'
        }
      }
    }
  }
   
  export default { build: { rollupOptions } }

• You're importing a utility that is only available to Client Routing such as prefetch() or navigate(), for a page that uses Server Routing.

  // ❌ Don't import these for pages that use Server Routing
  import { prefetch } from 'vike/client/router'
  import { navigate } from 'vike/client/router'

  You'll get a warning:

  You shouldn't `import { something } from 'vike/client/router'` when using
  Server Routing. The 'vike/client/router' utilities work only with
  Client Routing. In particular, don't `import { navigate }` nor `import { prefetch }`
  as they unnecessarily bloat your client-side bundle.
  

  If you don't get this warning, then the issue is somewhere else.