From 35041195b7c984ea60af76e2af2e802c34ac4490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=BA=9A=E7=90=AA?= <wangyaqi988@163.com>
Date: Fri, 31 May 2024 19:31:54 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0ssr=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/web/README.md |   2 +-
 docs/web/ssr.md    | 248 +++++++++++++++++++++++----------------------
 2 files changed, 126 insertions(+), 124 deletions(-)

diff --git a/docs/web/README.md b/docs/web/README.md
index 53e2491d..757666b0 100644
--- a/docs/web/README.md
+++ b/docs/web/README.md
@@ -187,7 +187,7 @@ uni相关的异步api在web端不传回调时会返回promise（详情参考：[
 - [x] 国际化
 - [x] 地图
 - [x] uni-push2.0
-- [ ] 服务端渲染
+- [x] 服务端渲染 新增于HBuilderX 4.18
 - [ ] [接口Promise化](https://uniapp.dcloud.net.cn/api/#api-promise-%E5%8C%96)
 
 ## 运行与发行
diff --git a/docs/web/ssr.md b/docs/web/ssr.md
index 86aab887..e73763ef 100644
--- a/docs/web/ssr.md
+++ b/docs/web/ssr.md
@@ -1,5 +1,7 @@
 ## 使用ssr
 
+> 新增于 HBuilderX 4.18
+
 uni-app 默认情况下，是在客户端中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
 
 服务器渲染的 uni-app 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
@@ -42,33 +44,33 @@ export default defineConfig({
 **示例**
 
 ```ts
-<template>
-  <text v-if="item">{{ item.title }}</text>
-  <text v-else>...</text>
-</template>
-
-<script>
-  const id = 1;// 模拟ID
-  export default {
-    computed: {
-      item() {
-        return this.$store.state.items[id]
-      }
-    },
-    mounted() { // 仅客户端执行的生命周期
-      if (!this.item) { // 判断服务端是否已正常获取，若未获取，重新调用加载数据
-        this.fetchItem()
-      }
-    },
-    async serverPrefetch() { // 服务端预取数据的生命周期
-      await this.fetchItem()
-    },
-    methods: {
-      fetchItem() {
-        return this.$store.dispatch('fetchItem', id)
-      }
-    }
-  }
+<template>
+  <text v-if="item">{{ item.title }}</text>
+  <text v-else>...</text>
+</template>
+
+<script>
+  const id = 1;// 模拟ID
+  export default {
+    computed: {
+      item() {
+        return this.$store.state.items[id]
+      }
+    },
+    mounted() { // 仅客户端执行的生命周期
+      if (!this.item) { // 判断服务端是否已正常获取，若未获取，重新调用加载数据
+        this.fetchItem()
+      }
+    },
+    async serverPrefetch() { // 服务端预取数据的生命周期
+      await this.fetchItem()
+    },
+    methods: {
+      fetchItem() {
+        return this.$store.dispatch('fetchItem', id)
+      }
+    }
+  }
 </script>
 ```
 
@@ -77,7 +79,7 @@ export default defineConfig({
 对于简单的需要云端客户端保持一致的数据可以使用uni-app提供的ssrRef及shallowSsrRef实现
 
 ```ts
-const categories = ssrRef(['c1', 'c2'], 'categories');
+const categories = ssrRef(['c1', 'c2'], 'categories');
 export default {
   data() {
     return {
@@ -94,100 +96,100 @@ export default {
 **main.uts**
 
 ```ts
-import { createSSRApp } from 'vue'
-import App from './App.uvue'
-import createStore from './store'
-export function createApp() {
-  const app = createSSRApp(App)
-
-  const store = createStore() // 创建 store
-  app.use(store)
-
-  return {
-    app,
-    store,// 必须返回 store
-  }
+import { createSSRApp } from 'vue'
+import App from './App.uvue'
+import createStore from './store'
+export function createApp() {
+  const app = createSSRApp(App)
+
+  const store = createStore() // 创建 store
+  app.use(store)
+
+  return {
+    app,
+    store,// 必须返回 store
+  }
 }
 ```
 
 **store/index.uts**
 
 ```ts
-import { createStore } from 'vuex'
-
-// 模拟接口获取数据
-function fetchItem(id) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        id,
-        title: 'title' + id,
-      })
-    }, 300)
-  })
-}
-
-export default () => {
-  return createStore({
-    state() {
-      return {
-        items: {},
-      }
-    },
-    actions: {
-      fetchItem({ commit }, id) {
-        return fetchItem(id).then((item) => {
-          commit('setItem', { id, item })
-        })
-      },
-    },
-    mutations: {
-      setItem(state, { id, item }) {
-        state.items[id] = item
-      },
-    },
-  })
+import { createStore } from 'vuex'
+
+// 模拟接口获取数据
+function fetchItem(id) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        id,
+        title: 'title' + id,
+      })
+    }, 300)
+  })
+}
+
+export default () => {
+  return createStore({
+    state() {
+      return {
+        items: {},
+      }
+    },
+    actions: {
+      fetchItem({ commit }, id) {
+        return fetchItem(id).then((item) => {
+          commit('setItem', { id, item })
+        })
+      },
+    },
+    mutations: {
+      setItem(state, { id, item }) {
+        state.items[id] = item
+      },
+    },
+  })
 }
 ```
 
 **pages/index/index.uvue**
 
 ```vue
