Если вы хотите кэшировать оболочку только из предварительно обработанного представления SSR с исходными данными, вы должны предоставить два представления:
/view-url с данными из SSR /view-url?shell только сверсия оболочки, без данных (вы можете изменить логику с URL-запроса, например, на заголовок запроса).
Когда пользователь впервые вводит /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))
);
});
Ключевым моментом здесь является то, что вы меняете исходный запрос /view-url на /view-url?shellв Service Worker!
Если вы хотите узнать больше об этой технике, я написал статью об этой проблеме Как объединить PWA и изоморфный рендеринг (SSR)?