docs: polish /env

Author: brillout

docs/pages/env/+Page.mdx

@@ -43,10 +43,11 @@ DATABASE_URL=postgresql://database.example.com:5432
 
 ## Access
 
-Use <ImportMeta prop="env"/> to access environment variables.
+Use <ImportMeta prop="env.SOME_ENV"/> to access environment variables.
 
 ```ts
 // /pages/movies/+data.ts
+// Environment: server
 
 import type { PageContextServer } from 'vike/types'
 
@@ -62,14 +63,13 @@ export async function data(pageContext: PageContextServer) {
 }
 ```
 
-> For server only code, you can access environment variables using [`process.env`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs), but we generally recommend against this because it won't be <Link href="#static-replacement">statically replaced</Link>.
+`import.meta.env.PUBLIC_ENV__*` variables are <Link href="#define">also available on the client-side</Link>:
 
 ```jsx
 // components/ContactUs.jsx
+// Environment: client
 
-// The UI component <ContactUs> is loaded on the client-side
-
-// This environment variable is available on the client-side: it's prefixed with PUBLIC_ENV__
+// This environment variable is available on the client because it's prefixed with PUBLIC_ENV__
 const email = import.meta.env.PUBLIC_ENV__CONTACT_EMAIL
 
 function ContactUs() {
@@ -81,12 +81,22 @@ function ContactUs() {
 > ```ts
 > // ✅ Works
 > import.meta.env.SOME_ENV
-> // ❌ Won't work
+> // ❌ Doesn't work
 > import.meta.env['SOME_ENV']
-> // ❌ Won't work
+> // ❌ Doesn't work
 > const { SOME_ENV } = import.meta.env
 > ```
 
+> For server-only code, you can access environment variables using [`process.env`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs), but we generally recommend `import.meta.env.SOME_ENV` instead because <Link href="#static-replacement">it's statically replaced for minimal bundle sizes</Link>.
+> ```ts
+> // ✅ Works, eveywhere and statically replaced (minimizing bundle sizes)
+> import.meta.env.SOME_ENV
+> // ⚠️ Works, but only on server-side and no static replacement
+> process.env.SOME_ENV
+> // ⚠️ Works, but only on server-side and no static replacement
+> const { SOME_ENV } = process.env
+> ```
+
 
 ## TypeScript
 
@@ -99,7 +109,9 @@ For improved DX, consider using [`zod`](https://github.com/colinhacks/zod), for
 
 ## Static replacement
 
-For better [tree shaking](https://rollupjs.org/introduction/#tree-shaking) (aka dead code elimination), `import.meta.env.SOME_ENV` is statically replaced with its value. For example:
+`import.meta.env.SOME_ENV` is statically replaced with its value at build time, enabling [tree shaking](https://rollupjs.org/introduction/#tree-shaking) (dead code elimination).
+
+For example:
 
 ```js
 // src/someFile.js [source code in your Git repository]
@@ -119,7 +131,7 @@ if (import.meta.env.DISABLE_TRACKING === 'true') {
 DISABLE_TRACKING='true'
 ```
 
-The file `src/someFile.js` is built to:
+After build, `src/someFile.js` becomes:
 
 ```js
 // dist/server/chunks/chunk-DdwTql6x.js [built code deployed to production]
@@ -128,14 +140,14 @@ console.log("value:", "true");
 console.log("Tracking is disabled");
 ```
 
-Note how `import()` is completely removed, resulting in a more lightweight production bundle.
+The `import()` call is completely removed, resulting in a more lightweight production bundle.
 
 
 ## Config files
 
 In config files, [<ImportMeta prop="env"/> isn't available](https://github.com/vikejs/vike/issues/1726#issuecomment-2208626928) (neither `vite.config.js` nor `+config.js`).
 
-Use [`process.env`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs) instead of <ImportMeta prop="env"/>.
+Use [`process.env`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs) instead.
 
 
 ## Public allowlist