Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

Commit 53ad87d

Browse files
wxsmsJustineo
andauthored
translate introduction.md (#781)
* translate introduction.md Co-authored-by: GU Yiling <justice360@gmail.com>
1 parent 542b294 commit 53ad87d

File tree

2 files changed

+12
-13
lines changed

2 files changed

+12
-13
lines changed

src/.vuepress/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ const sidebar = {
244244
}
245245
],
246246
ssr: [
247-
['/guide/ssr/introduction', 'Introduction'],
247+
['/guide/ssr/introduction', '介绍'],
248248
'/guide/ssr/getting-started',
249249
'/guide/ssr/universal',
250250
'/guide/ssr/structure',

src/guide/ssr/introduction.md

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
55
## 什么是服务端渲染 (SSR)?
66

7-
Vue.js 是一个构建客户端应用的框架。默认情况下作为其输出,Vue 组件会在浏览器中生产并封装 DOM。然而,我们也有可能在服务器把相同的组件渲染成 HTML 字符串,然后直接发送给浏览器,最终将静态标记“hydrate”成为完整的可交互的客户端应用
7+
Vue.js 是一个构建客户端应用的框架。默认情况下,作为其输出,Vue 组件会在浏览器中生产并封装 DOM。然而,我们也可以在服务器端把同样的组件渲染成 HTML 字符串,然后直接将其发送给浏览器,并最终将静态标记“hydrate”为完整的、可交互的客户端应用
88

99
一个服务端渲染的 Vue.js 应用也可以被认为是“同构的”或”通用的“。这意味着应用代码的主体可以同时运行在“服务端”**“客户端”。
1010

@@ -14,34 +14,33 @@ Vue.js 是一个构建客户端应用的框架。默认情况下作为其输出
1414

1515
- 更好的搜索引擎优化 (SEO)。因为搜索引擎爬虫会直接读取完整的渲染出来的页面。
1616

17-
注意,目前 Google 和 Bing 已经可以很好地为同步加载的 JavaScript 应用建立索引。在这里同步加载是关键。如果应用起始状态只是一个加载中的效果,而通过 API 调用获取内容,则爬虫不会等待页面加载完成。这意味着如果你有异步加载的页面内容且 SEO 也很重要,那么你需要 SSR。
17+
注意,目前 Google 和 Bing 已经可以很好地为同步加载的 JavaScript 应用建立索引。在这里同步加载是关键。如果应用起始状态只是一个加载中的效果,而通过 API 调用获取内容,则爬虫不会等待页面加载完成。这意味着如果你的页面有异步加载的内容且 SEO 很重要,那么你可能需要 SSR。
1818

19-
- 更快的内容呈现,尤其是网络连接缓慢或设备运行速度缓慢的时候。服务端标记不需要等待所有的 JavaScript 都被下载并执行之后才显示,所以用户可以很快看到完整渲染好的内容。这通常会带来更好的用户体验,同时对于内容呈现时间和转化率呈正相关的应用来说尤为关键。
19+
- 更快的内容呈现,尤其是网络连接缓慢或设备运行速度缓慢的时候。服务端标记不需要等待所有的 JavaScript 都被下载并执行之后才显示,所以用户可以更快看到完整的渲染好的内容。这通常会带来更好的用户体验,同时对于内容呈现时间和转化率呈正相关的应用来说尤为关键。
2020

2121
这里有一些是否选用 SSR 的取舍因素:
2222

23-
- 开发一致性。浏览器特有的代码可以只用在特性的生命周期钩子里;一些外部的库在服务端渲染的应用里可能需要特殊的对待
23+
- 开发一致性。浏览器特有的代码只能在特定的生命周期钩子中使用;一些外部的库在服务端渲染应用中可能需要经过特殊处理
2424

25-
- 需要更多的构建设定和部署要求。不同于一个完全静态的 SPA 可以部署在任意静态服务器,一个服务端渲染的应用需要一个 Node.js 的环境
25+
- 需要更多的构建设定和部署要求。不同于一个完全静态的 SPA 可以部署在任意的静态文件服务器,服务端渲染应用需要一个能够运行 Node.js 服务器的环境
2626

27-
- 更多的服务端负载。在 Node.js 中渲染一个完整的应用会比服务静态文件产生更密集的 CPU 运算。所以如果流量很高,请务必备好与其负载相对应的服务器并采取明智的缓存策略
27+
- 更多的服务端负载。在 Node.js 中渲染一个完整的应用会比仅供应静态文件产生更密集的 CPU 运算。所以如果流量很高,请务必准备好与其负载相对应的服务器并采取明智的缓存策略
2828

29-
Before using SSR for your application, the first question you should ask is whether you actually need it. It mostly depends on how important time-to-content is for your application. For example, if you are building an internal dashboard where an extra few hundred milliseconds on the initial load doesn't matter that much, SSR would be overkill. However, in cases where time-to-content is absolutely critical, SSR can help you achieve the best possible initial load performance.
30-
在应用中使用 SSR 之前,你需要问自己的第一个问题是是否真的需要它。
29+
在应用中使用 SSR 之前,你需要问自己的第一个问题是:你是否真的需要它?它通常是由内容呈现时间对应用的重要程度决定的。例如,如果你正在搭建一个内部管理系统,几百毫秒的初始化加载时间对它来说无关紧要,这种情况下就没有必要使用 SSR。然而,如果内容呈现时间非常关键,SSR 可以助你实现最佳的初始加载性能。
3130

3231
## SSR vs 预渲染
3332

34-
如果你希望通过 SSR 来改善一些推广页面 SEO (例如 `/``/about``/contact` 等),你也许需要的是**预渲染**。和使用线上编译 HTML 的 web 服务器相比,预渲染可以在构建时为静态路由生成静态 HTML 文件。它的优势在于预渲染的设置更加简单,且前端仍然是一个完全静态的站点
33+
如果你仅希望通过 SSR 来改善一些推广页面 (例如 `/``/about``/contact` 等) 的 SEO,那么**预渲染**也许会更合适。和使用动态编译 HTML 的 web 服务器相比,预渲染可以在构建时为指定的路由生成静态 HTML 文件。它的优势在于预渲染的设置更加简单,且允许将前端保持为一个完全静态的站点
3534

36-
如果你使用 [webpack](https://webpack.js.org/),你可以通过 [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) 支持预渲染。该插件已经被大量 Vue 应用检验过。
35+
如果你正在使用 [webpack](https://webpack.js.org/),你可以通过 [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) 来支持预渲染。该插件已经被大量的 Vue 应用检验过。
3736

3837
## 关于该指南
3938

4039
[//]: # 'TODO: This guide is focused on server-rendered Single-Page Applications using Node.js as the server. Mixing Vue SSR with other backend setups is a topic of its own and briefly discussed in a [dedicated section].'
4140

42-
该指南会非常深入且假设你已经熟悉 Vue.js 本身,且具有一定的 Node.js 和 webpack 知识和经验。
41+
该指南会非常深入,且假设你已经熟悉了 Vue.js 本身,且具有一定的 Node.js 和 webpack 知识和经验。
4342

44-
[//]: # 'If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should probably give [Nuxt.js](https://nuxtjs.org/) a try. It's built upon the same Vue stack but abstracts away a lot of the boilerplate, and provides some extra features such as static site generation. However, it may not suit your use case if you need more direct control of your app's structure. Regardless, it would still be beneficial to read through this guide to understand better how things work together.'
43+
如果你更倾向于高层级的、提供顺滑的开箱即用体验的解决方案,也许可以试试 [Nuxt.js](https://nuxtjs.org/)。它使用相同的 Vue 技术栈构建,但将许多引用抽象化了,且提供了一些额外的特性,例如静态站点生成。然而,如果你需要对应用的结构有更直接的控制,它也许就不适合了。无论如何,通读本指南,更好地理解事物之间是如何协同工作的,仍然是有益的。
4544

4645
[//]: # 'TODO: As you read along, it would be helpful to refer to the official [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/), which makes use of most of the techniques covered in this guide'
4746

0 commit comments

Comments
 (0)