使用vite搭建ssr活动页架构的实现_vue.js_

前言

最近接了个需求，重构公司的活动页项目。要实现：

• SEO良好
• MPA
• 启动速度快，构建速度快
• 前端工程化
• 浏览器兼容至少IE11

基于这些需求，我选择了 vite + react + vite-plugin-ssr

文章前面是ssr入门，老手请随意跳过，看最后即可

入门SSR

什么是SSR

术语

• ssr，全名 server side render，服务端渲染
• csr，全名 client side render，客户端渲染
• spa，全名 single page application，单页面应用
• mpa，全名 multi page application，多页面应用

ssr的历史

我的学习习惯是，不论学什么，先去了解它的历史背景。存在即合理，了解到为什么产生一个技术，能让我更容易去理解这门技术

最初的网页渲染，前端三剑客：html + css + js，放在服务器上，静态部署就可以供用户访问了。

后来随着网页复杂度上升，出现了jsp/ejs等等一系列模板语法，在服务端获取到数据后，把数据渲染到模板中，最后生成html返回给客户端，这是最原始的ssr。

随着前端框架的诞生（ng/react/vue），越来越多同学开始使用框架开发web，这些前端框架的出现使得前后端开发解耦（csr的情况下），前端同学可以更充分的利用前端工程化等等新技术来健壮前端项目。而这种完全解耦的方式也带来了一些问题，比如非常不友好的SEO

csr的缺点

让我们打开一个SPA网页（使用脚手架默认方式搭建），右键查看网页源代码

第一个问题：SEO极度不友好。 网页里面根本没有内容。爬虫最喜欢这种网页了，看一眼就走。

SPA的工作方式就是使用js来动态渲染html，压力全部给到了客户端（浏览器）这边，正是因为这个，第二个问题也出现了：首屏的加载速度较慢

为什么ssr的需求再次出现

为了更好的SEO，为了更快的加载速度（服务端生成了首页静态页面，客户端可以直接展示，随后再用JS动态渲染）

前端开发使用react/vue，可以熟练开发网页。而cra/vue-cli脚手架创建出来的模板默认是SPA。

那么应该如何实现 “既要，还要”呢（前端框架/seo我全都要）

如何实现基础ssr

基于上面的问题，我们希望实现：

• 查看网页源代码时，展示网页的内容

既然需要服务端渲染，服务端用来执行vue/react这种js框架，那第一反应就是用nodejs来做服务端渲染，因为nodejs天然执行js代码

客户端的话，用vue来做（react也行，只不过最近在熟悉vue3），vue3的话，体积比react更小，toC网站更好一些。react18针对ssr出了新api，开发者可以使用 React.lazy 和 suspense 实现懒加载，也提供了很好的用户体验：https://github.com/reactwg/react-18/discussions/37

下面是基础的ssr例子

以下例子 请注意：客户端使用的是esm规范，服务端使用的是cjs

如果希望统一使用esm，可以使用 tsx 执行node脚本 或修改package.json => type: "module"

创建服务端

const express = require('express') const app = express() app.get('*', (req, res) => { res.send('Hello World') }) app.listen(4000, () => { console.log('Server running at http://localhost:4000'); }) 

启动服务后，打开浏览器 http:localhost:4000，即可看到内容

渲染vue

服务端有了，但是是返回的string，我们想用vue来开发，尝试返回一个vue组件

vue3提供了服务端渲染组件的方法，在 vue/server-renderer下

const express = require('express') const { renderToString } = require('vue/server-renderer') const { createSSRApp } = require('vue') const app = express() app.get('*', (req, res) => { const vue = createSSRApp({ data: () => ({ count: 1 }), template: `{{ count }}`, }) renderToString(vue).then((html) => { res.send(` 
${html}
 `) }) }) app.listen(4000, () => { console.log('Server running at http://localhost:4000') }) 

此时打开页面，可以看到button了，但是此时页面是静态的，因为这个页面在服务端已经渲染好了，但在客户端没有注入vue

