SSR対応のVueコンポーネントをvue-no-ssrで非表示にする

投稿日: 2022-04-20 2022-10-06
タグ: Vue.js

多作なegoistは、彼の最新の非常に便利で非常に小さなVue.jsユーティリティで再び登場します。 vue-no-ssr は、Vueがサーバーで機能しないコンポーネントをレンダリングしようとするのを防ぎ、クライアントでのレンダリングを継続できるようにします。

私は実際にこの種の問題に何度も遭遇し、いくつかのハックとその周りの厄介な解決策を思いついた。 vue-no-ssr は大幅な改善であり、以下に示すように非常に使いやすいです。

インストール

YarnまたはNPMを介してvue-no-ssrをインストールします。

# Yarn
$ yarn add vue-no-ssr

# NPM
$ npm install vue-no-ssr --save

使用法

ここで、サーバー上で機能しないコンポーネントを no-ssr 成分。

<template>
  <div>
    <server-component>I work fine on the server!</server-component>
    <no-ssr placeholder="You can even add a placeholder to be rendered instead!">
      <client-component>I only work on the client. :( </client-component>
    </no-ssr>
  </div>
</template>

<script>
import NoSSR from 'vue-no-ssr';

export default {
  components: {
    'no-ssr': NoSSR
  }
}
</script>

これで、サーバーはレンダリングを試みません。 client-component、ただし、クライアントでレンダリングされます。簡単-簡単！

The コードにとって vue-no-ssr それ自体はちっぽけです（<500B）。基本的には、 Mounted（）フックが呼び出されるまで、子コンポーネントのレンダリングを回避します。 Mounted（）フックはSSR中に呼び出されないため、子コンポーネントのレンダリングは、クライアントでレンダリングされるまで行われません。エレガントなソリューションはどうですか？

getdocs

13036