vue SPA SSR

309 阅读1分钟

SPA

SPA的一个重要实现就是改变路由时,页面不刷新。 通常有两种方式:使用window.history对象或location.hash

  • window.history包含了浏览器的历史信息,有几种常用方法
    • history.back():与在浏览器点击后退按钮相同
    • history.forward():与在浏览器中点击按钮向前相同
    • history.go(n):接受一个整数作为参数,移动到该整数指定的页面。比如go(1)相当于forward(),go(-1)相当于back(),go(0)相当于刷新当前页面。

SSR

SSR主要解决两种问题:

  • SEO:搜索引擎优先爬取页面HTML结构,使用ssr时,服务端已经生成了和业务相关联的HTML,有利于seo
  • 首屏渲染:用户无需等待页面所有js加载完成就可以看到页面视图
如何实现

对于同构开发,使用webpack打包,需要解决两个问题:服务端首屏渲染和客户端激活 需要生成一个服务器bundle文件用于服务端首屏渲染 一个客户端bundle文件用于客户端激活

image.png

  • 路由配置

image.png

  • 主文件main.js

image.png

  • 服务端入口 src/entry-server.js

image.png

  • 客户端入口 entry-client.js

image.png