docs: update demo.md

zhangyuang · zhangyuang · Apr 25, 2021 · Apr 6, 2021 · Apr 6, 2021 · Apr 12, 2021
commit 53b4f4eee53db5c2550e594bbd92cd8dc2cd99fe
diff --git a/docs/web/components/layout/index.vue b/docs/web/components/layout/index.vue
@@ -6,6 +6,11 @@
       <meta charSet="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
       <meta name="theme-color" content="#000000">
+      <meta name="description" content="最小而美的服务端渲染应用骨架">
+      <link rel="icon" href="https://avatars1.githubusercontent.com/u/50347314?s=200&amp;v=4">
+      <meta name="keywords" itemprop="keywords" content="服务端渲染, React, Egg, Midway, Nestjs, Vue, VueSSR, SSR, ReactSSR">
+      <meta property="og:title" content="Vue, React, SSR 服务端渲染">
+      <meta property="og:description" content="Vue, React, SSR 服务端渲染">
       <title>ssr framework docs</title>
       <slot name="viteClient" />
       <!-- 用于通过配置插入自定义的 script 为了避免影响期望功能这块内容不做 escape，为了避免 xss 需要保证插入脚本代码的安全性  -->

diff --git a/docs/web/markdown/features/demo.md b/docs/web/markdown/features/demo.md
@@ -0,0 +1,62 @@
+# 在线案例
+
+本篇章将会展示使用本框架开发并部署的应用。包含传统 Node.js 形式部署的应用以及 Serverless 形式部署的应用。
+
+如果你发现你的应用也是以本框架进行开发，但这里没有列出来，欢迎提 [issue](https://github.com/ykfe/ssr/issues) 向我们反馈，我们会及时加入。
+
+<table>
+<tr>
+<td align="center"><a target="_blank" href="http://youku.com/"><img src="https://img.alicdn.com/tfs/TB17DTuXkH0gK0jSZPiXXavapXa-680-133.svg" width="100px;"/><br />
+ <sub><b>优酷视频
+</b></td>
+<td align="center"><a target="_blank" href="https://yulebao.alibaba.com/"><img src="https://gw.alicdn.com/tfs/TB1CmlIIFT7gK0jSZFpXXaTkpXa-190-46.png" width="100px;"/><br><sub><b>阿里影业娱乐宝
+</b></sub></a></td>
+<td align="center"><a target="_blank" href="https://campaign.vmate.com/vrbollywood"><img src="https://img.alicdn.com/tfs/TB17p6Vhbj1gK0jSZFOXXc7GpXa-512-512.png" width="100px;" alt="vmate 积分商城"/><br />
+  <a target="_blank" href="https://job.alibaba.com/zhaopin/position_detail.htm?trace=qrcode_share&positionCode=GP524819"><sub><b>Vmate短视频
+</b></a></td>
+<td align="center"><a target="_blank" href="https://enjoysales.paat.com/"><img src="https://img.alicdn.com/tfs/TB1Ma0BiEY1gK0jSZFMXXaWcVXa-836-836.png" width="100px;" alt="火炽星原CRM"/><br />
+<a target="_blank" href="https://enjoysales.paat.com/"><sub><b>火炽星原CRM
+</b></a></td>
+<td align="center"><a href="https://www.niuniuda.com/mall" target="_blank"><img src="https://img.alicdn.com/tfs/TB1df_8pBr0gK0jSZFnXXbRRXXa-160-60.png" width="100px;" alt="牛牛搭"/><br />
+<a href="https://www.niuniuda.com/mall" target="_blank"><sub><b>牛牛搭
+</b></a></td>
+<td align="center"><a href="https://help.seewo.com/" target="_blank"><img src="https://img.alicdn.com/tfs/TB11Xo3q4v1gK0jSZFFXXb0sXXa-350-55.png" width="100px;" alt="cvte"/><br /><a href="https://help.seewo.com/" target="_blank"><sub><b>希沃帮助中心
+</b></a></td>
+<td align="center"><a href="https://wecard.qq.com/index/" target="_blank"><img src="https://img.alicdn.com/tfs/TB1pTZGrFT7gK0jSZFpXXaTkpXa-164-164.jpg" width="100px;" alt="腾讯微卡"/><br />
+<a href="https://wecard.qq.com/index/" target="_blank"><sub><b>腾讯微卡
+</b></a></td>
+<td align="center"><a href="https://www.myweimai.com/#sectionOne" target="_blank"><img src="https://img.alicdn.com/tfs/TB16i3VrQT2gK0jSZPcXXcKkpXa-400-400.jpg" width="100px;" alt="微脉"/><br />
+<a href="https://www.myweimai.com/#sectionOne" target="_bvlank"><sub><b>微脉
+</b></a></td>
+</tr>
+<tr>
+<td align="center"><a href="https://syzs.qq.com/" target="_blank"><img src="https://res.wx.qq.com/op_res/X1jdQAm4Xihf8fBxzoibB3aX6w4n_Km5g1GZ-ZQavJ-4m10Z3-gw0cukUfRwTDePFi5NBCsY7XYBlnVaXwgT2g
+" width="100px;" alt="腾讯手游助手"/><br />
+<a href="https://syzs.qq.com/" target="_bvlank"><sub><b>腾讯手游助手
+</b></a></td>
+<td align="center"><a href="https://kcmall.b2bwings.com/home" target="_blank"><img src="https://img.alicdn.com/imgextra/i1/O1CN01P7CAop1h7qQ3noefa_!!6000000004231-2-tps-211-79.png" width="100px;" alt="国家现代农业科技创新中心"/><br />
+<a href="https://kcmall.b2bwings.com/home" target="_bvlank"><sub><b>国家现代农业科技创新中心
+</b></a></td>
+<td align="center"><a target="_blank" href="http://ssr-fc.com/"><img src="https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png" width="100px;"/><br><sub><b>部署于阿里云示例应用
+</b></sub></a></td>
+<td align="center"><a target="_blank" href="http://tx.ssr-fc.com/"><img src="http://s0.60logo.com/uploads/items/images/soft/180126/tengxunyun.svg" width="100px;"/><br><sub><b>部署于腾讯云示例应用
+</b></sub></a></td>
+<td align="center"><a href="https://www.gszq.com/" target="_blank"><img src="https://www.gszq.com/static/media/icon-slogan.4d1c7974.png
+" width="100px;" alt="国盛证券"/><br />
+<a href="https://www.gszq.com/" target="_bvlank"><sub><b>国盛证券
+</b></a></td>
+</tr>
+</table>
+
+## 默认示例
+
+事实上本篇文档即是用本框架进行开发以及 Serverless 的能力进行部署。下面展示默认示例部署的在线链接，支持 `服务端渲染/客户端渲染` 两种访问模式
+
+- http://ssr-fc.com/ 部署到阿里云的 React SSR 应用
+- http://ssr-fc.com?csr=true 部署到阿里云的 React SSR 应用, 以 CSR 模式访问
+- http://tx.ssr-fc.com 部署到腾讯云的 React SSR 应用
+- http://tx.ssr-fc.com?csr=true 部署到腾讯云的 React SSR 应用, 以 CSR 模式访问
+- http://vue.ssr-fc.com 部署到阿里云的 Vue SSR 应用
+- http://vue3.ssr-fc.com 部署到阿里云的 Vue3 SSR 应用
+- http://vue.ssr-fc.com?csr=true 部署到阿里云的 Vue SSR 应用, 以 CSR 模式访问
+- http://vue3.ssr-fc.com?csr=true 部署到阿里云的 Vue3 SSR 应用, 以 CSR 模式访问
diff --git a/docs/web/markdown/features/started.md b/docs/web/markdown/features/started.md
@@ -0,0 +1,63 @@
+# 快速开始
+
+本篇章将介绍如何快速的在本地创建一个基于 `ssr` 框架的项目。由于我们是基于插件化的架构，所以我们能够支持任意前端框架与任意服务端框架的组合。目前官方提供了前端框架 `React`， `Vue2`， `Vue3`与服务端框架 [Midway.js](https://midwayjs.org/) [Nest.js](https://nestjs.com/) 的默认集成示例让大家迅速创建。
+
+如果你想使用其他的服务端框架例如[daruk.js](https://github.com/darukjs/daruk) 等。那么你可以参考默认的服务端框架插件[示例](./features$plugin)来迅速的编写一个服务端插件。这是非常简单的一件事情。因为我们的服务端插件没有任何额外逻辑。
+
+
+## create-ssr-app
+
+我们提供了 [create-ssr-app](https://github.com/zhangyuang/create-ssr-app) 脚手架来让用户可以迅速的创建不同类型的应用。
+
+目前官方提供了以下类型的模版给开发者直接使用。用户可根据自己的实际技术栈选择不同的模版进行开发。
+
+虽然技术栈不同但开发思想是一致的，在任何技术栈的组合中我们的开发命令, 构建命令以及渲染原理都是完全一致的
+
+注意: 如果你想使用 `Serverless` 的能力来迅速发布你的应用，那么你应该选择基于 `Midway.js` 的模版应用。关于 `Serverless` 开发更加详细的介绍可以阅读[Serverless](./features$serverless) 章节。
+
+- [midway-react-ssr](https://github.com/ykfe/ssr/tree/dev/example/midway-react-ssr)
+- [midway-vue-ssr](https://github.com/ykfe/ssr/tree/dev/example/midway-vue-ssr)
+- [midway-vue3-ssr](https://github.com/ykfe/ssr/tree/dev/example/midway-vue3-ssr) 
+- [nestjs-react-ssr](https://github.com/ykfe/ssr/tree/dev/example/nestjs-react-ssr)
+- [nestjs-vue-ssr](https://github.com/ykfe/ssr/tree/dev/example/nestjs-vue-ssr)
+- [nestjs-vue3-ssr](https://github.com/ykfe/ssr/tree/dev/example/nestjs-vue3-ssr)  
+
+### 命令行创建项目 
+
+通过 `npm init` 命令我们可以创建上述的任意模版
+
+```bash
+$ npm init ssr-app my-ssr-project --template=midway-vue3-ssr # 这里可以选择上述任意模版
+$ cd my-ssr-project && npm i
+$ npm start # 启动服务，等价于 npx ssr start
+$ npm build # 资源构建，等价于 npx ssr build
+$ npm run start:vite # 以 Vite 模式启动，等价于 npx ssr start --vite
+```
+
+注意: 当 `Node.js version >=15` 或者 `npm version >= 7` 时，应使用 `npm init ssr-app my-ssr-project -- --template=midway-react-ssr` 来正确的传递参数
+
+## 应用部署
+
+我们提供了传统 Node.js 应用部署以及 Serverless 形式部署两种方式。
+
+当你选择了基于 `Midway.js` 的模版后，我们额外提供了 `ssr deploy` 命令来将你的应用迅速发布到阿里云或者腾讯云。需要了解详细的发布流程可以阅读[应用部署](./features$deploy)章节
+
+
+### Serverless 部署
+
+以 Serverless 形式迅速发布应用
+
+```bash
+$ npm run deploy # 应用发布, 等价于 npx ssr deploy
+$ npm run deploy:tencent # 发布到腾讯云 等价于 npx ssr deploy --tencent
+```
+
+### 传统 Node.js 应用形式部署
+
+在 `Midway.js` 场景下我们使用 [egg-scripts](https://eggjs.org/zh-cn/core/deployment.html) 进行部署
+
+在 `Nest.js` 场景下我们使用 [pm2](https://pm2.keymetrics.io/) 进行部署
+
+```bash
+$ npm run prod 
+```
diff --git a/docs/web/markdown/why.md b/docs/web/markdown/why.md
@@ -14,14 +14,22 @@
 </div>
 <br />
 
-`ssr` 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。
+[ssr](https://github.com/ykfe/ssr) 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。
 
 此框架脱胎于 [egg-react-ssr](https://github.com/ykfe/egg-react-ssr) 项目和 `ssr` v4.3版本（midway-faas + react ssr），在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，并且我们专注于提升 Serverless 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。
 
 在最新的 v5.0 版本中，同时支持 `React` 以及 `Vue2`, `Vue3` 作为服务端渲染框架。在构建工具方面我们同样支持了最流行的 [Vite](https://cn.vitejs.dev/guide/why.html) 来提升应用的启动速度和 HMR 速度，且提供一键以 Serverless 的形式发布上云的功能。  
 
 此框架已经在腾讯微信内部作为官方 Node.js + 前端 的解决方案使用。我们可以非常有自信说它是`地球上最先进的ssr框架`。如果你希望获得开箱即用的体验且能够一键部署上云，请选择 `ssr` 框架。
 
+## Features
+
+- 🌱　极易定制：前端支持 React/Vue2/Vue3 等现代Web框架；
+- 🚀　开箱即用：内置 10+ 脚手架配套扩展，如Antd、Vant、TS、Hooks等；
+- 🧲　插件驱动：基于插件架构，用户更加专注于业务逻辑；
+- 💯　Serverless优先：一键发布到各种Serverless平台，也支持传统Web Server，比如Egg、Midway、Nest等。
+- 🛡　高可用场景，可无缝从SSR降级到CSR，最佳容灾方案。
+- 😄　功能丰富，构建工具支持 Webpack/Vite
 
 ## 已实现的功能
 
@@ -98,12 +106,12 @@
 
 ## 方案对比
 
-与 Next.js/Nuxt.js 等框架的对比，详细的代码层面技术细节对比可以查看本人在2020年 [Node.js party 上所做的分享](https://github.com/zhangyuang/2020-NodeParty-PPT)，从以下 9 个技术细节方面与 Next/Nuxt/Easy-team 等等框架的做法进行对比。  
-相比于此 PPT 介绍的 2020 年的版本，我们最新的版本在此基础之上又做了许多优化。包括插件化的改造以及支持 Vite，优化渲染逻辑等等。相比于 Next/Nuxt 的一堆 `issue`， 当你深度使用本框架时你会发现你几乎不会遇到什么问题。
+与 `Next.js/Nuxt.js` 等框架的对比，详细的代码层面技术细节对比可以查看本人在2020年 [Node.js party 上所做的分享](https://github.com/zhangyuang/2020-NodeParty-PPT)，从以下 9 个技术细节方面与 Next/Nuxt/Easy-team 等等框架的做法进行对比。  
+相比于此 PPT 介绍的 2020 年的版本，我们最新的版本在此基础之上又做了许多优化。包括插件化的改造以及支持 `Vite`，优化渲染逻辑等等。相比于 Next/Nuxt 的一堆 [issue](https://github.com/vercel/next.js/issues)， 当你深度使用本框架时你会发现你几乎不会遇到什么问题。
 
 以下简单介绍一下比较显著的优点
 
-- 优先考虑 Serverless，我们为应用在 Serverless 场景使用做了诸多优化包括内置发布命令一键发布到多个平台，以及对 Serverless 场景下的代码包大小优化，事实上本文档的源代码便是直接用本框架进行开发以及部署的
+- 优先考虑 `Serverless`，我们为应用在 `Serverless` 场景使用做了诸多优化包括内置发布命令一键发布到多个平台，以及对 `Serverless` 场景下的代码包大小优化，事实上本文档的源代码便是直接用本框架进行开发以及部署的
 - 轻量，核心源代码 2400 行 vs Next.js 18w 行 vs Nuxt.js 2w行，简洁的核心代码意味着更少的黑盒以及更少的性能损耗，事实上我们的性能等于直接调用框架提供的原生 API 无任何中间层
 - 最轻量级的方式支持 [Vite](./features$vite)
 - 没有恶心的 `.next`, `.nuxt` 这种隐藏文件夹包含着几万行通过 `模版渲染/Webpack` 打包出来的可读性极差的代码，当你的应用出错时，你几乎无法从这些隐藏文件中获得任何有效信息
@@ -117,4 +125,4 @@
 
 ## 总结
 
-个人看法来说，我并不喜欢 `Next/Nuxt` 等设计理念高度 template 化的框架。除了具有除了巨无霸级别的源码以及极度黑盒的内部运行机制以外。在性能以及扩展性方面都是灾难性的。例如想要接入 `Vite`，或者做渲染降级在这些框架上都是非常困难的一件事。举个例子一个非常简单的需求我需要不同的页面渲染不同的 `meta` 标签以及 `title` 等信息，在大部分情况下都需要配合使用 [react-helmet](https://www.npmjs.com/package/react-helmet) 这些库来完成。而仅仅这个库的复杂度本身就比整个 `ssr` 框架的复杂度都要高。而在 `ssr` 框架，要完成这个逻辑是非常简单的无需使用任何第三方模块。
+个人看法来说，我并不喜欢 `Next/Nuxt` 等设计理念高度 template 化的框架。虽然要做好一个优秀的 SSR 框架非常不容易有许多细致的点需要关注，但我仍然认为它们把这件事情做的过于复杂了。除了具有除了巨无霸级别的源码以及极度黑盒的内部运行机制以外。在性能以及扩展性方面都是灾难性的。例如想要接入 `Vite`，或者做渲染降级在这些框架上都是非常困难的一件事。举个例子一个非常简单的需求我需要不同的页面渲染不同的 `meta` 标签以及 `title` 等信息，在大部分情况下都需要配合使用 [react-helmet](https://www.npmjs.com/package/react-helmet) 或者 `next/head` 这些库来完成。而仅仅这些库的复杂度本身就比整个 `ssr` 框架的复杂度都要高。而在 `ssr` 框架，要完成这个逻辑是非常简单的无需使用任何第三方模块。同样在整个 `ssr` 框架的实现过程，我们没有新造任何轮子。任何功能的实现都是基于社区已有的非常优秀的模块来实现。继续阅读下文你会得到更加详细的了解。
diff --git a/docs/web/pages/docs/config.ts b/docs/web/pages/docs/config.ts
@@ -7,21 +7,25 @@ export default [
     title: '指引',
     routes: [
       { title: '快速开始', path: 'features$started' },
-      { title: '插件机制 ', path: 'features$plugin' },
-      { title: '约定式路由', path: 'features$feRoutes' },
+      { title: '在线案例', path: 'features$demo' },
+      { title: 'Serverless', path: 'features$serverless' },
+      { title: '目录结构', path: 'features$structure' },
       { title: '本地开发 ', path: 'features$develop' },
+      { title: '约定式路由', path: 'features$feRoutes' },
       { title: '数据获取 ', path: 'features$fetch' },
       { title: '组件通信 ', path: 'features$communication' },
       { title: '使用Vite ', path: 'features$vite' },
+      { title: '插件机制 ', path: 'features$plugin' },
       { title: '应用部署 ', path: 'features$deploy' },
       { title: '渲染降级', path: 'features$csr' },
-      { title: 'FAQ', path: 'features$faq' }
+      { title: 'FAQ', path: 'features$faq' },
+      { title: '问题反馈', path: 'features$issue' }
     ]
   },
   {
     title: 'API',
     routes: [
-      
+
     ]
   }
 ]