問題タブ [vue-ssr]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
vue.js - 非同期データを取得してサーバー側をレンダリングするコンポーネントを作成する方法は?
asyncData
ssr 環境で要求できるのはルーター コンポーネントのみであることがわかっています。サーバー側をレンダリングするためにいくつかの非同期データが必要です。ルーターコンポーネントではないためasyncData
、サーバー側のレンダリングには使用できません。
そのため、非同期APIを呼び出すためにフックを使用created
しましたが、コンポーネントフックは同期的であり、約束を待ちません。サーバー側で非同期データを取得するにはどうすればよいですか?
App.vue - メイン コンポーネント
Action.js
javascript - VueでSSRを利用する際の「Vue.use(plugin)」の呼び出し先
で初期化したいプラグイン (bootstrap-vue) がありますVue.use()
。現在、クライアント エントリ (内部router.onReady()
) で使用していますが、次の警告が表示されます。
クライアント側でレンダリングされた仮想 DOM ツリーが、サーバーでレンダリングされたコンテンツと一致しません。これは、不適切な HTML マークアップが原因である可能性があります。たとえば、ブロック レベルの要素が 内にネストされている
<p>
、または が欠落しているなど<tbody>
です。ハイドレーションのベイリングと完全なクライアント側レンダリングの実行。
サーバー側レンダリング (SSR) を使用していますが、プラグインの初期化を適切に呼び出す場所がわかりません。ありがとう!
vuejs2 - Vuejs asyncData 関数のネストされた Promise
最小限に煮詰めましょう。
ここには、サーバーからデータを取得する小さなコンポーネントがあります。このコンポーネントと他のコンポーネントとの違いは、2 つの AJAX 呼び出しを行う必要があることです。次から次へ!
これが完璧に機能するということは、すべてのリクエストが機能することです。しかし、何か問題が発生した場合、私は次のことを行います。
ブラウザでは完璧に動作します。つまり、「/404」にアクセスしますが、NodeJS ではこのメッセージが表示され続けます。
UnhandledPromiseRejectionWarning: 未処理のプロミス拒否。このエラーは、catch ブロックのない非同期関数内でスローしたか、.catch() で処理されなかった promise を拒否したことが原因で発生しました。(拒否 ID: 1)
誰かが似たようなことをしましたか?
vue.js - Vue-i18n - http リクエストからの動的ローカリゼーションに関する問題
アプリケーションに同梱するのではなく、言語を動的で管理しやすいものにしたいので、HTTP 呼び出しからローカリゼーションをロードしようとしています。
SSR サンプルと独自の実装を使用して回避策を実行しました。しかし、最初のレンダリングでは、言語はロードされません。ルートを変更すると、クライアント側のものが更新されます。
i18n.js
ルーター - router.beforeEach
Store アクション - ロケールをフェッチする
調査結果:
i18n はrouter.beforeEach
の後に初期化する必要がある場所の前に初期化していrouter.beforeEach
ます。