面试算法题
用与渲染或服务端渲染
现在我们的项目大多数都是spa
(单页面应用),感觉单页面应用比之前的模板渲染要好很多,首先单页面应用是前后端分离,架构清晰,前端负责交互逻辑,后端负责数据,前后端单独开发,独立测试。
但是,SPA
不利于SEO
(搜索引擎优化)。
那么为什么要做SEO
?做SEO
有什么好处?简单来说SEO
是一种利用技术手段提升网站在搜索引擎之中的排名的方式,让搜索引擎更为信任网站,通过提升排名获得更多网站流量。
目前大部分的Vue项目本质是 SPA
应用,React、Angular
也都是SPA
应用。SPA
应用广泛用于对SEO
要求不高的场景中。
在我们开发的过程中,我们有 SEO
的需求,我们需要搜索引擎更多地抓取到我们的项目内容,此时我们需要SSR
。SSR
保证用户尽快看到基本的内容,也使得用户体验性更好。
SSR
: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。比如JSP、PHP、JavaWeb
等都是SSR
架构,也就是服务端取出数据和模板组合生成 html 输出给前端,前端发生请求时,重新向服务端请求 html
资源,路由也由服务端来控制。
预渲染:prerender-spa-plugin插件
prerender-spa-plugin
是一个webpack
的插件,在webpack
的配置文件中配置该插件即可,在vue
程序上有广泛的应用。
这种实现方式并不叫 SSR
,而是预渲染。不过效果上是一样的,甚至某种程度上来说可能要比 SSR
更好。相比官方提供的 SSR
繁琐配置,prerender
配置更简单快捷,如无特殊要求只需在 webpack
中加一个 plugin
的配置。
这种方法简单、易上手、无需配置就能满足基本的 SEO
要求,但是不适合频繁变动的页面,因为预渲染只是类似于快照的概念。适用于静态页面,如博客、产品页面等不需要频繁更新的内容。它能够在构建时生成静态文件,因此加载速度非常快,尤其是在 CDN
上托管时效果更佳。
基于vue的预渲染
1、安装预渲染插件:
对于 Vite
,你可以使用 vite-plugin-ssr
插件来实现预渲染。首先,需要安装该插件:
1 | npm install vite-plugin-ssr --save-dev |
对于 Webpack
,你可以使用 prerender-spa-plugin
插件
1 | npm install prerender-spa-plugin --save-dev |
2、配置预渲染插件和构建项目:
基于
vite
在vite.config.js
中配置预渲染:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { ssr } from 'vite-plugin-ssr/plugin';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
ssr({
prerender: true, // 启用预渲染
partial: true, // 只预渲染部分页面
routes: ['/home'], // 指定预渲染的路由
}),
],
});使用
npm run build
构建项目,预渲染页面将生成在dist/client
目录下
将dist/client
目录下的内容部署到静态文件服务器上。对于非预渲染的页面,你需要一个Node.js
服务器来处理动态路由。基于
webpack
在Webpack
中,可以在vue.config.js
或webpack.config.js
中配置prerender-spa-plugin:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
plugin: {
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/home'], // 只预渲染首页
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: true,
renderAfterDocumentEvent: 'render-event'
})
})
}
};触发预渲染事件: 在
Vue
应用中,可能需要在特定的生命周期钩子中触发一个事件,以告诉预渲染插件何时开始渲染页面。例如,在mounted
钩子中触发一个事件:1
2
3
4
5
6
7
8new Vue({
el: '#app',
router,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'));
}
});构建项目:
npm run build
SSR
1、官方提供的轮子在node
端做SSR
,vue-SSR,上手复杂。
Nuxt.js
Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架,不需要自己搭建一套 SSR 程序,而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。
是什么
1、提供了前端和后端的全栈开发框架,前端基于vue,后端基于nitro
2、单页应用是客户端渲染,多页应用是服务端渲染