From: Simon <simon.toivo@gmail.com>
Date: Wed, 7 Jun 2023 09:54:21 +0000 (+0200)
Subject: docs: remove reference to ViteSSR (#2083)
X-Git-Tag: pinia@2.1.4~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=caeecf285880baae82a5e72daf3dd51265334fc0;p=thirdparty%2Fvuejs%2Fpinia.git

docs: remove reference to ViteSSR (#2083)

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>
---

diff --git a/packages/docs/ssr/index.md b/packages/docs/ssr/index.md
index a450522e..7cc389ff 100644
--- a/packages/docs/ssr/index.md
+++ b/packages/docs/ssr/index.md
@@ -16,7 +16,7 @@ const main = useMainStore()
 
 ## Using the store outside of `setup()`
 
-If you need to use the store somewhere else, you need to pass the `pinia` instance [that was passed to the app](#install-the-plugin) to the `useStore()` function call:
+If you need to use the store somewhere else, you need to pass the `pinia` instance [that was passed to the app](../getting-started.md#installation) to the `useStore()` function call:
 
 ```js
 const pinia = createPinia()
@@ -78,42 +78,21 @@ app.use(pinia)
 devalue(pinia.state.value)
 ```
 
-Depending on what you are using for SSR, you will set an _initial state_ variable that will be serialized in the HTML. You should also protect yourself from XSS attacks. For example, with [vite-ssr](https://github.com/frandiox/vite-ssr) you can use the [`transformState` option](https://github.com/frandiox/vite-ssr#state-serialization) and `@nuxt/devalue`:
+Depending on what you are using for SSR, you will set an _initial state_ variable that will be serialized in the HTML. You should also protect yourself from XSS attacks. You can use [other alternatives](https://github.com/nuxt-contrib/devalue#see-also) to `@nuxt/devalue` depending on what you need, e.g. if you can serialize and parse your state with `JSON.stringify()`/`JSON.parse()`, **you could improve your performance by a lot**.
 
-```js
-import devalue from '@nuxt/devalue'
-
-export default viteSSR(
-  App,
-  {
-    routes,
-    transformState(state) {
-      return import.meta.env.SSR ? devalue(state) : state
-    },
-  },
-  ({ initialState }) => {
-    // ...
-    if (import.meta.env.SSR) {
-      // this will be stringified and set to window.__INITIAL_STATE__
-      initialState.pinia = pinia.state.value
-    } else {
-      // on the client side, we restore the state
-      pinia.state.value = initialState.pinia
-    }
-  }
-)
-```
+If you are not using Nuxt you will need to handle the serialization and hydration of the state yourself. Here are some examples:
 
-You can use [other alternatives](https://github.com/nuxt-contrib/devalue#see-also) to `@nuxt/devalue` depending on what you need, e.g. if you can serialize and parse your state with `JSON.stringify()`/`JSON.parse()`, **you could improve your performance by a lot**.
+- [Vitesse template](https://github.com/antfu/vitesse/blob/main/src/modules/pinia.ts)
+- [vite-plugin-ssr](https://vite-plugin-ssr.com/pinia)
 
-Adapt this strategy to your environment. Make sure to hydrate pinia's state before calling any `useStore()` function on client side. For example, if we serialize the state into a `<script>` tag to make it accessible globally on client side through `window.__pinia`, we can write this:
+Adapt this strategy to your environment. **Make sure to hydrate pinia's state before calling any `useStore()` function** on client side. For example, if we serialize the state into a `<script>` tag to make it accessible globally on client side through `window.__pinia`, we can write this:
 
-```js
+```ts
 const pinia = createPinia()
 const app = createApp(App)
 app.use(pinia)
 
-// must be set by the user
+// `isClient` depends on the environment, e.g. on Nuxt it's `process.client`
 if (isClient) {
   pinia.state.value = JSON.parse(window.__pinia)
 }