Chaoszhu'Blog

Appearance

基于Vue的服务端渲染框架 ​

一、服务端(Server-Side Render)渲染 ​

  • 优点：利于SEO、首屏时间快
  • 需要权衡的点：部分第三方库执行只能在客户端执行、部署环境要求、优质的服务器配置

二、创建应用注意点 ​

官方提供的脚手架：create-nuxt-app

WARNING

3.0+版本默认已不提供服务框架选择项

解决: npx create-nuxt-app@2.15.0 XXX

server frameworker & serverMiddleware 如何选择？ ​

1. koa2、express、micro......

选择自定义的服务器框架, 将Nuxt作为中间件使用.

2. Nuxt API：serverMiddleware(推荐)

  • 通过Nuxt自身的服务(底层基于connect模块, 同样通过use来挂载中间件, Express就是基于Connect开发的)
  • nuxt提供的API，在vue-server-renderer之前执行且不会通过nuxt服务.
js
// nuxt.config.js
serverMiddleware: [
'~/serverMiddleware/test'
]
// serverMiddleware/test.js
export default {
  path: '/test',
  handler(req, res, next) {
    console.log(req)
    console.log(res)
    res.end('Everything ok!')
  }
}

WARNING

两种服务的路由优先级高于页面路由, 路由命名需注意

对比 ​

自定义选择服务框架带来的是更高的可扩展性(数据库操作、利用一些插件做负载均衡), 但前端人员可能需要过渡参与后端业务逻辑的开发工作.

使用serverMiddleware能将Nuxt从服务中解耦出来,专注原型业务开发.但随着API的增长, 不易维护

TIP

  • 中间层: 原本client与server直接通信,在中间添加node层对请求做一次处理, 例如:

API转发(http-proxy-middleware)

接口聚合: A/B/C系统三个不同接口,在ndoe层做一次聚合,一次性查询三个系统数据

数据缓存(radis): 将不经常变换的数据存入rais, 下次请求直接返回, 减轻服务器压力

接口限流: 将一定时间内的多次请求的IP驳回

日志管理: 封装中间件, 保留重要请求的信息

其他: 鉴权、SSR、监控

参考文章: https://juejin.cn/post/6918260779472912392

其他问题 ​

**Vue-spa：**axios客户端发送请求【同域自动带上,跨域需配置credentials】

Nuxt项目：@nuxt/axios自动转发headers信息

@nuxt/axios源码参考1

@nuxt/axios源码参考2

遗留的问题 ​

有时间源码里找答案系列...

beforeCreate & created的执行【为何双端执行?】 ​

猜测：看了下nuxt源码用到的依赖，里边有vue-server-renderer，在vue源码里有做服务端渲染的判断。猜测是beforeCreate & created这俩钩子是vue-server-renderer用来在服务端填充数据的。asyncData、nuxtServerInit、fetch这些方法是nuxt进一步封装上去的

打包后server & client各自的职责? ​

猜测：server渲染页面完成后, client负责嵌入与Vue实例执行