前端 SSR 初探

SPA(single page application)因其体验好,前端端分离开发速度快,语言之间解耦等特点大行其道,迅速占领市场
然而对搜索引擎并不友好,在angular1.x 时代,我们只能通过prerender.io, 在服务端做判断是爬虫的话,返回其一个html。额外增加了服务端的工作。
今天我们祭出nuxt.js(vue SSR方案)
  1. 首先是 SSR 的对比

非 SSR 页面
f9fcb316b62b44e78f124864f974b2e1_image.png

SSR 后的页面
338c033525834ea09981694dba61555f_image.png

第一个减少了首次加载的白屏时间
第二个是返回了有解构的 html,可供爬虫抓取

  1. 前端架构改变
    非 SSR 下
    fc7b80d41d5d40cdb24925ea72919fbf_image.png

SSR 下
7785b59f81a44f1a817bf9dc162f69fd_image.png

我们引入 node server 来做 BFF 层,负责处理直出页面,合并接口数据等

  1. SSR 下项目结构
    4b06266dfc6f40c48e5b593653ea753e_image.png
    重要的几个目录

assets 用于存放静态资源 - 图片,公共 css 等
layouts 用于存放默认的模板
middleware 前端权限验证中间件
pages 页面级组件目录 - nuxt 根据目录自动生成路由
plugins 存放过滤器 filter 等
server node.js 服务器
static favicon.icon, pwa 文件
nuxt.config.js 配置文件

  1. nuxt.config.js 配置
    97d9accc237c4a0f9c7fcc1bec656d1f_image.png

~ 是根目录的别名

head 用于组织 默认的 html 里的 head 信息, 当然 page 级别的组件里面也有该字段可修改
css 用于引入全局性质的 css
plugins 用于引入插件,当然 ssr 选项 表示服务端渲染,还是客户端渲染
build 下的 verdor 用于全局性质的插件。比如 moment - 时间插件, axios - 网络请求插件它们既可以用于浏览器也可以用于 node.js

5.node 服务端 - koa2

56ed18c40c43405099b0df0e5df169aa_image.png

传统的 MVC 分层
config - 全局配置文件
controllers
middlewares 服务端中间件 - 接口的权限验证
routers - 管理 api 接口
service - 因为的 BFF 中间层,所以是请求 java 服务端接口 否则可以替换为 model 层
tool.js 工具类
index.js 入口文件

6. 简单介绍下 koa2 框架
非常经典的洋葱模型
fb79496f7eea442699a53ef52537e0b8_image.png

所有的东西,其实都是基于中间件
c188a01ef3b84136a923004ae67acb66_image.png

使用 async/await 关键字,非常优雅的处理异步

7.node.js 合并接口
749d236a1cc54d75b1def025e1a3adb8_image.png

ctx 为上下文对象
对于 post 请求,ctx.request.body 为前端入参
对于 get 请求, ctx.query 为查询参数

返回给前端的接口数据只需要挂载在 ctx.body 下
当然如果想直接进入下一个中间件 调用 next() 就好 , 注意洋葱模型