有时候遇到的需求是这样的：
部分页面，如详情页，需要做SEO优化，而部分页面需要实现复杂的交互，如用户后台，可发布信息。
之前采用过一次，Nuxt.js 等前后端同构的方案。
优点就是一套js代码，就可以实现后端渲染。
使用后发现开发环境性能要求较高，经常出现启动慢，打包慢，有时候还进程自动退出
编写代码的时候发现，Vue生命周期把控不好，会出现一些奇怪的报错，不能很好的区分代码在服务端执行还是客户端执行，需要写一些判断。
上图的方案，采用了ThinkPHP作为服务端，使用他的Active Records 形式的 ORM 能够很快进行MySQL数据库的CURD开发，而且一台服务器部署多个应用也比较简单，通过PHP-FPM可以很好的管理PHP应用。当然也可以换成其他语言实现，例如：
- Python的Flask、Django;
- Node.js的express、Koa；
- Java的SpringBoot；
- PHP的Laravel等
通过Twig渲染模板，主要是Twig模板引擎比较通用，
类似的有
- PHP 生态下的 Twig
- Python生态下的 jinja2
- javascript生态下的nunjucks
甚至是Vue中也有其影子
有了Webpack的加持，乘着前端工具链的快车
- 不需要复杂交互的部分，就可以直接使用后端模板引擎做后端渲染
- 需要做复杂交互的部分，可以使用Vue.js、React.js等前端库来处理
开发环境
使用webpack devServer处理静态文件，同时又实现了Live Server，提升开发体验
使用ThinkPHP处理HTML，通过模板引擎Twig动态渲染模板
生产环境
通过Nginx转发请求，先将请求转发给PHP处理模板引擎，获取THML文件
浏览器再去请求js、css、图片等静态资源，打包后的文件名可以增加hash值，解决浏览器对静态资源的缓存问题，通过manifest.json文件的文件映射关系，动态查找真实的文件名，实现动态替换
文件目录结构，可以参考微信小程序的方案
app/
index/
IndexController.php
src/
pages/
index/
index.js
index.less
index.html
这样将相关文件都放置在一起，易于维护，Webpack和ThinkPHP各取所需