Improve documentation on how to import .server.ts and .client.ts files

[jjmoorhouse]

Hi 👋

Raising an issue/discussion as couldn't find anything in the docs or solved issues.

We're currently evaluating Vike as an alternative to Nuxt 3. One of the biggest problems we're having with Nuxt 3 is how to separate clientside and server side code, which is one of the reasons we're evaluating Vike.

I've read the documentation on server.js + client.js files but it doesn't include information on how to import these files.

Expected behaviour:

/logger/
-- index.client.ts
-- index.server.ts

import logger from '../logger' # imports logger/index.server.ts when code is running on the server & imports logger/client.ts when code is running in browser

This allows for custom behaviour, server logger will write logs to stdout and browser logger will send them directly to a log provider like datadog etc..

I've tried the following setup

/logger/
-- index.client.ts
-- index.server.ts
/orders/
--+Page.vue

// /orders/+Page.vue
import logger from '../logger'

gives

|- Error: Failed to load url ../logger (resolved id: ../logger) in /Users/..../vike-dummy-app/orders/+Page.vue. Does the file exist?```


If I change this to the following, it **works in dev**, but then the `build` fails

/logger/
-- index.ts
-- index.server.ts
/orders/
--+Page.vue

/logger/index.ts
const logger = console.log
export default isClient() ? logger : await import('./index.server')

// /orders/+Page.vue
import logger from '../logger'

build error:

[commonjs--resolver] [vike][Wrong Usage] Server-only module /logger/index.server.ts (https://vike.dev/file-env) imported on the client-side by /logger/index.ts.

So I can definitely see that the framework is preventing server code being included in the clientside bundle, but what I'm struggling to understand is how are we supposed to ensure that we don't import that code in the first place?


Please can you improve the docs to include examples of how to import code depending on whether code is running on the server vs client? 

I'm also happy to send a PR for the updated the docs based on answers to this Q :)

[brillout]

If you don't use vike-vue, then the usual way to initialize things is at onRenderHtml() and onRenderClient() since they're executed for every page.

If you use vike-vue, then you can use meta. (Using meta isn't trivial and that's why we're working on #1468 and #962.)

Also relevant:

• New hook onLog() #1438
• https://vike.dev/errors

Let us know if meta works out for you. We're happy to revisit prioritization if you run into any blockers.

And, yes, improved documentation is very much on the radar.