zhangyuang / ssr

A most advanced ssr framework support React17/React18/Vue2/Vue3 on Earth that implemented serverless-side render specification.

简体中文 ｜ English

SSR

A most advanced ssr framework on Earth that implemented serverless-side render specification for faas and traditional web server.

ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。了解什么是服务端渲染请查看文档

此框架脱胎于 egg-react-ssr 项目和 ssr v4版本（midway-faas + react ssr），在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，并且我们专注于提升 Serverless 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。

在最新的版本中，同时支持 React17/18 和 Vue2/Vue3 作为服务端渲染框架且开发工具侧我们同样支持了最流行的 Vite 来提升应用的启动速度和 HMR 速度，且提供一键以 Serverless 的形式发布上云的功能。我们可以非常有自信说它是地球上最先进的 ssr 框架。如果你希望获得开箱即用的体验且能够一键部署上云，请选择 ssr 框架。

阅读我们的 官方文档 获得更加详细的了解。事实上文档本身便是用 ssr 框架开发并通过 Serverless 部署到阿里云服务

什么情况下你应该选择 ssr 框架

• 需要在 Node.js 与前端框架结合的场景使用，与其他纯前端的框架不同 ssr 框架是专为服务端渲染场景或者 Node.js 与前端结合的场景打造的框架
• 需要一个开箱即用的服务端渲染能力，不需要手动去组合不同的前端框架与服务端框架之间的联系
• 需要框架层面的渲染降级能力，在服务端渲染出错时自动降级到客户端渲染
• 需要一个配置简单逻辑清晰的框架， ssr 框架的渲染逻辑和应用构建逻辑是同类型框架中最清晰的
• 可能会改动技术栈，如从 Vue2 升级为 Vue3，从 Vue3 降级为 Vue2 或 React/Vue 互相切换
• 需要在服务端渲染场景下开箱即用使用 antd vant 等流行 ui 库
• 需要能够同时支持 Webpack, Vite 两种开发工具，以便同时得到快速的启动速度 HMR 速度以及稳定的生产环境代码
• 需要在 Vue3 SSR 使用 pinia 作为数据管理方案
• 只是单纯的需要一个更快更好用的 cra 或 vue-cli, ssr 框架在纯 csr 场景的支持也十分优秀

哪些应用在使用

正在使用这个项目的公司(应用), 如果您正在使用但名单中没有列出来的话请提 issue，欢迎推广分享，我们将随时提供技术支持

优酷视频	微信公众平台	腾讯体育	QQ会员	腾讯视频	牛牛搭	国盛证券	三易科技	腾讯微卡
腾讯手游助手	国家现代农业科技创新中心	部署于阿里云示例应用	部署于腾讯云示例应用	100教育	个人博客	得物	微脉	行动教育
HappyPC	HappyMobile	阿里影业娱乐宝	Vmate短视频	火炽星原CRM	拍信创意	极速二维码	希沃帮助中心	经传多赢股票网
中商全球图书采选平台

Features

• 🌱　极易定制：前端支持 React17/React18/Vue2/Vue3 等现代Web框架；
• 🚀　开箱即用：内置 10+ 脚手架配套扩展，如 Pinia、antd、vant、TypeScript、Hooks等；
• 🧲　插件驱动：基于插件架构，用户更加专注于业务逻辑；
• 💯　Serverless优先：一键发布到各种Serverless平台，也支持传统Web Server，比如Egg、Midway、Nest等。
• 🛡　高可用场景，可无缝从SSR降级到CSR，最佳容灾方案。
• 😄　功能丰富，构建工具同时支持 Webpack/Vite，支持四种渲染模式 SSR|CSR|SSG|Html
• ✨ 支持 bun 作为 js runtime

已实现的功能

🚀 表示已经实现的功能

