解释一个单页应用程序是什么以及如何优化SEO
Topics
JavaScriptHTML
在GitHub上编辑
当代的网络开发者指出他们构建的产品是 Web 应用,而不是网站。 虽然这两个词之间没有严格区别,但 Web 应用往往具有高度的互动性和动态, 允许用户执行操作并收到对其操作的响应。 通常情况下,浏览器从服务器接收 HTML 并渲染它。 当用户导航到另一个 URL 时,需要全页刷新,服务器将新的 HTML 发送到新页面。 这被称为服务器端渲染。
然而,在现代 SPA 中,则使用客户端渲染。 浏览器从服务器加载初始页面,以及整个应用程序所需的脚本(框架、库、应用代码) 和样式表。 当用户导航到其他页面时,不会触发页面刷新。 页面的 URL 通过HTML5 History API更新。 新页面所需的新数据,通常使用 JSON 格式,由浏览器通过 AJAX 向服务器检索. SPA 然后通过 JavaScript 动态地更新页面数据,它已经在初始页面加载中下载好了。 此模型类似于本地移动应用的工作方式。
优点
- 由于全页刷新,应用感觉更加敏捷,用户没有看到页面导航之间的闪烁。
- 服务器收到的 HTTP 请求较少,因为同一个资源不必在每个页面加载时再次下载。
- 客户端和服务器之间的关注点明确分离;你可以很容易地为不同的平台(如手机、聊天机器人、智能手表)建立新的客户端,而不必修改服务器代码。 只要 API 约定未被损坏,您也可以独立修改客户端和服务器上的技术堆栈。
缺点
- 由于加载框架、应用程序代码和多个页面所需的资产,初始页面负载较重。
- 在您的服务器上还有一个步骤要做,即配置它来将所有请求路由到一个单一的入口点,并允许客户端路由从那里接管。
- SPA 依赖 JavaScript 来呈现内容,但并非所有的搜索引擎在抓取过程中都会执行 JavaScript,它们可能会在你的页面上看到空的内容。 这无意中伤害了您的应用程序的 SEO(搜索引擎优化)。 然而,在大多数情况下,当你正在建造应用软件时,SEO 并不是最重要的因素, 因为并非所有内容都需要通过搜索引擎索引。 为了克服这个问题,你可以在服务器端渲染你的应用程序,或者使用Plerender等服务来 "在浏览器中渲染你的 JavaScript,保存静态 HTML,并将其返回给爬虫"。