右键查看网页源代码，可以看到button元素

客户端渲染

我们希望button的交互可以动起来，此时需要客户端来做渲染了

const { createSSRApp } = require('vue') const vue = createSSRApp({ data: () => ({ count: 1 }), template: `{{ count }}`, }) vue.mount('#app') 

这段代码是否很眼熟，其实基本上跟服务端渲染返回的内容是一样的。所以ssr的本质是服务端渲染静态html+客户端渲染js

此外，为了在浏览器中加载客户端文件，我们还需要：

• 在 server.js中添加 server.use(express.static('.')) 来托管客户端文件。这里要注意js执行顺序
• 将 添加到 HTML 外壳以加载客户端入口文件
• 通过在 HTML 外壳中添加 Import Map 以支持在浏览器中使用 import * from 'vue'

const express = require('express') const { renderToString } = require('vue/server-renderer') const { createSSRApp } = require('vue') const app = express() app.get('/', (req, res) => { const vue = createSSRApp({ data: () => ({ count: 1 }), template: `{{ count }}`, }) renderToString(vue).then((html) => { res.send(` 
${html}
 `) }) }) app.use(express.static('.')) app.listen(4000, () => { console.log('Server running at http://localhost:4000') }) 

此时打开本地地址，可以看到点击button数字变化了

以上是最简单的ssr，在vue官网上可以找到这个例子。

我们甚至没有去考虑前端的路由，状态管理 等等。一个完整的ssr还需要一系列构建。

网页路由

ssr的网页路由有两种方式

• 服务端路由
• 客户端路由

服务端路由

服务端路由，就是利用 web框架的路由能力，匹配到某个路由时，返回对应的html代码，并且加载相应的客户端代码，比如：

import express from 'express' const router = express.Router() router.get('/some-page', (req, res) => { // 返回 some-page 的html res.send(`
要渲染的html字符串
`) }) 

服务端路由跳转直接使用 a标签即可

客户端路由

客户端路由的话，就要用到前端框架对应的路由库，vue-router / react-router 等

可以参照官方例子做

比较两种方式

服务端路由适合做页面零碎的项目，如活动页，每次跳转路由会刷新整个页面

客户端路由适合做页面之间交互强的项目，如产品页，跳转路由不会刷新页面

使用vite做ssr

vue官方推荐了几个做ssr的例子，包括 Nuxt/ Quasar这种重框架，也有 vite的轻框架。为了细粒度把控项目，我使用了 vite+ vite-plugin-ssr的方案来做

vite-plugin-ssr

Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.

类似 Next/Nuxt 但是只做一件事并把它做好 的vite插件

这个插件的文档写得非常详细，而且github上有许多例子。

插件的具体功能我不赘述，各位可看官方文档，我在这里讲一下这个插件(v0.3x)的约定式路由的工作原理。以下 vite-plugin-ssr 简称为 vps

vps的约定式路由

vps推荐使用文件夹名称作为路由，这种方式也是最方便的。活动页不存在页面之间的交互，所以我选择的默认方式。

vps规定了一系列文件命名，作为开发/构建遍历的条件。以下4种命名会被vps收集，每种文件有其独特的作用。我们不要随意以page.*** 来命名文件

// Vite resolves globs with micromatch: https://github.com/micromatch/micromatch // Pattern `*([a-zA-Z0-9])` is an Extglob: https://github.com/micromatch/micromatch#extglobs export const pageFiles = { //@ts-ignore '.page': import.meta.glob('/**/*.page.*([a-zA-Z0-9])'), //@ts-ignore '.page.client': import.meta.glob('/**/*.page.client.*([a-zA-Z0-9])'), //@ts-ignore '.page.server': import.meta.glob('/**/*.page.server.*([a-zA-Z0-9])'), //@ts-ignore '.page.route': import
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：js实现模态框拖拽_javascript技巧_
                                                                
下一篇：前端变量函数命名规则总结_基础知识_