资源

  1. vue-ssr
  2. nuxt.js

    理解ssr

    传统web开发

    传统web开发，网页内容在服务端渲染完成，一次性传输到浏览器。
    image.png
    打开页面查看源码，浏览器拿到的是全部的dom结构。

    单页应用 Single Page App

    单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染。image.png
    打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容。
    image.png
    两个问题：
  • SEO不友好
  • 首屏加载时间相对较长

    服务端渲染Server Side Render

    SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染 (server side render)。

image.png

ssr是折中方案，利用vue语法编写程序，还能在服务端渲染html内容。

构建

对于客户端应用程序和服务器应用程序，我们都要使用 webpack 打包 - 服务器需要「服务器 bundle」 然后用于服务器端渲染(SSR)，而「客户端 bundle」会发送给浏览器，用于混合静态标记。

构建流程

image.png

代码结构

image.png

总结：

ssr优缺点都很鲜明的架构

优点：
  1. SEO

  2. 首屏内容到达的时间

    缺点：

  3. 负载大

  4. 开发条件限制

  5. 构建部署：nodejs环境

    技术选型：

  6. 首屏内容到达时间的重要程度如何？

  7. seo是否是重要需求？仅有少量营销页面需要SEO，考虑预渲染pre-render
  8. 已经完成的spa项目，重构量很大怎么办？可以考虑Puppeteer
  9. 高流量情况是否做好充足服务器负载准备，缓存策略制定。

Nuxt.js实战

Nuxt.js 是一个基于 Vue.js 的通用应用框架。 资源：Nuxt官方文档

nuxt.js特性

  • 代码分层
  • 服务端渲染
  • 强大的路由功能
  • 静态文件服务
  • …

    nuxt 渲染流程

    一个完整的服务器请求到渲染的流程。

image.png

nuxt安装

运行 create-nuxt-app

  1. npx create-nuxt-app <项目名>

选项

image.png

运行项目： npm run dev

路由

路由生成