优酷前端团队在技术演进之路的组件级同构方面主要有哪些内容？

在技术调研期，我们分别看了 next.js 和 easywebpack。

easywebpack 在使用上，我不认可使用 egg 的 worker 来做。easy-team 的方案本地开发采用了在 Node
中启动 webpack 编译 bundle 的方案，将服务端 bundle 打包在内存中，agent 进程通过 memory-fs 提供的
api 来读取文件内容，并且通过 worker 与 agent 进程的通信， 来让 worker
进程可以获取到文件的字符串内容。然后采用了 Node 的 runInNewContext api， 类似于 eval 的方式去执行 js
字符；
next.js 写法上是完美的。结合上面讲过的
Biglet，请求方法抽取成静态方法，可以复用。另外在服务端渲染，先执行请求方法，是最高效的方式。

写法上，最终定了采用 next.js 式的写法。

该技术方案具有以下优点：

实现方式简单优雅
SSR/CSR 无缝切换
全面拥抱 JSX
拥抱阿里生态

我们的代码既可以在服务端运行又可以在客户端运行。这里需要重点讲一下 CSR 和 SSR， 我们是业内第一个这样做的。它也带给我们一个意外惊喜，那就是在服务降级上提供了一个更好的方案。

播放页的服务支持两种渲染方式，当服务端有渲染压力时或集群不稳定时，可以切换为客户端渲染，服务端只负责页面的 SEO 数据获取，渲染工作交给浏览器。另外一种方式是当数据源服务出现问题时，可以使用 CDN 数据兜底进行页面容灾。

组件级同构: 支持 CSR/SSR 一键切换 在技术调研期，我们分别看了 next.js 和 easywebpack。  easywebpack 在使用上，我不认可使用 egg 的 worker 来做。easy-team 的方案本地开发采 用了在 Node 中启动 webpack 编译 bundle 的方案，将服务端 bundle 打包在内存中，agent 进程通过 memory-fs 提供的 api 来读取文件内容，并且通过 worker 与 agent 进程的通信， 来让worker进程可以获取到文件的字符串内容。然后采用了Node的runInNewContext api， 类似于 eval 的方式去执行 js 字符；  next.js 写法上是完美的。结合上面讲过的 Biglet，请求方法抽取成静态方法，可以复用。 另外在服务端渲染，先执行请求方法，是最高效的方式； 播放页的服务支持两种渲染方式，当服务端有渲染压力时或集群不稳定时，可以切换为客 户端渲染，服务端只负责页面的 SEO 数据获取，渲染工作交给浏览器。另外一种方式是当数 据源服务出现问题时，可以使用 CDN 数据兜底进行页面容灾。