角度のためのインクリメンタルな静的再生

あなたがこれを読んでいるならば、あなたはおそらくSSR(サーバー側のレンダリング)、SSG(静的サイト生成)とCSR(クライアント側のレンダリング)を聞いたことがあります.
それらの概要

SSR :サーバー側のレンダリングで、ページが要求されるたびに、それはサーバーレンダリングされます(おそらくAPI呼び出しをします)、そして、それはクライアントに提供されます.

SSG :静的サイト生成で、ページのレンダリングはビルド時に行われ、ページが要求されるとクライアントは生成された静的なファイルをそのルートに提供します.

CSR :クライアント側のレンダリングを行うと、ページ(およびそのページに必要なAPI呼び出し)のレンダリングは、実行時(クライアントデバイス上)で発生します.

ISRとは何が問題を解決するのですか？

例として電子商取引サイトを取りましょう.この電子商取引サイトは何千ものクライアントと何千もの製品を持っています、そして、各々の製品のために、詳細ページがあります.
それが電子商取引サイトであるので、CrawlersがSEOのために必要とされる内容を読むために、それはサーバー側でレンダリングされなければなりません(おそらく角度ユニバーサル).
今、その製品の詳細ページへの直接の要求が行われるたびに、サーバーはバックエンドからデータを取得するためにAPI呼び出しを行う必要がありますし、HTMLをレンダリングし、クライアントにページを提供します.
このプロセスは、クライアントがそのページを開くたびに発生します.
今すぐ何千人ものユーザーが同時にその製品ページを開く想像してください.おそらくサーバが吹き飛ばされ、サーバリソースも増加する必要があります.
サーバーは、同じページを提供するために、すべてのクライアントに同じ作業を行う必要があります.

どのように、SSGはこれまでに助けましたか？

静的サイト生成では、ビルド時に各製品の詳細ページを生成し、一度だけデータを取得し、静的ファイルをユーザーに提供します.
そして、私たちが静的ファイルだけを提供するので、これが実行時にサーバー資源で大いに助けたと言いましょう、そして、それはすべてです.
これは、製品の詳細を変更する必要があり、最初からすべての作業を行うまで、罰金だった.サイトをビルドし、すべてのページを生成し、再度展開します.すべては、ちょうど製品の価格を変えることです.100時間ごとに1時間の価格を変更してください.何回、我々は建物を行うには、生成し、展開する必要がありますか?

これは、ISRが遊びに来るところです！

ISRは1つにSSRとSSGのイデオロギーを組み合わせたものです.
ISRで、私たちは、それが要求される最初のサーバーにページをレンダリングして、キャッシュでそれを保存して、そのページを要求する他のすべてのユーザーにそのキャッシュされたページを提供します.
キャッシュリフレッシュのために,時間間隔または需要再利用を用いる.

ISR is like SSG, but at runtime!

良い？角でこれをしましょう！

開始するには、まず角度のユニバーサルインストールと設定をするアプリケーションが必要です.
それから、我々はngx-isr パッケージ、私によって作成されたライブラリ😁.
NGXのISRは、簡単に使用できると拡張可能なAPI(次のJS)に触発されたすべてのISRのものを管理するのに役立ちます.npm install ngx-isrインストール後、いくつかの小さな設定を行う必要があります.

サーバ内のisrhandlerインスタンスを作成します.TS

import { ISRHandler } from 'ngx-isr';

const isr = new ISRHandler({
  indexHtml, // <-- Is the path to the index.html
  invalidateSecretToken: 'MY_TOKEN', // replace with env secret key
  enableLogging: !environment.production
});

角のデフォルトサーバーサイドレンダリングをISRレンダリングで置き換えます.

置換

server.get('*',
  (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  }
);

このコードで

server.get('*',
  // Serve page if it exists in cache
  async (req, res, next) => await isr.serveFromCache(req, res, next),
  // Server side render the page and add to cache if needed
  async (req, res, next) => await isr.render(req, res, next),
);

Note: ISRHandler provides APP_BASE_HREF by default. And if you want to pass providers into the methods of ISRHandler, you will also have to provide the APP_BASE_HREF token.

無効URLハンドラを追加する

server.get(
  "/api/invalidate", 
  async (req, res) => await isr.invalidate(req, res)
);

に追加しました

import { NgxIsrModule } from 'ngx-isr'; // <-- Import module

@NgModule({
  imports: [
    ...
    NgxIsrModule  // <-- Use it in module imports
  ]
})
export class AppServerModule {}

When importing the module, NgxIsrService will be initialized and will start to listen to route changes, only on the server-side, so the browser bundle won't contain any extra code.

それでした

使い方は？

追加するrevalidate ルートデータのキーとそれです.

{
  path: "example",
  component: ExampleComponent,
  data: { revalidate: 5 }
}

NOTE: Routes that don’t have the revalidate key in data won’t be handled by ISR. They will fall back to Angular default server-side rendering pipeline.

ページを再生成するには、getリクエストを再実行する必要があります.このように:

GET /api/invalidate?secret=MY_TOKEN&urlToInvalidate=/example

どうやって動くの？

を使用してrevalidate 経路データのキー
ISRハンドラーがいつ特定のルートを再生するかを知るために使用するでしょう.
オプション

何も指定しないでください:ルートはキャッシュされません、そして、常にサーバーレンダリングされます.( SSRのように)

0 :最初のサーブはサーバーでレンダリングされ、他のすべてのものはキャッシュから提供されます.( SSGと同様).

0以上(元:5):最初のサーブサーバーがレンダリングされ、キャッシュは5秒ごとに(最後のリクエストの後)再生されます.

高度な例

const routes: Routes = [
  {
    path: "one",
    component: PageOneComponent,
  },
  {
    path: "two",
    component: PageTwoComponent,
    data: { revalidate: 5 },
  },
  {
    path: "three",
    component: PageThreeComponent,
    data: { revalidate: 0 },
  }
];

パスone : これはキャッシュされませんし、常にユーザーに提供される前にレンダリングされるサーバーになります.

パスtwo : 最初のリクエストはサーバでレンダリングされ、キャッシュされます.2番目の要求では、最初のリクエストに保存されたキャッシュから提供されます.後にキャッシュを再生成するために、URLを再生キューに追加します5 秒.3番目の要求では、再生が終了した場合、ユーザは再生されたページにサービスを提供されます.

パスthree : 最初のリクエストはサーバでレンダリングされ、キャッシュされます.最初の要求の後、他のすべてのものはキャッシュから出されます.したがって、キャッシュが自動的に更新されることはありません.キャッシュをリフレッシュする唯一の方法は、APIルートの要求/無効化を行うことです.

結果

ページにサービスを提供しますnpm run dev:ssr .
オープン検査要素.
とチェックLast updated 時刻と日付は、あなたが提供した再検証キーに基づいて変更されます.

ISRの問題?
ソースコードを変更するたびに、再度ビルドして配置する必要があります.バックエンドからのデータが変更されたときのみ、ISRは役立ちます.
それでしたこの長いポストを読んでくれてありがとう!
閉じるこの動画はお気に入りから削除されています⭐ にGithub repository .
ライブラリがあなたやあなたのビジネスを支援する場合は、することができますbuy me a coffee 欲しいなら😊.