精读《在浏览器运行 serverRender》

[ascoders]

利用 service worker 尝试在浏览器执行 serverRender，方案还没有最终完善，还有很大改善空间。

[ascoders]

client ssr 效果：https://ascoders.github.io/client-ssr/

[linonetwo]

我有两个问题：

1. sw 里面的 JSX 是怎么编译的？
2. 你是用 CRA 创建的项目吗，如果是的话是否要改动很大？（我没找到这个项目源码在哪……）

我现在在 SW 里面桥接 p2p 网络，所以也需要在 SW 里渲染 React 组件，用于显示 p2p 网络上的文件夹内容，来请教一下~

[linonetwo]

找到项目了 https://github.com/ascoders/client-ssr/blob/gh-pages/sw.js 之前看错了，原来那个 JSX 是写在 renderer 那一侧的，不是 SW 侧。

[ascoders]

@linonetwo 目前是这样的，团队同学正在调研把 ssr 放到 web worker 里。

[linonetwo]

https://zeit.co/blog/streaming-server-rendering-at-spectrum 这有一篇关于在 SW 里面 cache SSR 流的

[linonetwo]

他们好像不仅在 SW 里面用 ES6 语法，还在 SW 里面用了 JSX？
请问这应该是用了什么 webpack 插件？

[linonetwo]

https://glebbahmutov.com/blog/run-express-server-in-your-browser/ 这篇文章就是讲 SW SSR 的

[ascoders]

@linonetwo 应该有预编译成 js，sw 肯定不支持 jsx

[linonetwo]

用 serviceworker-webpack-plugin 可以实现在 SW 里用 ES6 JSX 等，我已经用上了： https://github.com/linonetwo/ipfs-browser-gateway

我现在终于理解为啥你要在 SW 里做 SSR 了，因为一般情况下 SW 会阻止 html 请求回源，所以用户第二次打开网站的时候就体验不到 SSR 了，会出现一堆 loading， https://scaneos.io/ 现在就出现了这种情况。
如果在 SW 里也 SSR 一下，用户第二次打开也不会出现 loading。
我的理解对吗？

[ascoders]

@linonetwo SW 拦截 html 并不会影响后端 SSR 的效果，我的目的是不在后端做 SSR，把 SSR 运算压力分摊在每个前端机器上。

因为我们的页面动辄几百万 PV，后端 node 集群都不一定扛得住 SSR 的计算量，但浏览器是天然的负载均衡场所。

[linonetwo]

可能工具类页面适合 swssr 方案，毕竟不需要从数据库加载数据。

如果页面上要展示经常更新的数据的话，就不适合在 sw 里做 ssr，因为这种情况下让 renderer process 去API取数据和让 sw 去API取数据一样慢，而且比起让 renderer process 取数据，在 sw 里取还没法让用户知道此时正在 loading。

当然，如果取数据的API来自 p2p 工具，比如 ipfs-js，那么还是应该在 sw 里面做 ssr。

[ascoders]

@linonetwo 是这个，动态数据问题还要持续讨论。对离线数据也是没问题的。