-<template>
-  <text v-if="item">{{ item.title }}</text>
+<template>
+  <text v-if="item">{{ item.title }}</text>
   <text v-else>...</text>
-  <text>{{ JSON.stringify(categories) }}</text>
-</template>
-
+  <text>{{ JSON.stringify(categories) }}</text>
+</template>
+
 <script>
   import { ssrRef } from '@dcloudio/uni-app'
-  const categories = ssrRef(['c1', 'c2'], 'categories');
-  const id = 1;// 模拟ID
+  const categories = ssrRef(['c1', 'c2'], 'categories');
+  const id = 1;// 模拟ID
   export default {
     data() {
       return {
         categories
       }
-    },
-    computed: {
-      item() {
-        return this.$store.state.items[id]
-      }
-    },
-    mounted() { // 仅客户端执行的生命周期
-      if (!this.item) { // 判断服务端是否已正常获取，若未获取，重新调用加载数据
-        this.fetchItem()
-      }
-    },
-    async serverPrefetch() { // 服务端预取数据的生命周期
-      await this.fetchItem()
-    },
-    methods: {
-      fetchItem() {
-        return this.$store.dispatch('fetchItem', id)
-      }
-    }
-  }
+    },
+    computed: {
+      item() {
+        return this.$store.state.items[id]
+      }
+    },
+    mounted() { // 仅客户端执行的生命周期
+      if (!this.item) { // 判断服务端是否已正常获取，若未获取，重新调用加载数据
+        this.fetchItem()
+      }
+    },
+    async serverPrefetch() { // 服务端预取数据的生命周期
+      await this.fetchItem()
+    },
+    methods: {
+      fetchItem() {
+        return this.$store.dispatch('fetchItem', id)
+      }
+    }
+  }
 </script>
 ```
 
@@ -201,7 +203,7 @@ uni-app-x内page-meta仅保留了存放head的功能，page-meta内的head节点
     <head>
       <meta name="keywords" content="uni-app ssr" />
     </head>
-  </page-meta>
+  </page-meta>
 </template>
 ```
 
@@ -210,26 +212,26 @@ uni-app-x内page-meta仅保留了存放head的功能，page-meta内的head节点
 使用此功能需要确保项目`index.html`内head下有head-meta注释。如下：
 
 ```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <script>
-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
-        CSS.supports('top: constant(a)'))
-      document.write(
-        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
-        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
-    </script>
-    <title></title>
-    <!--head-meta-->
-    <!--preload-links-->
-    <!--app-context-->
-  </head>
-  <body>
-    <div id="app"><!--app-html--></div>
-    <script type="module" src="/main"></script>
-  </body>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--head-meta-->
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main"></script>
+  </body>
 </html>
 ```
 
-- 
GitLab