必要条件
コアとなるのはレンダラーで、最も基本的なレンダリング機能を提供します。 これを使えば、マイクロフロントエンド、マイクロサービス、リモートコンポーネント、ファーストスクリーンレンダリングを実装でき、さらにreactやEjsなどと連携することもできます。
どのような方とコラボレーションできますか？
従来のバックエンド・レンダラーでSEO対策が必要だが、一部のレイアウトやページでvueを導入したい場合は、renderer.renderjson()で十分です。レンダリング結果をバックエンド・レンダリングのテンプレート・エンジンに渡します。
ミドルオフィスとバックオフィスの業務システムを1つのプロジェクトにまとめ、業務ごとにサービスを分けられるようにしたいのであれば、``以下のようにすれば十分です。
マイクロフロントエンド、マイクロサービスをやりたいのであれば、レンダラーにその機能が備わっているので、ツール機能として使うことができ、HTTPやRPCなど様々なプロトコルでサービスにアクセスし、レンダリングに使うことができます。
レンダラーの作成
開発環境
初めてプロジェクトを作成する場合、プログラムは自動的にプロジェクトのルートディレクトリにvueのベーステンプレートを作成します。
実際の開発環境では、静的なリソースファイルやホットアップデートも必要なため、ウォッチオブジェクトも対応するミドルウェアを使用するように提供し、Expressフレームワークを使用する場合は、直接
Koaや他のフレームワークを使う場合は、対応するフレームワークにミドルウェアのレイヤーをラップして使う必要があります。
本番環境
開発が完了した後、本番環境をリリースする必要があり、常に事前にコードをコンパイルする必要があるので、ユーザーがアクセスすると、すぐに、すぐにレンダリングすることができますので、最初のステップは、最初にコードをコンパイルする必要があります。
さもないと、コンパイルされたコードは開発モードになり、実行時のパフォーマンスが非常に悪くなります。 :::
NODE_ENV=production ts-node index.ts
上記のcompileコマンドを実行すると、コンパイルされたコードが格納されたdistディレクトリが作成されます。コンパイルされた出力のアドレスやアプリケーションの名前を変更したい場合は、ここをクリックしてください。
コードがビルドされれば、本番環境で直接レンダラーを作成できます。
本番環境では、静的リソースは、コンテンツハッシュ生成されたファイル名に基づいているので、ここで静的ディレクトリを設定すると、強力なキャッシュを設定することができます。
レンダラの使用
この時点で、開発環境と本番環境の両方がレンダラーを手に入れました。
レンダリング方法
renderer.render().then((result) => {
console.log(result.data);
});
デフォルトでは、以下に相当します。
renderer.render({ url: '/', mode: 'ssr-html' }).then((result) => {
console.log(result.data);
});
レンダリング メソッドのオプションについては、ここをクリックして、renderer.render メソッドについて学んでください。renderer.render メソッドはレンダラーの最下位のメソッドで、以下の機能がラップされています。
レンダリングミドルウェア
もしあなたのビジネスが比較的単純なものであれば、 ミドルウェアを通して直接開発することができます。ミドルウェアは単なるシンプルな SSR ミドルウェアです。 ::: 警告 SSRのレンダリングに失敗した場合、ミドルウェアはCSRへのダウングレードを手助けしてくれません :::.
app.use(renderer.renderMiddleware);
htmlのレンダリング
const result = await renderer.renderhtml();console.log(result);
jsONのレンダリング
const result = await renderer.renderjson();console.log(result);
劣化レンダリング
よりよいユーザーエクスペリエンスのために、SSRレンダリングが失敗した場合、レンダリングをCSRモードにダウングレードし、レンダリングされたメソッドをレイヤーで囲み、エラーメッセージを表示することができます。
いくつかの監視ツールでは、電子メールやSMSにプッシュ通知することもできます。
const render = (options: RenderOptions = {}) => {
return renderer.render(options).catch((err: Error) => {
// レンダリング失敗のエラーメッセージを表示する
console.error(err);
const mode: RenderMode = options.mode || 'ssr-html';
return renderer.render({
...options,
mode: mode.indexOf('html') ? 'csr-html' : 'csr-json'
});
});
};
const result = await render();
console.log(result.data);
ルーティングの使用
render関数を呼び出すときには、レンダリングするアドレスとルートのモードを渡します。リモートのコンポーネントを使用する場合、このコンポーネントがヒストリーモードでレンダリングされるのはあまり好ましくないかもしれませんし、抽象モードでレンダリングされるかもしれません。
const result = await render({ url: '/', state: { routerMode: 'history' } });
console.log(result.data);
この問題を回避するには、genesis-appルートを使用します。
router.ts
npm install vue-router
importvue from 'vue';
import Router, { RouterMode } from 'vue-router';
Vue.use(Router);
export const createRouter = (mode: RouterMode = 'history') => {
return new Router({
mode: mode,
routes: [
// ルーティングを設定する
]
});
};
entry-server.ts
サーバー側エントリーファイルの変更
import { RenderContext } from '@fmfe/genesis-core';
import Vue from 'vue';
import App from './app.vue';
import { createRouter } from './router';
export default async (renderContext: RenderContext): Promise<Vue> => {
// 渡されたルーティング・パターンを読む
const mode = renderContext.data.state.routerMode;
// ルートを作成する
const router = await createRouter(mode);
// レンダリング用のアドレスを設定する
await router.push(renderContext.data.url);
// Vueインスタンスを作成する
return new Vue({
// ルートオブジェクトを渡す
router,
renderContext,
render(h) {
return h(App);
}
});
};
entry-client.ts
変更されたクライアント入力ファイル
import { ClientOptions } from '@fmfe/genesis-core';
import Vue from 'vue';
import App from './app.vue';
import { createRouter } from './router';
export default async (clientOptions: ClientOptions): Promise<Vue> => {
// サーバーサイドから送られたルートパターンを読む
const mode = clientOptions.state.routerMode;
// ルートを作成する
const router = await createRouter(mode);
// レンダリング用のアドレスを設定する
await router.push(clientOptions.url);
// Vueインスタンスを作成する
return new Vue({
// ルートオブジェクトを渡す
router,
clientOptions,
render(h) {
return h(App);
}
});
};
app.vue
ルーティングレンダリングをサポートするようにビューファイルを修正しました。
<template>
<div>
<h2>こんにちは！</h2>
<p v-if="show" @click="close">
{{ installed ? 'クライアント側に正常にインストールされたはずなので、クリックして閉じる。!' : 'インストールされていない }}
</p>
<router-view />
</div>
</template>
この記事は終わりです。
