如何使用 PWA(渐进式 Web 应用程序)进行 SSR(服务器端渲染)?
据我了解,
SSR
SSR 运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回渲染后的html。这对于不会运行 javascript 的网络爬虫和无脚本的浏览器来说非常重要。至少第一印象是有用的。
PWA
其中,PWA 需要有一个 shell,该 shell 将被缓存,数据将随之而来。这意味着,即使用户离线,shell也会被加载。
?
那么,如果我们要预渲染数据,如何将 shell 与数据分开缓存呢?
如果您只想从预渲染的 SSR 视图中缓存 shell 和初始数据,则必须提供两个视图:
-
/view-url
来自 SSR 的数据
-
/view-url?shell
只有 shell 版本,没有数据(您可以将逻辑从 url 查询更改为例如请求标头)。
当用户第一次进入时/view-url
您在 Service Worker 中发送 1. 版本和缓存/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))
);
});
这里的关键点是你改变原来的请求/view-url
to /view-url?shell
在服务工作者中!
如果您想了解有关此技术的更多信息,我写了一篇有关此问题的文章如何结合 PWA 和同构渲染(SSR)? https://michaljanaszek.com/blog/combine-pwa-and-isomorphic-rendering
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)