SSR対応のVueコンポーネントをvue-no-ssrで非表示にする
提供:Dev Guides
多作な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中に呼び出されないため、子コンポーネントのレンダリングは、クライアントでレンダリングされるまで行われません。 エレガントなソリューションはどうですか?