里程碑	状态
支持任意服务端框架与任意前端框架的组合使用。(Serverless/Midway/NestJS) + (React17/React18/Vue2/Vue3)	🚀
最丝滑的 vite 支持	🚀
最小而美的实现服务端渲染功能	🚀
支持预渲染能力	🚀
针对Serverless 场景对代码包的大小的严格限制，将生产环境的代码包大小做到极致	🚀
同时支持约定式前端路由和声明式前端路由	🚀
摒弃传统模版引擎，所有页面元素统一使用前端组件作为 DSL	🚀
同时支持四种渲染模式，提供服务端渲染一键降级为客户端渲染的能力	🚀
统一不同框架服务端客户端的数据获取方式，做到高度复用	🚀
类型友好，全面拥抱 TS	🚀
支持无缝接入 antd vant 无需修改任何配置	🚀
支持使用 less 作为 css 预处理器	🚀
微前端场景下无缝使用	🚀
支持使用 context 或 valtio 实现极简的数据管理方案，摒弃传统的 redux/dva 等数据管理方案	🚀
Vue3 场景提供 Pinia 以及 Provide/Inject 代替 Vuex 进行跨组件通信	🚀
支持在阿里云 云平台创建使用	🚀
ssr deploy 一键部署到阿里云平台	🚀
ssr deploy --tencent 无需修改任何配置一键部署到腾讯云平台	🚀

方案对比

为什么要选择 ssr 框架以及与同类型框架的方案对比请查看文档

快速开始

我们提供了 create-ssr-app 脚手架来让用户可以迅速的创建不同类型的应用。

目前官方提供了以下类型的模版给开发者直接使用。用户可根据自己的实际技术栈选择不同的模版进行开发。

虽然技术栈不同但开发**是一致的，在任何技术栈的组合中我们的开发命令, 构建命令以及渲染原理都是完全一致的

注意: 在 Midway.js Nest.js 场景下我们都已实现了一键部署到 Serverless 平台的能力。但底层实现略有差异。更加详细的介绍可以阅读 Serverless 章节。如需要大量使用 Serverless 平台提供的能力，我们建议创建 Midway.js 类型的应用。强烈建议阅读我们的 官方文档 来获得更加详细的了解

• nestjs-react-ssr
• nestjs-react18-ssr
• nestjs-vue-ssr
• nestjs-vue3-ssr
• nestjs-vue3-ssr-pinia
• midway-react-ssr
• midway-react18-ssr
• midway-vue-ssr
• midway-vue3-ssr

开发者可根据实际技术栈需要创建不同类型的应用快速开始

创建项目

通过 npm init 命令我们可以创建上述的任意模版

$ npm init ssr-app my-ssr-project
$ cd my-ssr-project
$ yarn # 建议使用 yarn, 也可以 npm install
$ yarn start
$ open http://localhost:3000 # 访问应用
$ yarn build # 资源构建，等价于 npx ssr build
$ yarn start:vite # 以 vite 模式启动，等价于 npx ssr start --vite

线上案例

通过访问以下链接来预览该框架通过 Serverless 一键部署到阿里云/腾讯云服务的应用详情。 通过使用 queryParams csr=true 来让 SSR 服务端渲染模式一键降级为 CSR 客户端渲染模式，也可以通过 config.js 来进行配置。

• 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 模式访问

生态系统

Project	Status	Description
ssr		cli for ssr framework
ssr-core		core render for all framwork
ssr-plugin-midway		provide start and build fetature by [email protected]
ssr-plugin-nestjs		provide start and build feature by NestJS
ssr-plugin-react		develop react application only be used in development
ssr-plugin-vue		develop vue2 application only be used in development
ssr-plugin-vue3		develop vue3 application only be used in development
ssr-common-utils		common utils in Node.js environment and browser
ssr-hoc-react		provide hoc component for react
ssr-hoc-vue3		provide hoc component for vue3
ssr-types		provide common types
ssr-webpack		start local server and build production bundle by webpack

CONTRIBUTING

如果你想为本应用贡献代码，请阅读贡献文档，我们为你准备了丰富的脚本用于 bootstrap

License

MIT

答疑群

虽然我们已经尽力检查了一遍应用，但仍有可能有疏漏的地方，如果你在使用过程中发现任何问题或者建议，欢迎提issue或者PR

