多作な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中に呼び出されないため、子コンポーネントのレンダリングは、クライアントでレンダリングされるまで行われません。 エレガントなソリューションはどうですか?