什么是前后端同构
明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。
感觉前端的确是折腾，之前还在流行前后端分离，现在怎么又要做前后端同构了？
原因是现在流行的SPA前端单页面应用比较沉重，首次访问需要加载文件较多，第一次加载过慢，用户需要等待前端进行渲染页面。而且不利于SEO及缓存，并且有一定的开发门槛。
前后端同构通过复用模板和JS文件，让一份代码可以同时跑在服务器和浏览器，首次渲染使用nodejs渲染页面，之后使用SPA路由跳转。可以有效减少用户首次访问的等待时间，并且对SEO比较友好，也便于缓存。
项目简介
本前后端同构项目主要分为两个部分，一个是基于koa2的渲染服务器，另一个是基于原生JS和zepto的前端SPA。
项目的特点是不使用vue和react等框架，门槛低，开发速度快，便于上手，比较轻巧，核心的router部分只有一百行左右的代码。适用于页面交互较少，变化不频繁的场景下，可以有效的提升性能和加载速度。
前端部分
前端部分的核心是路由部分，具体实现可以基于history API或是hash，网上有很多实现，这次主要讲下架构 前端部分采用MVC分层结构。
router层做的主要是创建路由示例，调用路由的get方法，给特定页面绑定来自control层的函数。 形式如：
router = new Router(render,'ROUTER',beforeFn)
router.get('/page/a',control.pageA')
control层主要做的是加载跟后端共有的渲染模板和渲染数据，渲染出页面后运行页面函数
形式如：
// 捕捉webpack热更新，让他只进行相当于页面跳转的操作而不是刷新页面
if(module.hot) {
module.hot.accept(['script/pageA'],() => {
control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
})
}
view层即模板，这里使用的是xtpl模板，在服务器环境和前端环境下都支持渲染页面
页面函数的形式
页面函数要求使用es6的模块写法，配合webpack的按需加载功能
后端部分
使用koa2搭建的一个渲染服务器，在收到前端传来的页面请求时，会向API服务器请求数据，并识别页面请求是否带有json=1的参数，如果带有，则为前端路由跳转时的请求，直接返回数据即可，如果没有带json参数，加载跟前端共用的模板，配合数据进行渲染，发送到浏览器。
原文链接：https://www.f2er.com/js/32666.html