注: 由于微信交流群人数限制，进群请添加私人二维码并备注进入 ssr 交流群，由于是私人微信，拉群后将会自行删除好友，敬请谅解。我们更加鼓励通过 issue 和 discussion 来交流问题

项目捐赠

如果本项目能够对你有所帮助，希望得到来自于你的捐赠 ☕️ 为开源社区做一份贡献

代码行数

$ cloc packages --include-ext=ts
     993 text files.
     679 unique files.
     829 files ignored.

github.com/AlDanial/cloc v 1.90  T=0.62 s (264.7 files/s, 9026.5 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
TypeScript                     164            471            195           4927
-------------------------------------------------------------------------------
SUM:                           164            471            195           4927
-------------------------------------------------------------------------------

前端开发手册

如何打造舒适高效的前端开发环境

项目 Star 数增长趋势

ssr's Issues

chore: 修改约定式路由生成文件的存放位置

ssr-temporary-router 放在 node_modules 在 vite 模式下会被浏览器缓存。打算将它移到 build 目录下并使用别名导入

接入微软fluentUI组件库问题

提问前请确认以下几点信息，否则你的问题将不会被解答

• 参考 https://zhuanlan.zhihu.com/p/25795393 学会正确的提问方式
• 确定已经阅读过文档 http://doc.ssr-fc.com/ 并且文档中搜索不到相关答案
• 对应服务端框架的使用问题请去它们的官方文档找答案。例如 Midway, Nest.js
• 如果你确认当前是一个 bug 请给最简复现仓库。只有一张图或者信息不足的问题将会被直接关闭
• 原则上这里只解答与本框架有关的问题。关于其他问题例如 Node.js 怎么连 Mysql 怎么获取 cookie 这种基础问题你应该去 google找答案而不是在这里。

详细描述你的问题

希望在框架里引入 https://developer.microsoft.com/ja-jp/fluentui#/， 但是在引用后，会有错误，具体来讲，我在app.ts文件里

设置fluentUI的ssr flag，然后成功渲染，但是当我f5刷新时，报

期望的结果

能够成功在ssr中渲染响应组件

当前使用的版本

你本人对问题可能的原因判断(如果你能大概判断的话)

Does the naming order of the files in the pages folder affect the order of route matching?

When I register a /request controller, the dynamic page of /:shopname will be rendered earlier, and I register a /list to be visited first.

增加node代理前端请求

我试图尝试如下配置：
httpProxy: {
enable: true,
package: "egg-http-proxy",
},

config.httpProxy = {
"/api": {
target: "https://xxx.cn",
pathRewrite: { "^/api": "" },
changeOrigin: true,
logLevel: "debug",
},
};

前端请求地址/api/a/b，想代理到https://xxx.cn/a/b，但最终看到的是404。能否给一个代理配置的example

feat：是否支持 SSG

SSG 就是静态渲染，也就是预渲染。构建时生成页面 html 源码。优势就是 ssr 带来的优势只是不需要 Node.js 环境。缺点是只能渲染简单的静态界面
比较常用的场景是在纯静态展示页面例如官网博客等场景。

个人对是否支持 SSG 存观望态度。我认为这是一个伪需求

1、ssg 场景非常少
2、ssg 功能上完全可以被 ssr 代替
3、ssg 的构建时间略长
4、serverless 场景下拥有一个 Node.js 环境是非常容易的事情。不需要像以前一样手动购买服务器搭建环境。
5、ssg 会让数据 fetch 规范变得稍微复杂一点。ssg 场景下的 fetch 与 ssr 场景下的 fetch 不一定能共用一个方法。
6、如果开发者只是需要一个 html 文件用来做降级的话。那应该直接使用 http://doc.ssr-fc.com/docs/features$csr#%E7%8B%AC%E7%AB%8B%20html%20%E6%96%87%E4%BB%B6%E9%83%A8%E7%BD%B2

新增本地proxy能力

本地接口代理服务，两种解决方案
1、直接用webpack-dev-server的proxy。但是需要在faas本地开发的koa服务中用koa-proxy将对应的path映射到webpack-dev-server的服务
2、直接用koa-proxy，但配置相比于webpack-dev-server稍显复杂

ERR_REQUIRE_ESM

报错信息 Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/wanglei/Documents/Projects/ssr-test/node_modules/@[email protected]@@babel/runtime/helpers/esm/arrayWithHoles.js
require() of ES modules is not supported.
require() of /Users/wanglei/Documents/Projects/ssr-test/node_modules/@[email protected]@@babel/runtime/helpers/esm/arrayWithHoles.js from /Users/wanglei/Documents/Projects/ssr-test/build/index/server/Page.server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename arrayWithHoles.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/wanglei/Documents/Projects/ssr-test/node_modules/_@[email protected]@@babel/runtime/helpers/esm/package.json.

复现方法 https://github.com/ykfe/ssr#%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE 使用 npm 模板生成的项目就会出现问题

OS: macOS 10.14/15
node: v12.19.0
npm: 6.14.8

大概是在 @babel/runtime 这个库升级到 7.12.1 的时候出现的，看报错是说 Page.server.js 内用 require 引入了 esm 的模块

如何实现公共代码分割?

项目使用ant-design-vue按需加载,打包出来发现使用了ant-design-vue的页面体积都比较大,应该是没有把公共代码抽离出来

                       asset-manifest.json  937 bytes          [emitted]
         static/css/Page.563401ad.chunk.css  490 bytes       0  [emitted] [immutable]         Page
        static/css/login.aa6e9184.chunk.css    196 KiB       5  [emitted] [immutable]         login
    static/css/not-found.7ee405a1.chunk.css   83.2 KiB       7  [emitted] [immutable]         not-found
           static/js/Page.19ba46f3.chunk.js   7.55 KiB       0  [emitted] [immutable]         Page
static/js/detail-id-fetch.56f379b1.chunk.js  433 bytes       2  [emitted] [immutable]         detail-id-fetch
      static/js/detail-id.a7b2e3a9.chunk.js  324 bytes       1  [emitted] [immutable]         detail-id
 static/js/index-id-fetch.b32a858e.chunk.js  419 bytes       4  [emitted] [immutable]         index-id-fetch
          static/js/index.45387c44.chunk.js  417 bytes       3  [emitted] [immutable]         index
    static/js/login-fetch.7dbde7b6.chunk.js  448 bytes       6  [emitted] [immutable]         login-fetch
          static/js/login.917ccee6.chunk.js    619 KiB       5  [emitted] [immutable]  [big]  login
static/js/not-found-fetch.70744618.chunk.js  430 bytes       8  [emitted] [immutable]         not-found-fetch
      static/js/not-found.bdb5f353.chunk.js    505 KiB       7  [emitted] [immutable]  [big]  not-found
         static/js/runtime~Page.abd4df38.js   3.51 KiB       9  [emitted] [immutable]         runtime~Page
         static/js/vendor.0b6eb950.chunk.js    209 KiB      10  [emitted] [immutable]         vendor

如上,login页面和not-found页面都使用按需加载ant-design-vue
建议给ssr-plugin-vue3的chainClientConfig添加以下默认配置
···
chain.optimization
.splitChunks({
chunks: 'async',
minSize: 20000,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\/]node_modules[\/]/,
priority: -10,
reuseExistingChunk: true
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
})
.end()
···

