SSR 具有动态元数据 + 预渲染的 App Shell答案

【问题标题】：SSR an App Shell with Dynamic metadata + PrerenderSSR 具有动态元数据 + 预渲染的 App Shell
【发布时间】：2018-08-22 22:52:00
【问题描述】：

当我的 SEO 元数据是动态的每条路由时，对我的 PWA 的 App Shell 进行 SSR 的策略是什么？例如，在/home 路由上，我只想要一个标题：

<title>Shop - Home</title>

在/search 上，我想添加描述：

<title>Shop - Search</title>
<meta name="description" content="Search results" />

问题是，如果我将它包含在我的 SSRd App Shell 中，我的 service worker 将缓存该特定页面的 app shell 版本。我还希望我的元数据根据我的用户当前所在的路线而改变。为此，我使用了 React Helmet。我们还使用 Prerender 缓存我们应用程序上的每个页面，以便 SEO 读取我们页面的 SSR 元数据。

【问题讨论】：

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

【解决方案1】：

通常，您可以将服务器端渲染视为独立于您是否使用 App Shell。

SSR 负责处理来自未安装 Service Worker 的客户的响应——至少在正确的情况下，爬虫和机器人属于这一类。您可以继续在每个 SSR 响应中包含特定于页面的元数据。

如果您遵循 App Shell 模型，您的 Service Worker 最终将通过返回通用 App Shell HTML 来处理所有（或至少大部分）导航。这不会有任何特定于页面的元数据，但您始终可以通过客户端 JavaScript 调整 <head> 的标题和其他部分。只有“真正的”用户，而不是爬虫和机器人，最终应该安装您的服务工作者，因此您不必担心依赖客户端 JavaScript 来填充元数据。

【讨论】：

如果对爬虫/机器人和“真实”用户的初始响应是完全呈现的 HTML 页面，服务工作者何时有机会仅缓存 App Shell HTML？我们是否只缓存构成 App Shell main.css、jquery.js 等的资产？
您的服务工作者控制缓存的内容，以及后续导航发生的情况。您可以传入任意 URL 列表，供 Service Worker 在安装期间缓存，与浏览器呈现的 HTML 无关。