From 380f203597a56e0f4e1b8ec21f399fd4d3d116c5 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 7 Apr 2021 14:13:39 +0200 Subject: [PATCH] docs: ssr with devalue --- docs/ssr/index.md | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/docs/ssr/index.md b/docs/ssr/index.md index 6f18e991..98e68c6e 100644 --- a/docs/ssr/index.md +++ b/docs/ssr/index.md @@ -69,22 +69,7 @@ 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. Example with [vite-ssr](https://github.com/frandiox/vite-ssr): - -```js -export default viteSSR(App, { routes }, ({ 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 - } -}) -``` - -To protect yourself from XSS attacks, you should also use the [`transformState`](https://github.com/frandiox/vite-ssr#state-serialization) option in vite-ssr. Here is an example using `@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. 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`: ```js import devalue from '@nuxt/devalue' @@ -98,12 +83,19 @@ export default viteSSR( }, }, ({ initialState }) => { - // same code as above... + // ... + 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 + } } ) ``` -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. +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**. 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 `