删除node_modules 和 yarn.lock 后重新编译js和css文件不自动注入

my-links 2.zip
这是复现代码
common.less文件编写样式不生效

ssr-types@^4.0.0 not find...

当设置的路由是/user,浏览器输入的是/user12,body会返回一个OK，如何对这种做404处理

有加中间件的，但输入/user12，和正确路由返回的都是ctx.status ===200，ctx.body===undefined
// app/middleware/notfound_handler.js
module.exports = () => {
return async function notFoundHandler(ctx, next) {
await next();
if (ctx.status === 404 && !ctx.body) {
if (ctx.acceptJSON) {
ctx.body = { error: 'Not Found' };
} else {
ctx.body = '

Page Not Found

';
}
}
};
};

可否通过配置，选择性的在服务端渲染时，使用react自带的 useContext

问题：
1.目前midway-react-ssr 的服务端渲染强绑定了 react自带的 useContext. 当不需要时它依然会执行，且只有通过useContext才使用服务端渲染所需数据.
2. 而payload中注入的 window.INITIAL_DATA， 只有在客户端可以访问，无法满是服务端渲染的需求
__html: window.USE_SSR=true; window.INITIAL_DATA =${serialize(state)};`
需求：
1.通过配置控制服务端渲染时是否使用react自带的 useContext。 不使用时框架能提供一个可访问服务端渲染数据的接口

两个页面的fetch.ts返回数据混合

plugin-vue3/src/entry/client-entry.ts

fetch.ts 返回的数据合并进 asyncData 使用的是reactive 不必添加 .value包装 也不会丢失响应性

在 vue3当中 ref() 响应式 是带有 .value 包装的 reactive() 是通过proxy 实现的 无需 .value包装
带有 .value 还会在后续取值的操作上 重复写出 带有 .value 的代码

文档优化意见收集

你期待的好用的文档是怎么样的？
文档是否缺失了什么？
希望哪些部分更加详细？

关于文档的任何意见，欢迎直接反馈到这里，我们会持续优化。

feat: vue场景支持可选参数

vue 场景原生支持 /:id? 这种形式的路由。访问 /, /:id 都能够匹配上。

react 场景原生不支持，暂不实现

打算 render$id? -> /:id? ,render$foo?$bar -> /:foo?/:bar

期望pages下约定式路由匹配规则和controller保持一致

这是midway已有的controller匹配规则
https://www.midwayjs.org/doc/guide/controller#%E4%BC%98%E5%85%88%E7%BA%A7

如果有更好的解决方案：辛苦提一共一份示例代码

愿ssr-app框架更加健壮

用户常见问题收集

收集用户的常见问题和回答，沉淀到文档的常见问题章节中。

抛个砖

如何阿里云使用？
如何集成nest？
如何结合cdn来发布？

Roadmap

接下来的计划如下

解耦代码

1、解耦框架。使其能够同时运行在 serverless 场景 和 传统的 Node.js 应用场景
2、底层 webpack 解耦。后续考虑接入 vite
3、前端框架解耦，接入vue

API 优化

API 设计原则：

简单易用：用尽可能少的 api 和参数完成完备的功能
语义清晰：API的命名约定具有一致性和精确性，便于记忆
欢迎大家在下面留言 ssr API 不合理的地方

例如

所有配置中 config 的 clientPlugin 使用和 serverPlugin 要保持一致

download badage count不对

包名调整了

考虑接入easy-monitor

支持方便快速接入腾讯云

基于midway-faas提供的能力快速发布到腾讯云。期望能够通过 ssr deploy --tencent 命令一键发布

fix：修复图片在 web 文件夹下引入的路径问题

server-utils 里的 webpack-dev-server-ssr 依赖相较于 webpack-dev-server 修改内容的记录

https://github.com/ykfe/ssr/blob/a7369548cb5d47fe26078811978983c58d4c04c0/packages/webpack/src/client.ts#L5

@zhangyuang 你提的这个 PR webpack/webpack-dev-server#1792 已经合并进 webpack-dev-server 了，没必要再用一个 fork 的版本依赖，npm 上的信息全都指向 webpack-dev-server，会造成误导。

feat: 文档添加搜索功能，首页图片改为轮播图

为文档添加搜索功能
看了一下 vuepress 的实现不难，如果只是单纯的匹配标题和子标题的话。最好是能够做到全文搜索

nestjs-react-ssr 能支持 Serverless 形式部署吗？

nestjs-react-ssr 能支持 Serverless 形式部署吗？

如果想实现 nest 支持 Serverless 部署到阿里云，我们应该怎么实现？

Only use vite (+ vite-plugin-ssr)?

Hi, neat project. I like the framework-agnosticity of it.

Have you thought of going all-in with Vite instead of also supporting Webpack? This would likely simplify the stack.

I'm the author of https://github.com/brillout/vite-plugin-ssr and I designed it to be a do-one-thing-do-it-well composable tool. Maybe using vite-plugin-ssr would make your life easier?

Exicting to see the Vite ecosystem growing.

fenxi

请问如何在 layout/index.vue 里面拿到 fetchData

按着文档上面通过props获取到的 fetchData是一个空对象

package

• core: webpack-config clientRender serverRender
• utils: getComponent wrapperHOC
• cli: ssr start, ssr build, ssr deploy

How to set up a static folder to store files

关于异步css模块增加preload以防止页面闪烁的问题

如题,是否在服务器渲染时,根据当前路由,对当前路由关联的异步加载的css文件增加preload?
我认为在webpack打包时,可以将关联关系记录下来,在服务器端渲染时根据引用关系增加css文件的preload.

配置routerPriority后fetch.ts的匹配不准确

my-links.zip
这是复现示例。
http://127.0.0.1:3000/tiger，这个tiger是数据库里存在的一个用户，访问这个路径时理论上应该匹配fetch$username.ts这个文件，结果是reset/fetch.ts这个文件被执行。

[Reqeust]求支持Rax

背景

• 我们项目在使用Rax
• 希望可以支持 ssr+serverless

node-gyp grpc包编译报错，不知道是不是对应包含版本的问题

多级路由匹配问题

路由如下
/webview/v1/activity/dubber
并在 page 建立与之对应的文件夹

当 webview 文件夹中不存在 /webview/render.tsx 时页面无法正常渲染，报错如下

ERROR in ./web/pages/webview/render.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/Users/luowei/Workspace/alpha/web/pages/webview/render.tsx'
 @ ./build/ssr-temporary-routes.js 60:11-62:33
 @ ./node_modules/ssr-plugin-vue3/cjs/entry/client-entry.js
 @ multi ./node_modules/ssr-plugin-vue3/cjs/entry/client-entry.js

当 webview 文件夹下面存在 render.tsx 时页面能够正常渲染，渲染内容为 /webview/v1/activity/dubber/render.tsx 中的内容

require is not defined

http://doc.ssr-fc.com/docs/features$faq#%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%AE%BF%E9%97%AE%E4%B8%8D%E5%8F%AF%E8%AE%BF%E9%97%AE%E7%9A%84%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%97%AE%E9%A2%98

按照文档描述的当依赖的库中引用浏览器宿主对象(document)时采用require，但是在vite编译下导致报错,webpack无此问题。
有在vite下使用require的方法吗。

ssr的使用文档在哪里，没看到啊，能弄在醒目的位置吗

新项目vite 404

您好，新建ssr midwayjs+vue3项目后使用vite访问任意页面404，操作步骤与debug日志如下：

$ npm init ssr-app wenku -- --template=midway-vue3-ssr
$ cd wenku && yarn && yarn add -D vite @vitejs/plugin-vue

$ yarn vite -d
yarn run v1.22.10
$ D:\test\wenku\node_modules\.bin\vite -d
  vite:config no config file found. +0ms
[dotenv][DEBUG] did not match key and value when parsing line 1:
[dotenv][DEBUG] did not match key and value when parsing line 6:
  vite:config using resolved config: {
  vite:config   root: 'D:/test/wenku',
  vite:config   base: '/',
  vite:config   mode: 'development',
  vite:config   configFile: undefined,
  vite:config   logLevel: undefined,
  vite:config   clearScreen: undefined,
  vite:config   server: {},
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: 'D:\\test\\wenku\\public',
  vite:config   command: 'serve',
  vite:config   isProduction: false,
  vite:config   optimizeCacheDir: 'D:\\test\\wenku\\node_modules\\.vite',
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +8ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.1.5 dev server running at:

  > Network:  http://172.18.0.1:3000/
  > Network:  http://172.20.192.1:3000/
  > Network:  http://192.168.10.157:3000/
  > Network:  http://172.16.3.168:3000/
  > Network:  http://192.168.56.1:3000/
  > Network:  http://192.168.24.1:3000/
  > Network:  http://192.168.112.1:3000/
  > Network:  http://192.168.10.200:3000/
  > Local:    http://localhost:3000/

  ready in 234ms.

  vite:hmr [file change] .idea/workspace.xml +0ms
  vite:hmr [no modules matched] .idea/workspace.xml +1ms
  vite:spa-fallback Rewriting GET /?csr=1 to /index.html +0ms
  vite:time 8ms   /index.html +0ms

serverless ssr 框架 v1.0 版本 RFC

参见 https://github.com/ykfe/ssr/tree/feat/context 分支，目前还未发布，使用 link 的方式来调试

feature

1、使用 useContext + useReducer 做数据管理 代替传统的 redux/dva 等方案

已完成

1、使用 useContext 使得组件之间可以共享 context

待完成

1、加入 useReducer 的使用示例 ref: https://hswolff.com/blog/how-to-usecontext-with-usereducer/

cr

issues

• plugin-faas和plugin-midway分的不好
• plugin代码在哪里？别人如何扩展
• "vue": "^2.0.0",??
• vite部分没有看到
• create-ssr-app集成没有
• example和其他地方不要过度强调midway，这个版本主导Serverless
• example里既有midway又有egg，依赖需要处理一下。
• 测试基本没有。只有jest配置。
• fePlugin命名不好

优点

const { midwayPlugin } = require('ssr-plugin-midway')
const { vuePlugin } = require('ssr-plugin-vue')

module.exports = {
  serverPlugin: midwayPlugin(),
  fePlugin: vuePlugin()
}

用起来确实简单很多。接下来plugin围绕扩展，还有很多工作要做。

框架有没有提供根据不同页面添加不同的meta 标签的功能

服务端的渲染过程开放勾子函数，用来实现缓存功能

test ssr on AWS lambda

https://github.com/midwayjs/midway/wiki/Standard-Function

midway faas has already support lambda。add a test case on AWS lambda

multi layout

请问现在是否支持多layout？

请问我提的这个问题有什么问题？你们这个群管理为什么直接喷粪了？

使用element plus 组件库 图标字体经过webpack打包后加载不出来

现象：


可复现例子：
https://github.com/EditYJ/paixin-media-ssr

安装 typeorm 无法使用

1. 安装依赖

yarn add @nestjs/typeorm typeorm mysql2

2. 引入配置 src/app.module.ts

import { Module } from '@nestjs/common'
import { DetailModule } from './modules/detail-page/detail.module'
import { indexModule } from './modules/index-page/index.module'
import { TypeOrmModule } from '@nestjs/typeorm'

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: 'root',
      database: 'test',
      entities: [],
      synchronize: true
    }),
    DetailModule,
    indexModule
  ]
})
export class AppModule {}

此时无法运行 程序报错 报错信息如下

[Nest] 17028   - 08/03/2021, 2:57:46 PM   [NestFactory] Starting Nest application...

[Nest] 17028   - 08/03/2021, 2:57:46 PM   [InstanceLoader] AppModule dependencies initialized +26ms

[Nest] 17028   - 08/03/2021, 2:57:46 PM   [InstanceLoader] TypeOrmModule dependencies initialized +0ms

error: [Nest] 17028   - 08/03/2021, 2:57:46 PM   [ExceptionHandler] rxjs_1.lastValueFrom is not a function +1ms

error: TypeError: rxjs_1.lastValueFrom is not a function
    at Function.<anonymous> (/Users/macos/Desktop/ssr/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:146:33)
    at Generator.next (<anonymous>)
    at /Users/macos/Desktop/ssr/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:20:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/macos/Desktop/ssr/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:16:12)
    at Function.createConnectionFactory (/Users/macos/Desktop/ssr/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:143:16)
    at Function.<anonymous> (/Users/macos/Desktop/ssr/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:46:96)
    at Generator.next (<anonymous>)
    at /Users/macos/Desktop/ssr/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:20:71
    at new Promise (<anonymous>)

是不允许这样使用还是我的配置有问题。

将Readme翻译成英文文档

在 fetch.ts 中返回字符串，在asyncData中会被截断成单个字符