服务器端渲染和应用 shell 模型

Server-side rendering & the app shell model

app shell model 建议首先加载包含最低要求 HTML、CSS 和 JavaScript 的应用程序 shell,然后再动态加载内容然后。这似乎暗示使用 JavaScript 和 API 延迟加载内容。

比如上文提到的PWA Google I/O 2016.

然而,这种方法意味着您的内容仅适用于支持 JavaScript 的浏览器。

这也可能影响搜索引擎索引,例如在测试 Google I/O 2016 网站时,如果禁用 JavaScript.

,则内容不可用

推荐的方法是什么,因为这似乎违背了渐进增强的原则?

(注意:有很多不同的方法可以实现服务器端渲染。)

如果您 "proper" 使用服务器端渲染,那么您的服务器应该响应发送给它的任何导航请求,并提供完整的 HTML 文档,内容特定于 URL。在此模型中,JavaScript 不是将内容显示到屏幕上所必需的,尽管 "interactive" 功能或进行单页应用程序样式导航可能需要它。

问题在于,一旦安装了 service worker,并且如果您利用 App Shell 模型,您的浏览器将不再需要按顺序向服务器发送导航请求获得回应。它可以使用之前缓存的AppShellHTML完成请求,完全绕过网络

不支持服务工作者的浏览器或其他理论上的用户代理将继续向您的服务器发送导航请求,您的服务器将继续以完整的 HTML 文档响应它们。

有一段我几年前发表的演讲视频更详细地解释了这一点:https://youtu.be/jCKZDTtUA2A?t=1428, and a sample application that takes advantage of this technique at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo