zhangyuang/ssr

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

ssr's Issues

API 优化

API 设计原则：

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

例如

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

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.

feat: vue场景支持可选参数

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

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

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

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/

新项目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

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

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的方法吗。

可否通过配置，选择性的在服务端渲染时，使用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。 不使用时框架能提供一个可访问服务端渲染数据的接口

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

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

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

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

多级路由匹配问题

路由如下
/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 中的内容

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

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.

Roadmap

接下来的计划如下

解耦代码

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

[Reqeust]求支持Rax

背景

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

当设置的路由是/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

';
}
}
};
};

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

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

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

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

package

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

增加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

安装 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>)

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

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

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

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

愿ssr-app框架更加健壮

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 的模块

How to set up a static folder to store files

ssr-types@^4.0.0 not find...

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，会造成误导。

新增本地proxy能力

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

如何实现公共代码分割?

项目使用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文件编写样式不生效

download badage count不对

包名调整了

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

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

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

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

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

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

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

现象：


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

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

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

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

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

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

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

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

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

接入微软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中渲染响应组件

当前使用的版本

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

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

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围绕扩展，还有很多工作要做。

fenxi

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

multi layout

请问现在是否支持多layout？

文档优化意见收集

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

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

将Readme翻译成英文文档

用户常见问题收集

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

抛个砖

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

考虑接入easy-monitor

支持方便快速接入腾讯云

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