Комментарии 7
Не назвал бы серверный рендеринг костылём... Помимо решения проблем SPA с SEO он также ускоряет доставку контекнта пользователю: обращения к апи происходят гораздо быстрее, если он запущен где-то рядом, конечно. Поэтому пользователь при входе на сайте получает отрендериную страницу зачастую в разы быстрее, чем без ssr...
А в данной статье описан скорее костыль для гугл кеша.
Конечно можно назвать это как угодно, но это реально работает.
Для себя нашёл решением, динамически проставлять 'mode' для роутера, в случае если 'window.location' это урл какого-либо кеша, то 'mode: "abstract"', а после создания роутера делать 'router.push' с верным урлом, достаточно удобно брать 'window.__NUXT__.state.route.fullPath'
...
const cacheUrlMatchers = [
{
hostname: 'yandexwebcache.net',
pathname: '/yandbtm',
},
{
hostname: 'webcache.googleusercontent.com',
pathname: '/search',
},
];
...
const isCachedUrl = (fullUrl = '') => {
if (process.server) return null;
const url = new URL(fullUrl);
return cacheUrlMatchers
.some(({ hostname, pathname }) =>
url.hostname === hostname && url.pathname === pathname
);
};
export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
const options = routerOptions || createDefaultRouter(ssrContext).options;
// Fix webcache routing
const isCache = process.client && isCachedUrl(window.location.href);
const mode = isCache
? 'abstract'
: options.mode;
const resultOptions = {
...options,
mode,
};
const router = new Router(resultOptions);
// Set init route in cache
if (isCache && window.__NUXT__) {
const { route } = window.__NUXT__.state;
router.push(route.fullPath);
}
return router;
}
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Nuxt.js и поисковики. Решение проблем с SЕО для Google и Yandex