【问题标题】：How does SSR go with PWASSR 如何与 PWA 搭配使用
【发布时间】：2018-11-09 01:24:53
【问题描述】：

如何使用 PWA（渐进式 Web 应用）进行 SSR（服务器端渲染）？

据我了解，

SSR

SSR 运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回渲染的 html。这对于不会运行 javascript 和没有脚本的浏览器的网络爬虫很重要。至少第一印象是可用的。

PWA

其中，PWA 需要一个 shell，它会被缓存并且数据会在它之后出现。这意味着，即使用户离线，也会加载 shell。

?

那么，如果我们要预渲染数据，如何将 shell 与数据分开缓存呢？

【问题讨论】：

PWA 不需要 shell。这只是一种常见的模式。带有 PWA 的 SSR 与带有 SPA 的 SSR 没有太大区别。 PWA 仍应缓存 SPA 部分，可能不缓存 SSR 部分。

标签： progressive-web-apps server-side-rendering pwa

【解决方案1】：

如果您只想从带有初始数据的预渲染 SSR 视图中缓存 shell，您必须提供两个视图：

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

当用户第一次输入 /view-url 时，你发送 1. 版本并缓存在 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！

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

【讨论】：

【解决方案2】：

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

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

【讨论】：