使用 vue-no-ssr 隐藏无法使用 SSR 的 Vue 组件

富有成效的自我(LINK0)又有了他最新的超级有用的,超小小的Vue.js实用程序。 vue-no-ssr阻止Vue试图在服务器上(LINK1)渲染不起作用的组件,同时允许他们继续在客户端上渲染。

我实际上已经遇到过这种问题不止一次,并提出了一些黑客和尴尬的解决方案。

安装

通过 Yarn 或 NPM 安装 vue-no-ssr。

1# Yarn
2$ yarn add vue-no-ssr
3
4# NPM
5$ npm install vue-no-ssr --save

使用

现在,只需将在服务器上不工作的任何组件包装到No-ssr组件中。

 1<template>
 2  <div>
 3    <server-component>I work fine on the server!</server-component>
 4    <no-ssr placeholder="You can even add a placeholder to be rendered instead!">
 5      <client-component>I only work on the client. :( </client-component>
 6    </no-ssr>
 7  </div>
 8</template>
 9
10<script>
11import NoSSR from 'vue-no-ssr';
12
13export default {
14  components: {
15    'no-ssr': NoSSR
16  }
17}
18</script>

现在,服务器甚至不会试图渲染客户端组件,但它会渲染到客户端上。

vue-no-ssr 的代码本身就是 itty-bitty (< 500B)。基本上,它避免在 mounted()链接被调用之前渲染儿童组件。