Vapperjs - 基于 Vue 的 SSR 框架

weixin_0010034

144人浏览 · 2022-08-09 07:42:08

weixin_0010034 · 2022-08-09 07:42:08 发布

如果你用Vue做同构项目,那么Nuxt和Quasar Framework是不错的选择。但是今天我要介绍一个基于Vue的新SSR框架:https://vapperjs.org/。

Vapper的特点

想必大部分人看到这篇文章的标题都会有一个疑问:为什么不直接使用 Nuxt 或者 Quasar Framework 之类的框架,而是创建一个轮子呢?接下来,我们将尝试通过介绍Vapper的特性来回答这些问题,看看Vapper有什么不同。

目标1:Vapper尽最大努力让SSR应用的开发体验更接近SPA

vapper 怎么能做到这一点?我们需要从几个方面考虑:

1.项目结构:

我们知道Nuxt是基于文件系统的路由,这意味着它在文件的组织方式上与传统的SPA应用程序有差距。您需要根据它们的约定编写页面(或组件)。但是,我们在开发SPA应用程序时没有这些限制,所以我们想要一个框架,可以让我们不受任何限制地组织文件,就像普通的SPA应用程序一样。

做到这一点并不难,因为Vue SSR的官方文档是这样教你的,所以Vapper只是在这个基础上的一个包装器。

2.数据预取:

如果您使用过Nuxt,那么您应该熟悉它提供的asyncData组件选项。需要在asyncData函数中进行数据预取,但是有一些限制,比如asyncData组件选项不能用于任何组件,只能用于路由组件(或pages),并且组件实例不可访问在asyncData函数内。

数据预取,简单理解就是请求数据,我们在开发SPA应用时没有“只在路由组件中请求数据”的限制,也不用担心无法访问组件实例。所以我们想要一个框架,可以让你摆脱这些精神负担,并尽最大努力让同构应用程序的数据预取更接近SPA应用程序。

Vapper让这一切成为可能。详情请阅读官方文档了解如何预取Vapper中的数据:Data Prefetch。

通过以上两点努力,我们几乎让SSR应用的开发体验更接近SPA应用的开发。

目标2:只负责必要的webpack配置

很多公司或团队基本上都在开发所谓的脚手架工具,但是团队开发的脚手架工具大多只有Vue CLI3,实现了1%的功能。事实上,在 Vue CLI3 现有的架构下,你可以完全实现任何业务特定场景的需求,而无需自己编写脚手架。

Vue CLI3 借鉴了 Poi 的架构思想。 Poi也是一款优秀的webpack管理工具,优秀的项目脚手架。所以我们希望有这样一个SSR框架,它只负责必要的webpack配置,也就是只负责SSR相关的webpack配置,其他的配置都分配给这些优秀的脚手架管理。这样做的好处是两方面的,即Vapper为这些脚手架提供了SSR能力,而这些webpack管理工具的能力变成了Vapper的能力,一石二鸟。

Vapper 中的一个概念是 Configer,它只是两个模块:

@vapper/configer-vue-cli
@ vapper / configer-poi

这使得将 Vapper 与这些出色的webpack管理工具结合成为可能,更重要的是,即使你不使用 Vue CLI3 或 Poi,你也可以编写自己的Configer以集成到自己的脚手架中,文档可以在这里阅读:写入配置器。

目标3:路由级别控制

什么是“路由级别控制”能力?为了便于理解,我贴了一张官网的图:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--jq6LsPBo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://vapperjs.org/assets/ img/spa-ssr-prerender.701eb249.png)

总之,我们希望访问不同的路由会根据需要进行不同的处理。例如,我们想在访问路由/home时应用服务端渲染(SSR);但访问路由/foo时直接向用户发送SPA资源;当访问路由/bar时,我们可以将预渲染的内容发送给客户端。

这样做的原因是因为有时候,并不是所有的页面我们都需要做SSR,而我们可以预渲染一些页面,这些都是提高服务性能的有效方法。

您可以在Vapper中轻松做到这一点。您可以通过在路由meta中指定ssr: true/false来选择打开或关闭SSR,例如:

new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/home',
      component: () => import('./components/Home.vue'),
      meta: {
        // Using SSR
        ssr: true
      }
    },
    {
      path: '/foo',
      component: () => import('./components/About.vue'),
      meta: {
        // Turn off SSR, and send SPA resources when users access /foo
        ssr: false
      }
    }
  ]
})

就是这么简单明了。同时,不得不提的一点是,如果所有路由都没有申请SSR,那么你的项目和申请SPA没什么区别。换句话说,如果你想将现有的SPA项目迁移到SSR项目,那么Vapper非常适合你。

预渲染要复杂一点,需要安装@vapper/plugin-prerender插件,然后在vapper.config.js中配置如下:

// vapper.config.js
module.exports = {
  plugins: [
    [
      '@vapper/plugin-prerender',
      {
        // This is the route to be prerendered
        routes: ['/foo']
      }
    ]
  ]
}

这样在构建阶段,vapper会预渲染/foo,生成html文件,在用户访问路由时直接发送给客户端。需要注意的是,预渲染只有开启了 SSR 的路由才支持,这是合理的。

目标 4:错误处理

Vapper让错误处理更加灵活,当错误发生时我们有两种选择:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xrtlfAHv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://vapperjs.org/assets/ img/错误处理.3a08fb6c.png)