使用动态元数据+ Prerender SSR一个App Shell

时间:2018-08-22 22:52:00

标签: reactjs progressive-web-apps serverside-rendering

当我的SEO元数据按路由动态变化时,对PWA的App Shell进行SSR的策略是什么?例如,在/home路线上,我只想要一个标题:

<title>Shop - Home</title>

/search上,我想添加一个描述:

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

问题是,如果我将其包含在SSRd App Shell中,则我的服务工作者将缓存该应用程序Shell的特定页面版本。我也仍然希望我的元数据根据用户当前所走的路线而改变。为此,我正在使用React Helmet。我们还使用Prerender在应用程序中的每个页面上缓存SEO,以读取页面的SSR元数据。

1 个答案:

答案 0 :(得分:1)

通常,您可以认为服务器端渲染与是否使用App Shell无关。

SSR负责处理未安装服务工作者的客户端的响应-至少在正确的情况下,爬虫和漫游器将属于此类。您可以继续在每个SSR响应中包含特定于页面的元数据。

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