从零开始使用 Koa2+Vue-SSR 开发博客前台(附上成品)

1,531 阅读3分钟

开始之前先附上我的成品项目地址(喜欢的话点个小星星):github.com/1912820899/…

开始教程之前需要先说明一下,由于博客前台之前使用SPA写的,现在拿来重构,所有本教程将不会借助vue-cli 和 nuxt.js来进行开发vue-ssr。

一.前置知识储备

1.webpack安装配置打包,还不懂的请先最少要看一遍官方文档,手动跟着敲一下:webpack.docschina.org/guides/

2.koa2 的理解与使用,不懂的看我博客分享的koa2视频,做一个入门:www.9cka.cn/nodejs

3.熟悉vue.js相信能看到这篇文章的,对vue.js已经不陌生了吧。

二.整体概括

1.vue-ssr的原理

786a415a-5fee-11e6-9c11-45a2cfdf085c

1.1 Source(自己编写的代码)

对于开发人员来说,Source指的是自己写的代码。对于webpack来说,Source指的就是需要让它来打包的一些资源。

普通的Vue-SPA区别:

普通Vue-SPA:入口文件一般情况下只需要一个app.js即可

Vue-SSR: 需要1个主入口(app.js)2个分入口(server.entry.js和client.entry.js)。为什么需要2个分入 口,介绍完原理之后,再做解释。

1.2 Webpack build

作用:webpack通过查找配置文件,对Source进行打包,打包后会生成vue-ssr-server-bundle.jsonvue-ssr-client-manifest.json和一系列通过编译器打包后的js,css等文件。bundle文件是什么东西,在配置webpakc的时候我会说明,现在你只要知道会生成两个bundle重要文件即可

1.3 Node Server (Koa2)

通过webpakc打包后会生成一个vue-ssr-server-bundle.json文件,server收到browser的页面请求之后,会调用ServerBundle文件,在服务器端运行整个程序 ,最后生成一个HTML字符串(即为“预取”数据),返回给Browser,也就是上图所说的Render过程,此时服务器端渲染已经完成。

1.4 Browser

浏览器端收到请求之后,会等待服务器端先返回HTML,返回成功后,Browser调用ClientBundle文件,运行整个程序,把html填充进去。

2. 关键点理解

2.1 服务端渲染只在首次请求时候进行

vue-ssr 是通过服务端发送渲染好的html代码返回给浏览器端,但是这个事情只发生在首次通过地址栏访问页面。一旦首次服务端渲染完成,那么接下来,程序就只是通过ajax来进行数据请求

2.2 需要生成2个分入口文件,一个服务端入口,一个浏览器端入口

因我服务器端和浏览器端所执行的代码不完全相同,首次渲染完成后,只需要浏览器端进行一些改变,比如路由变化,这些改变都是需要浏览器入口来完成的。

3. 注意事项

3.1 服务端需要单独的实例

在纯客户端应用程序 (client-only app) 中,每个用户会在他们各自的浏览器中使用新的应用程序实例。对于服务器端渲染,我们也希望如此:每个请求应该都是全新的、独立的应用程序实例,以便不会有交叉请求造成的状态污染

3.2 通用功能写在createdbeforeCreate

组件生命周期 服务器端只能使用createdbeforeCreate, 如果想要写一些服务器端和客户端都要同时拥有的功能,请写在createdbeforeCreate上。

3.3 不包含document或者window

由于服务端中没有documentwindow,所以如果用一些只支持浏览器端的代码或者插件,则会报错,最典型的就是document is undefined ,window is undefined

三.环境配置

1.初始化一个项目

npm init -y

2.安装vue vue-server-render

npm install vue vue-server-renderer -S

3.配置webpack4

  为什么需要webpack?

由于vue-server-render 需要通过webpack来打包生成Bundle Renderer (看完webpakc的就知道,Bundele Renderer就是json文件,里面控制着如何调用和调配代码,管理所有所需模块之间的交互,可以说是程序的一个地图)

3.1 安装webpack 和webpakc-cli

npm install webpack webpack-cli -S

3.2 配置webpack

未完待续哦。想要抢先看,请关注我的博客:www.9cka.cn/