Description
I used a Vite plugin that allows using C language-style conditional compilation in the code.
The simplified code looks like this:
// v-ifdef SSR
import db from "./db"
// v-endif
export default function findProduct() {
// v-ifdef SSR
return db.findProduct()
// v-else
return fetch("/api/product/search").then(res => res.json())
// v-endif
}This allows different logic branches for SSR and CSR bundles.
During the build compilation, everything works fine. However, in dev mode, it seems that there is no separate compilation for SSR and CSR. The code received in the browser is from the SSR conditions, including the database connection code.
If I use import.meta.env.SSR, the build mode relies on tree shaking to achieve different code inclusion for SSR and CSR. In dev mode, it includes all the code and injects something like import.meta.env = {SSR: false} at the top of the CSR file to make the browser execute the CSR code path.
However, some third-party libraries can only be executed on the server and should not be bundled and sent to the browser. This is because these packages would throw errors in the browser environment.
here is a demo project: https://github.com/shjyh/astro-env-demo
I Want to generate a separate CSR bundle in dev mode with the same effect as in the build