什么是前后端同構(gòu)

明確三個概念：「后端渲染」指傳統(tǒng)的 ASP、Java 或 PHP 的渲染機制；「前端渲染」指使用 JS 來渲染頁面大部分內(nèi)容，代表是現(xiàn)在流行的 SPA 單頁面應用；「同構(gòu)渲染」指前后端共用 JS，首次渲染時使用 Node.js 來直出 HTML。一般來說同構(gòu)渲染是介于前后端中的共有部分。

感覺前端的確是折騰，之前還在流行前后端分離，現(xiàn)在怎么又要做前后端同構(gòu)了？

原因是現(xiàn)在流行的SPA前端單頁面應用比較沉重，首次訪問需要加載文件較多，第一次加載過慢，用戶需要等待前端進行渲染頁面。而且不利于SEO及緩存，并且有一定的開發(fā)門檻。

前后端同構(gòu)通過復用模板和JS文件，讓一份代碼可以同時跑在服務器和瀏覽器，首次渲染使用nodejs渲染頁面，之后使用SPA路由跳轉(zhuǎn)。可以有效減少用戶首次訪問的等待時間，并且對SEO比較友好，也便于緩存。

項目簡介

本前后端同構(gòu)項目主要分為兩個部分，一個是基于koa2的渲染服務器，另一個是基于原生JS和zepto的前端SPA。

項目的特點是不使用vue和react等框架，門檻低，開發(fā)速度快，便于上手，比較輕巧，核心的router部分只有一百行左右的代碼。適用于頁面交互較少，變化不頻繁的場景下，可以有效的提升性能和加載速度。

前端部分

前端部分的核心是路由部分，具體實現(xiàn)可以基于history API或是hash，網(wǎng)上有很多實現(xiàn)，這次主要講下架構(gòu)
前端部分采用MVC分層結(jié)構(gòu)。

router層做的主要是創(chuàng)建路由示例，調(diào)用路由的get方法，給特定頁面綁定來自control層的函數(shù)。
形式如：

import control from '../control'//路由的構(gòu)造函數(shù)支持傳入渲染函數(shù)，路由的全局名稱，路由跳轉(zhuǎn)前調(diào)用的鉤子router = new Router(render,'ROUTER',beforeFn)router.get('/page/a', control.pageA')

control層主要做的是加載跟后端共有的渲染模板和渲染數(shù)據(jù)，渲染出頁面后運行頁面函數(shù)

形式如：

let control = { pageA(req,res) {  //webpack的動態(tài)加載，代碼分割功能  import(/* webpackChunkName: "pageA" */'script/pageA').then(module=> {  // 檢測該頁面是否已有服務器渲染好，是的話直接運行module.default  //否則加載模板和數(shù)據(jù)進行渲染,最后再調(diào)用頁面函數(shù)  if(this.needRender(module.default)) {  //加載數(shù)據(jù)時訪問的地址就是當前準備渲染的頁面地址，只是加上了json=1的參數(shù)   loadData('pageA').then(data =>     res.render(xtpl,data,module.default))  } }}// 捕捉webpack熱更新，讓他只進行相當于頁面跳轉(zhuǎn)的操作而不是刷新頁面if(module.hot) { module.hot.accept(['script/pageA'], () => {  control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res) })}

view層即模板，這里使用的是xtpl模板，在服務器環(huán)境和前端環(huán)境下都支持渲染頁面

頁面函數(shù)的形式

頁面函數(shù)要求使用es6的模塊寫法，配合webpack的按需加載功能

export default () => { window.addEventListener('scroll', fn)//頁面函數(shù)支持返回一個卸載函數(shù)，在頁面離開的時候會被調(diào)用//主要用于內(nèi)存的釋放，定時器的清除，事件監(jiān)聽的移除等等 return function () {  window.removeEventListener('scroll', fn) }}

后端部分

使用koa2搭建的一個渲染服務器，在收到前端傳來的頁面請求時，會向API服務器請求數(shù)據(jù)，并識別頁面請求是否帶有json=1的參數(shù)，如果帶有，則為前端路由跳轉(zhuǎn)時的請求，直接返回數(shù)據(jù)即可，如果沒有帶json參數(shù)，加載跟前端共用的模板，配合數(shù)據(jù)進行渲染，發(fā)送到瀏覽器。