SSR
使用方法
首先通过 umi-plugin-ssr 插件开启 SSR 功能：
// .umirc.js
plugins: [
['umi-plugin-ssr', {
// nodeExternalsWhitelist: []
// 其他配置项待定
}],
]
然后在服务端脚本中使用插件暴露的 express 或者 koa 中间件：
// server.js
const { render } = require('umi-plugin-ssr');
const app = require('express')();
// 启动 Umi，这里可能需要暴露 API
// 例如：umi.start();
// 使用中间件
app.use(render);
实现思路
重要的修改包括：
- 在已有
ClientEntry的基础上新增针对ServerEntry的 Webpack 构建流程，修改target: 'node'output.libraryTarget: 'commonjs2'等等 - 服务端预取数据。在页面组件中引入约定好的生命周期钩子。例如 Nuxt 中的
asyncData()，Next 中的getInitialProps() - 使用 ReactDOMServer，将初始状态
initialState注入 HTML - 在 Client 端 dva 同步初始状态
initialState，进行hydrate()
可能遇到的问题：
- 目前 Umi 只能通过命令启动构建，可能需要暴露可编程使用的 API？
- 在 SSR 模式下，通常我们不希望将
node_modules中的依赖打包进 server bundle 中，因此需要使用 Webpackexternals配置项。但是在某些场景下，我们还是需要将部分特定的依赖打包进来，这时就需要使用白名单了。例如在服务端渲染场景下常常遇到的一个问题是，某些第三方依赖使用了document,window这样在 Node.js 环境中不存在的对象。为了保证服务端渲染正常运行，通常使用resolve.alias引导 Webpack 使用空的 stub 对象，此时一定要同时在nodeExternalsWhitelist中加入该依赖。 - 配合 PWA 中 ServiceWorker 使用时，不同于 SPA 只有一个 HTML，不可能把每个页面都加进预缓存列表。之前在 Vue SSR 中使用 ServiceWorker 时整理了一些通用的思路。
Pre Rendering
某些 SPA 中存在一部分需要 SEO 的重要静态页面，并不需要做整站 SSR。
Pre Rendering 本身依赖于 SSR 方案，在构建时将路由静态化成为对应的 HTML 文件。
使用方法的话可以在约定/配置式路由基础上扩展。
/**
* title: Index Page
* prerender: true
* Routes:
* - ./src/routes/a.js
* - ./src/routes/b.js
*/
参考资料
xiaoiver
All 36 comments
关注
xiaohuoni
on 26 Oct 2018
及时雨
DomenLee
on 27 Oct 2018
https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
netflix 提到的这种方式也可以作为一个 feature
okoala
on 7 Nov 2018
repost
devmsg
on 15 Nov 2018
关注下
anshengme
on 15 Dec 2018
Mark
HaishengLiang
on 19 Dec 2018
关注SSR方案
ClarkXia
on 19 Dec 2018
ssr中间件有2种解法
1）获得res.locals.webpackStats
通过webpack-dev-server用的webpack-dev-middleware，配置
app.use(middleware(compiler, { serverSideRender: true }))
因为umi内置了webpack-dev-server，如果我能够获得webpackStats，就不需要获得webpack config
easywebpack使用的就是这种方式实现的。其实就是webpack-dev-server将webpackStats抛出来，你自己的web server收到webpackStats（http、rpc、ws都行），其他过程就一样了。easywebpack采用的egg的agent实现的，可圈可点吧
如果大家想挑战一下，也可以试试
2）通过代码去获取webpack config。
原理跟umi inspect原理一样。
// 获取webpack配置信息
const webpackConfig = require('umi-build-dev/lib/getWebpackConfig').default(service);
const compiler = webpack(webpackConfig);
// 测试webpack执行情况
compiler.run((err, stats) => {/* ...处理结果 */
if (err) console.dir(err)
console.dir(stats)
})
通过这种方法能够取到compiler，已实现，参见https://github.com/i5ting/get-umi-webpack-compiler
i5ting
on 20 Jan 2019
+1
Pre Rendering 对于 h5 和静态 landing 站点的 SEO 和性能意义巨大。
afc163
on 21 Jan 2019
同构最麻烦的一点就是数据在页面上是 double 的，一份是原 json 数据，一份是渲染好的数据。
okoala
on 21 Jan 2019
有没有支持的时间节点呢？
ibmsoft
on 28 Jan 2019
+1 Watching，Pre Rendering 能满足大部分对外站点，可参照 gatsby
ycjcl868
on 12 Feb 2019
mark
ql434
on 18 Feb 2019
强烈的需求啊
superbogy
on 24 Feb 2019
这几天在折腾midway和umi整合，尽快放出来一个版本
i5ting
on 24 Feb 2019
@i5ting 狼叔有实现umi的SSR嘛？
anshengme
on 4 Mar 2019
保持关注
superbogy
on 5 Mar 2019
👍
chiaweilee
on 9 Mar 2019
关注着
awakenin
on 18 Mar 2019
期待 umi ssr 啊
smithyj
on 2 Apr 2019
求umi整合SSR的demo
perany
on 12 Apr 2019
两个月过去了,有什么音信没
furylee
on 23 Apr 2019
@furylee 已经实现了，pr在内部review
i5ting
on 23 Apr 2019
@i5ting 狼叔威武 等待体验ing....
hanwenbo
on 23 Apr 2019
关注
wangxingkang
on 23 Apr 2019
快点出吧 next.js缺陷很多啊
zadzbw
on 23 Apr 2019
预计什么时候放出来呢？很需要ssr
hpf1908
on 30 Apr 2019
期待ssr
jinfei
on 5 May 2019
mark
内部review中
zhangyuang
on 8 May 2019
关注中，希望早点放出来。狼叔牛批
chenqincheng
on 13 May 2019
mark，期待中
HadiChen
on 13 May 2019
mark
laketea
on 17 May 2019
mark
BosenY
on 22 May 2019
mark
shizhiqian
on 30 May 2019
期待ing，狼叔威武
philina
on 17 Jul 2019
@philina 已经发布了
docs: https://umijs.org/docs/ssr
ycjcl868
on 17 Jul 2019
Related issues
ironyfive
·
3Comments
ddzy
·
3Comments
RunningCoderLee
·
3Comments
tauruswang
·
3Comments
tangzhengwen
·
4Comments
Most helpful comment
这几天在折腾midway和umi整合，尽快放出来一个版本