web-dev-qa-db-ja.com

SSRとPWAの関係

PWA（プログレッシブウェブアプリ）でSSR（サーバー側レンダリング）を実行するにはどうすればよいですか？

私が理解していることから、

SSR

SSRランタイムはページを読み込み、ページにデータを読み込むために必要なスクリプトを実行します。次に、レンダリングされたHTMLを返します。これは、JavaScriptを実行しないWebクローラーや、スクリプトなしのブラウザーでは重要です。少なくとも第一印象は使えるでしょう。

PWA

特に、PWAにはシェルが必要です。シェルはキャッシュされ、データはその後に送信されます。つまり、ユーザーがオフラインであっても、シェルは読み込まれます。

？

では、データを事前にレンダリングしている場合、シェルをデータとは別にキャッシュするにはどうすればよいでしょうか。

progressive-web-appsserver-side-renderingpwa
14
Amanuel Nega

事前レンダリングされたSSRビューからのシェルのみを初期データとともにキャッシュする場合は、2つのビューを提供する必要があります。

  1. /view-url SSRからのデータ
  2. /view-url?shellデータなしのシェルバージョンのみ（ロジックをurl-queryからリクエストヘッダーなどに変更できます）。

ユーザーが初めて/view-urlを入力すると、バージョンを送信し、Service Worker /view-url?shellにキャッシュします。ユーザーが/view-urlに戻ってきたら、次のようにしてService Workerキャッシュから/view-url?shellを送信します。

const CACHE_NAME = 'cache-token';
const staticUrlsToCache = ['/style.css', '/script.js', '/logo.png'];
const shellUrlsToCache = ['/view-url'];
const urlsToCache = [
    ...staticUrlsToCache,
    shellUrlsToCache.map(url => `${url}?shell`),
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    let request = event.request;

    const shellUrl = shellUrlsToCache.find(url => request.url.endsWith(url));
    if (shellUrl) {
        // here is real magic!
        request = new Request(`${shellUrl}?shell`);
    }

    event.respondWith(
        caches.match(request).then(response => response || fetch(request))
    );
});

ここで重要なのは、Service Workerで元のリクエスト/view-urlを/view-url?shellに変更することです。

この手法の詳細を読みたい場合は、この問題について記事を書きました PWAと同形レンダリング（SSR）を組み合わせる方法は？

4
Everettss

戦略は、SSRを使用して最初のページの読み込みと、キャッシュされたアプリシェルを使用して以降のすべてのページナビゲーションを提供することです。 SSRはページごとに異なるhtmlを返すため、/app-Shellのような特別なパスを指定して、クライアント側レンダリング用のスケルトンhtmlをフェッチできます。

詳細については、私の記事を参照してください サーバー側でレンダリングされる方法React SPAをPWAに変換する方法 。

0
Kanqiang Sun

シェルを別のフォルダーに保持し、レンダリングされたページを別のフォルダーに保持できるので、シェルは 別のスコープ を持ち、キャッシュするものとキャッシュしないものをService Workerで設定できます。

0
Anand