原生JS实现前后端同构：基于Koa2与MVC架构的实践

前后端同构概念解析

什么是前后端同构

需要明确三个核心概念：「后端渲染」指的是传统的ASP、Java或PHP等服务器端渲染机制；「前端渲染」是指利用JavaScript在客户端渲染页面主体内容，目前流行的单页面应用（SPA）即属此类；「同构渲染」则是指前后端共享JavaScript代码，首次加载时由Node.js直接输出HTML。通常情况下，同构渲染被视为介于纯后端渲染与纯前端渲染之间的一种折中方案。

前端技术一直在不断演进，此前前后端分离架构占据主流，如今为何又要转向前后端同构？

这主要是因为当前流行的SPA单页面应用存在一定弊端：首次访问时需加载大量文件，导致初始加载缓慢，用户需等待前端完成页面渲染。此外，纯前端渲染不利于搜索引擎优化（SEO）及缓存策略，且对开发者的技术要求较高。

前后端同构通过复用模板和JavaScript文件，使同一份代码既能在服务器端运行，也能在浏览器中执行。首次渲染由Node.js完成页面输出，后续通过SPA路由进行页面跳转。这种方式能有效缩短用户首次访问的等待时间，对SEO更加友好，同时也更便于缓存处理。

项目架构概述

项目简介

本前后端同构项目主要包含两个部分：一是基于Koa2构建的渲染服务器，二是基于原生JavaScript和Zepto库开发的前端单页面应用（SPA）。

该项目的特点在于不使用Vue、React等主流框架，因此开发门槛较低，上手速度快，整体架构轻巧。其核心路由部分仅包含约一百行代码。这种方案特别适用于页面交互较少、内容更新不频繁的场景，能够显著提升性能并加快加载速度。

前端MVC架构实现

前端部分

前端部分的核心在于路由机制，具体实现可基于History API或Hash模式，网上已有多种成熟方案。此处重点介绍整体架构设计。前端部分采用MVC分层结构进行组织。

Router层主要负责创建路由实例，调用路由的get方法，并将特定页面与来自Control层的处理函数进行绑定。其典型形式如下：

import control from '../control'

//路由的构造函数支持传入渲染函数，路由的全局名称，路由跳转前调用的钩子
router = new Router(render,'ROUTER',beforeFn)

router.get('/page/a', control.pageA')

Control层的主要职责是加载与后端共用的渲染模板及数据，完成页面渲染后执行页面上的交互函数。

其典型形式如下：

let control = {
 pageA(req,res) {
  //webpack的动态加载，代码分割功能
  import(/* webpackChunkName: "pageA" */'script/pageA').then(module=> {
  // 检测该页面是否已有服务器渲染好，是的话直接运行module.default
  //否则加载模板和数据进行渲染,最后再调用页面函数
  if(this.needRender(module.default)) {
  //加载数据时访问的地址就是当前准备渲染的页面地址，只是加上了json=1的参数
   loadData('pageA').then(data => 
    res.render(xtpl,data,module.default))
  }
 }
}

// 捕捉webpack热更新，让他只进行相当于页面跳转的操作而不是刷新页面
if(module.hot) {
 module.hot.accept(['script/pageA'], () => {
  control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
 })
}

View层即模板层，本项目使用xtpl模板引擎，该模板在服务器环境和前端环境中均支持页面渲染。

页面函数的定义形式如下：

页面函数需采用ES6的模块写法，并配合Webpack的按需加载功能使用。

export default () => {
 window.addEventListener('scroll', fn)
//页面函数支持返回一个卸载函数，在页面离开的时候会被调用
//主要用于内存的释放，定时器的清除，事件监听的移除等等
 return function () {
  window.removeEventListener('scroll', fn)
 }
}

后端Koa2渲染逻辑

后端部分

后端使用Koa2搭建渲染服务器。当收到前端传来的页面请求时，服务器会向API服务器请求数据。系统会识别页面请求是否带有json=1参数：若带有该参数，则视为前端路由跳转请求，直接返回数据；若未带json参数，则加载与前端共用的模板，结合数据进行渲染，最终将HTML发送至浏览器。