Vue3 之 Pinia 服务端渲染 (SSR) （九）

Pinia SSR概述

Pinia是一个用于Vue.js的状态管理库，它支持服务端渲染(SSR)。在SSR中，页面在服务器端渲染成HTML字符串，然后发送到客户端，从而提升首屏加载速度和SEO优化。Pinia通过其设计使得在SSR环境下也能轻松使用和管理状态。

Pinia SSR特点

开箱即用：只要你在setup函数、getter和action的顶部调用useStore()函数，Pinia对于SSR就是开箱即用的。
数据预取：Pinia可以在服务器端预取数据，并保存在状态中，从而避免在客户端再次发起相同的请求。
安全性：在SSR中，需要确保根状态（rootState）被包含在HTML中的某个地方，并且应该被转义以保证安全性。

1. 创建Pinia Store
// store/main.js  
import { defineStore } from 'pinia'  
  
export const useMainStore = defineStore('main', {  
  state: () => ({  
    // 初始状态  
    message: 'Hello from SSR!'  
  }),  
  // getters, actions...  
})
2. 在服务器端使用Pinia
   假设你正在使用Node.js和Koa框架进行服务端渲染，你可以在中间件或路由处理函数中使用Pinia。
   // server.js  
const Koa = require('koa')  
const { createSSRApp, h } from 'vue'  
const { createPinia } = require('pinia')  
const { createRenderer } = require('vue-server-renderer')  
  
const app = new Koa()  
const pinia = createPinia()  
const ssrApp = createSSRApp({ /* ... */ })  
ssrApp.use(pinia)  
  
const renderer = createRenderer()  
  
app.use(async ctx => {  
  const mainStore = pinia.use(useMainStore)  
  // 在这里，你可以根据mainStore中的状态来生成HTML  
  const appContent = await renderer.renderToString(ssrApp)  
  ctx.body = `  
    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
      <!-- ... -->  
    </head>  
    <body>  
      <div id="app">${appContent}</div>  
      <!-- 将Pinia状态嵌入到HTML中以供客户端使用（可选） -->  
      <script>window.__INITIAL_STATE__ = ${JSON.stringify(mainStore.state)}</script>  
    </body>  
    </html>  
  `  
})  
  
app.listen(3000)

3. 在客户端使用Pinia
并在客户端通过 window.__pinia 全局访问它，我们可以这样写：
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

// 必须由用户设置
if (isClient) {
  pinia.state.value = JSON.parse(window.__pinia)
}