反応するイオンSSR:アドベンチャー

なぜ

反応はUIのための素晴らしいライブラリであり、簡単にUISを構築し、大幅に開発時間を短縮します.イオンはまた、クロスプラットフォームのハイブリッドアプリを開発するための素晴らしいライブラリです.イオンは簡単に反応と統合することができます.実際の反応として実際にイオンチームによって公式にサポートされています.

それはすべての花やバラではない。

しかし、キャッチがあります反応はJSであなたのUIを書くjsライブラリです.これはブラウザでHTMLが生成されることを意味します.これはあなたのウェブサイトをインデックスするクローラのための理想的な経験よりも少ないにつながる.

冒険

アプローチ1：Nodejs環境におけるReactdomserverの使用

反応のためのSSRを有効にする標準的な方法.JSアプリは、サーバー上でReactDOMServerを使用して、クライアントでhydrate()とRender ()メソッドを置き換えることです.そのため、アプリケーションがブラウザに提供されたときにアプリケーションが再レンダリングされません.
しかし、イオン成分がステンシルを使用するという問題がある.ReactDOMServerでサポートされていないWebコンポーネントを使用するJS.それで、我々はもう一つの解決を必要とします.
例:

import express from "express";
import ReactDOMServer from "react-dom/server";
import { App } from "./App";

const app = express();
app.use(express.static(STATIC_ASSETS_DIR));

app.get("*", (req, res) => {
  const appHtml = ReactDOMServer.renderToString(<App />);
  // Assume that we have an html template
  const html = htmlTemplate.replace("^_^__APP_SHOULD_BE_HERE__^_^", appHtml);
  res.send(html);
});

アプローチ2 :次を使う。js

ほとんどの場合、このアプローチは動作します.次のように動作します.@ionic/reactを使用する代わりに、@ionic/coreを使用する
反応コンポーネントを使用する代わりに

(例えば、<IonHeader />)ウェブコンポーネント(例えば<ion-header />)

を使用する

を呼び出すことによってウェブコンポーネントを初期化する

およびそれはあなたのプロジェクトを次の. jsを使用するように設定したと仮定します.スターターレポのために、このレポmoonbase-vercel-ionicをチェックしてください.

しかし、当時の私たちのコードベースはdefineCustomeElementsでサポートされていないいくつかのコンポーネントを持っていました.それで、我々はこのアプローチを使用できませんでした.

アプローチ3：ナイフを銃に持ってくる

何かで動作する最後のアプローチはブラウザを使うことです.ブラウザはWebコンポーネントをサポートしていますが、特定のライブラリに制限されません.それで、私は、ノードを提供する図書館であるPitpeteerを使いました.クロームとFirefoxを制御するためのJS API.
それで、我々の最終的なワークフローは以下の通りです:

クライアントは、サーバ

にGET要求を送ります

サーバは、必要なリソースがページか静的資産かどうかチェックします.

静的な資産であるならば、明示的にそれを提供してください、そして、nginxにファイルを圧縮することとともにキャッシュ・ヘッダーを加えさせてください.
それ以外の場合は、ページが既にレンダリングされているかどうかを確認します.

それがキャッシュにあるならば、それは通常の静的資産としてそれに役立っています.

そうでなければ、PhilippeerはページURIをロードします.

ページがロードされるのを待ちます.

PitpeteerからページのHTMLを取得し、キャッシュに保存します.

HTMLを送信します.

これはノードで記述できます.以下のようにして、

const app = express();

// Static files handler
app.get("*.*", (req, res) => res.sendFile(req.url));

// Dynamic Page handler
app.get("*", async (req, res) => {
  if (cache.has(req.url)) {
    res.send(cache.get(req.url));
    return;
  }
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`http://localhost:${CLIENT_PORT}`, { waitUntil: "networkidle0" });
  const html = await page.content();
  res.send(html);
  cache.put(req.url, html);
  await browser.close();
});

app.listen(SERVER_PORT);

// React Server

app.use(express.static(STATIC_ASSETS_DIR));

app.get("*", (_, res) => res.sendFile("index.html"));

app.listen(CLIENT_PORT);

この例では、クライアント(すなわち、ユーザのブラウザー)がキャッシュを要求して、キャッシュを処理して、静的資産を提供している間、2つのサーバーを使用したことに注意してください.一方、もう一方は、Pitpeteerが接続して、アプリケーションをロードするためです.
これは、高トラフィックのウェブサイトのための重いインフラストラクチャを必要とするので、これは最高のソリューションではありません.

This article was originally posted on my own blog so if you find that it has been copied, don't worry I copied it from my self.