SSR

SSR运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回渲染的html。这对于无法运行javascript和无脚本浏览器的网页抓取工具非常重要。至少第一印象是可用的。

PWA

其中，PWA需要一个shell，它将被缓存，数据将在它之后。这意味着，即使用户处于离线状态，也会加载shell。

因此，如果我们预先渲染数据，那么如何将shell与数据分开？

Answer 1

如果您只想使用初始数据从预渲染的SSR视图中缓存外壳，则必须提供两个视图：

/view-url中包含来自SSR的数据
/view-url?shell仅具有shell版本，没有数据（您可以将逻辑从url-query更改为例如请求标头）。

当用户首次输入/view-url时，您将发送1.版本并缓存在Service Worker /view-url?shell中。当用户回到/view-url时，您可以通过以下操作将其从/view-url?shell发送给Service Worker缓存：

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！

如果您想了解有关此技术的更多信息，我写了一篇有关此问题的文章How to combine PWA and isomorphic rendering (SSR)?

Answer 2

您可以将shell保存在单独的文件夹中，并将页面呈现在另一个文件夹中，因此它们具有different scope，您可以在服务工作者中设置它以定义要缓存的内容和不缓存的内容。

Answer 3

该策略是使用SSR服务第一页加载，并使用缓存的应用程序外壳服务所有后续页面导航。 SSR为不同的页面返回不同的html，因此我们可以指定一个特殊的路径，例如/app-shell来获取用于客户端渲染的框架html。

如果您想了解更多信息，可以参考我的文章How To Turn a Server-Side-Rendered React SPA Into a PWA。

SSR如何与PWA一起使用

SSR

PWA

3 个答案: