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