面试算法题

用与渲染或服务端渲染

现在我们的项目大多数都是spa(单页面应用),感觉单页面应用比之前的模板渲染要好很多,首先单页面应用是前后端分离,架构清晰,前端负责交互逻辑,后端负责数据,前后端单独开发,独立测试。

但是,SPA不利于SEO(搜索引擎优化)。

那么为什么要做SEO?做SEO有什么好处?简单来说SEO是一种利用技术手段提升网站在搜索引擎之中的排名的方式,让搜索引擎更为信任网站,通过提升排名获得更多网站流量。

目前大部分的Vue项目本质是 SPA 应用,React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。

在我们开发的过程中,我们有 SEO 的需求,我们需要搜索引擎更多地抓取到我们的项目内容,此时我们需要SSRSSR保证用户尽快看到基本的内容,也使得用户体验性更好。

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
    15
    import { 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.jswebpack.config.js 中配置 prerender-spa-plugin:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const 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
    8
    new Vue({
    el: '#app',
    router,
    render: h => h(App),
    mounted () {
    document.dispatchEvent(new Event('render-event'));
    }
    });

    构建项目:npm run build

SSR

1、官方提供的轮子在node端做SSRvue-SSR,上手复杂。

Nuxt.js

Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架,不需要自己搭建一套 SSR 程序,而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。

学习视频

是什么

1、提供了前端和后端的全栈开发框架,前端基于vue,后端基于nitro
2、单页应用是客户端渲染,多页应用是服务端渲染

图 0

图 1