docs: more accurate documentation around client-only hooks (#1600)

docs/pages/data/+Page.mdx

@@ -93,10 +93,14 @@ you can tell Vike to run `data()` also on the client-side. This will make Vike:
 
 > In general, we recommend running `data()` only on the server-side because it's easier to write code that runs only on the server-side.
 >
-> That said, for <Link href="/pre-rendering">SSG apps</Link> or if you want to minimize requests made to your server, then it can make sense to run `data()` on the client-side. See <Link href="/pageContext.json#avoid-pagecontext-json-requests" doNotInferSectionTitle noBreadcrumb />.
+> That said, if you want to minimize requests made to your server, then it can make sense to run `data()` on the client-side. See <Link href="/pageContext.json#avoid-pagecontext-json-requests" doNotInferSectionTitle noBreadcrumb />.
 
 You can also set `.client.js` instead of `.shared.js`: Vike will then always call `data()` on the client-side (never on the server-side).
 
+> For <Link href="/pre-rendering">pre-rendered pages (SSG)</Link>, the data fetched from the "server-side" is the static JSON file <Link href="/pageContext.json">`dist/client/some-page/index.pageContext.json`</Link> that was generated at build-time upon pre-rendering the page.
+>
+> If, for a pre-rendered page, you want to fetch data that is dynamically provided by a (Java/PHP/Ruby/JavaScript/...) server, then always call `data()` on the client-side (i.e. `+data.client.js`).
+
 > Alternatively, instead of using `.shared.js` and `.client.js`, you can modify the <Link href="/meta#example-modify-data-env">`meta.env` setting</Link> of the `data()` hook in a global fashion, removing the need to add `.shared.js` / `.client.js` to each of your `+data.js` files.
 
 

docs/pages/hooks/+Page.mdx

@@ -42,11 +42,15 @@ Potentially upcoming hooks:
 
 ## Order
 
-The order in which the hooks are called.
+The order in which the hooks are called:
+- <Link href="#with-default-environment-hooks" />, if you didn't change the environment of `data()` and `onBeforeRender()`.
+- <Link href="#with-client-side-hooks" />, if you <Link href="/data#environment">configured `data()`</Link> and <Link href="/onBeforeRender#environment">also `onBeforeRender()`</Link> to run only the client-side.
 
 > The following doesn't contain the hooks of the Vike extensions <UiFrameworkExtension name /> such as <Link href="/onAfterRenderHtml">`onAfterRenderHtml()`</Link> or <Link href="/onAfterRenderClient">`onAfterRenderClient()`</Link>.
 
-**First render:**
+### With default-environment hooks
+
+**First render**
 
 1. <TextEnv2>server</TextEnv2> <Link href="/renderPage">`renderPage()`</Link>
 1. <TextEnv2>server</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>
@@ -59,8 +63,7 @@ The order in which the hooks are called.
 1. <TextEnv2>client</TextEnv2> <Link href="/onRenderClient">`onRenderClient()`</Link>
 1. <TextEnv2>client</TextEnv2> <Link href="/onHydrationEnd">`onHydrationEnd()`</Link>
 
-<br/>
-**Page navigation:**
+**Page navigation**
 
 1. <TextEnv2>client</TextEnv2> <Link href="/onPageTransitionStart">`onPageTransitionStart()`</Link>
 1. <TextEnv2>client</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>
@@ -74,8 +77,22 @@ The order in which the hooks are called.
 1. <TextEnv2>client</TextEnv2> <Link href="/onRenderClient">`onRenderClient()`</Link>
 1. <TextEnv2>client</TextEnv2> <Link href="/onPageTransitionEnd">`onPageTransitionEnd()`</Link>
 
-<br/>
-**Page navigation, <Link href="/data#environment">with client-side data fetching</Link>:**
+### With client-side hooks
+
+**First render**
+
+1. <TextEnv2>server</TextEnv2> <Link href="/renderPage">`renderPage()`</Link>
+1. <TextEnv2>server</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>
+1. <TextEnv2>server</TextEnv2> <Link href="/routing">Routing</Link>
+   > The routing executes your <Link href="/route-function">Route Functions</Link> (of all your pages).
+1. <TextEnv2>server</TextEnv2> <Link href="/onRenderHtml">`onRenderHtml()`</Link>
+1. <TextEnv2>client</TextEnv2> <Link href="/guard">`guard()`</Link>
+1. <TextEnv2>client</TextEnv2> <Link href="/data">`data()`</Link>
+1. <TextEnv2>client</TextEnv2> <Link href="/onBeforeRender">`onBeforeRender()`</Link>
+1. <TextEnv2>client</TextEnv2> <Link href="/onRenderClient">`onRenderClient()`</Link>
+1. <TextEnv2>client</TextEnv2> <Link href="/onHydrationEnd">`onHydrationEnd()`</Link>
+
+**Page navigation**
 
 1. <TextEnv2>client</TextEnv2> <Link href="/onPageTransitionStart">`onPageTransitionStart()`</Link>
 1. <TextEnv2>client</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>