ハイドレートアプリ

ハイドレートアプリは同じコンポーネントのバンドルですが、NodeJSサーバーでハイドレートしてHTMLを生成できるようにコンパイルされています。これは、事前レンダリングが内部で使用するのと同じNodeJSアプリであり、Angular UniversalSSRがIonicに使用するものと同じです。ステンシルコンポーネントと同様に、ハイドレートアプリ自体は1つのフレームワークに制限されていません。

StencilはSSRまたは事前レンダリングにPuppeteerを使用しないことに注意してください。

ハイドレートアプリの使用方法

サーバー側レンダリング（SSR）は、事前レンダリングと同様の方法で実行できます。 --prerender CLIフラグを使用する代わりに、{type： 'dist-hydrate-script'}をstencil.config.jsに追加できます。これにより、ルートプロジェクトディレクトリに「ハイドレート」アプリが生成され、ノードサーバーでインポートして使用できるようになります。

コンポーネントライブラリを公開した後、次のようにハイドレートアプリをサーバーのコードにインポートできます。

import { hydrateDocument } from 'yourpackage/hydrate';

このアプリには、 hydrateDocumentとrenderToStringの2つの関数が付属しています。 hydrateDocumentの利点は、すでに解析されている既存のドキュメントを取得できることです。代わりに、 renderToString関数は生のhtml文字列を入力し、ドキュメントの解析を行います。

hydrateDocument：Webページを提供する前に、サーバーの応答ロジックの一部として hydrateDocumentを使用できます。 hydrateDocumentは、documentとconfigオブジェクトの2つの引数を取ります。この関数は、ハイドレイトされた結果でpromiseを返します。結果のhtmlは、返された結果の htmlプロパティから解析できます。

IonicAngularサーバーからの例

import { hydrateDocument } from 'yourpackage/hydrate';

export function hydrateComponents(doc) {
  return hydrateDocument(doc)
    .then((hydrateResults) => {
      // execute logic based on results
      console.log(hydrateResults.html);
      return hydrateResults;
    });
}

hydrateDocumentオプション

canonicalUrl - string
constrainTimeouts - bool
clientHydrateAnnotations - bool
cookie - string
direction - string
language - string
maxHydrateCount - number
referrer - string
removeScripts - bool
removeUnusedStyles - bool
resourcesUrl - string
timeout - number
title - string
url - string
userAgent - string

renderToString：ハイドレートアプリには、 HydrateResultsの約束を返すhtml文字列を渡すことができるrenderToString関数もあります。 2番目のパラメーターは、マークアップの出力を変更できる構成オブジェクトです。 hydrateDocumentと同様に、結果の文字列はhtmlプロパティから解析できます。

IonicCoreからの例

const results = await hydrate.renderToString(srcHtml, {
  prettyHtml: true,
  removeScripts: true
});

console.log(results.html);

renderToString Options

approximateLineWidth - number
prettyHtml - boolean
removeAttributeQuotes - boolean
removeBooleanAttributeQuotes - boolean
removeEmptyAttributes - boolean
removeHtmlComments - boolean
afterHydrate - boolean
beforeHydrate - boolean

Back

Submit an edit

ハイドレートアプリ