javascript - 服务器端渲染和应用程序外壳模型

标签 javascript seo progressive-web-apps progressive-enhancement

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

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

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

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

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

最佳答案

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

如果您“正确”使用服务器端呈现,那么您的服务器应该使用完整的 HTML 文档响应发送给它的任何导航请求,其中包含特定于 URL 的内容。在此模型中,JavaScript 不是将内容显示到屏幕上所必需的,尽管它可能是“交互式”功能或执行单页应用程序样式导航所必需的。

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

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

有一段我几年前的演讲视频对此进行了更详细的解释:https://youtu.be/jCKZDTtUA2A?t=1428 ,以及利用此技术的示例应用程序,网址为 https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo

关于javascript - 服务器端渲染和应用程序外壳模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42971457/

相关文章:

javascript - 为什么我的 Service Worker 会看到 "Error - Only secure origins are allowed"?

seo - 为什么谷歌索引这个?

dns - 更改域 IP 和域 DNS 后出现 Googlebot 和 Google Mobile bot 抓取错误(站点无法访问)

javascript - 最快的 JavaScript 重定向

javascript - 在使用 angularJS 更改路由之前提交函数

ajax - 从 Google Analytics 跟踪 Ajax Popover 中的页面

javascript - 用于 PWA/TWA 的 CapacitorJS

ios - 在 IOS 上的 PWA 中使用 navigator.share 共享文件

javascript - Ember 等待关系以 Ember 并发方式加载到数组中

javascript - 如何将 createHmac 从 Node 转换为 C#?