Skip to content

Tweaks translation #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 4, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This guide requires the following minimum versions of Vue and supporting librari
- vue-router 2.5.0+
- vue-loader 12.0.0+ & vue-style-loader 3.0.0+

If you have previously used Vue 2.2 with SSR, you will notice that the recommended code structure is now [a bit different](./guide/structure.md) (with the new [runInNewContext](./api/#runinnewcontext) option set to `false`). Your existing app should continue to work, but it's recommended to migrate to the new recommendations.
If you have previously used Vue 2.2 with SSR, you will notice that the recommended code structure is now [a bit different](./guide/structure.md) (with the new [runInNewContext](./api/README.md#runinnewcontext) option set to `false`). Your existing app should continue to work, but it's recommended to migrate to the new recommendations.
:::

## What is Server-Side Rendering (SSR)?
Expand Down
4 changes: 2 additions & 2 deletions docs/ja/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
> - vue-router 2.5.0 以上
> - vue-loader 12.0.0 以上 & vue-style-loader 3.0.0 以上

> もし以前に、 SSR で Vue 2.2 を使用していた場合、 推奨されるコードの構造が[少しだけ違うこと](./structure.md)に気がつくでしょう (新しいオプションの [runInNewContext](./api.md#runinnewcontext) を `false` にしている場合)。あなたの既存のアプリケーションは依然として動作はするでしょうが、新しく推奨される方に移行されることをオススメします。
> もし以前に、 SSR で Vue 2.2 を使用していた場合、 推奨されるコードの構造が[少しだけ違うこと](./guide/structure.md)に気がつくでしょう (新しいオプションの [runInNewContext](./api/README.md#runinnewcontext) を `false` にしている場合)。あなたの既存のアプリケーションは依然として動作はするでしょうが、新しく推奨される方に移行されることをオススメします。

## サーバサイドレンダリング (SSR) とは何か?

Expand Down Expand Up @@ -41,7 +41,7 @@ SSR を使用する際に考慮すべきトレードオフも何点かありま

## このガイドについて

このガイドはサーバとして Node.js を使用してサーバで描画されたシングルページアプリケーションに焦点が当てられています。他のバックエンドの設定と Vue の SSR と混在させることは、それ自体主題であり、[専用セクション](./non-node.md)で手短に議論されています。
このガイドはサーバとして Node.js を使用してサーバで描画されたシングルページアプリケーションに焦点が当てられています。他のバックエンドの設定と Vue の SSR と混在させることは、それ自体主題であり、[専用セクション](./guide/non-node.md)で手短に議論されています。

このガイドは、Vue.js 自体に精通しており、且つ Node.js と webpack に関する実用的な知識を持っていることを前提としています。もしあなたが、すぐに使用できる高度なソリューションを求めている場合は、[Nuxt.js](http://nuxtjs.org/) を試してみてください。これは同じ Vue スタック上に構築されていますが、多くの定型文が抽象化されており、静的なサイト生成などの追加機能を提供します。しかし、アプリケーションの構造をより直接的に制御する必要がある場合は、ユースケースに合わない場合があります。いずれにしても、仕組みをより理解するために、このガイドを読むことはまだ有益です。

Expand Down
2 changes: 1 addition & 1 deletion docs/ru/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
- vue-router 2.5.0+
- vue-loader 12.0.0+ & vue-style-loader 3.0.0+

Если вы ранее использовали Vue 2.2 с серверным рендерингом, вы заметите, что рекомендуемая структура кода теперь [немного отличается](./guide/structure.md) (с новой опцией [runInNewContext](./api/#runinnewcontext), установленной в `false`). Ваше существующее приложение по-прежнему будет работать, но лучше внесите изменения с учётом новых рекомендаций.
Если вы ранее использовали Vue 2.2 с серверным рендерингом, вы заметите, что рекомендуемая структура кода теперь [немного отличается](./guide/structure.md) (с новой опцией [runInNewContext](./api/README.md#runinnewcontext), установленной в `false`). Ваше существующее приложение по-прежнему будет работать, но лучше внесите изменения с учётом новых рекомендаций.
:::

## Что такое серверный рендеринг (SSR)?
Expand Down
26 changes: 13 additions & 13 deletions docs/zh/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,44 +6,44 @@
- vue-router 2.5.0+
- vue-loader 12.0.0+ & vue-style-loader 3.0.0+

如果先前已经使用过 Vue 2.2 的服务器端渲染(SSR),你应该注意到,推荐的代码结构现在[略有不同](./guide/structure.md)(使用新的 [runInNewContext](./api/#runinnewcontext) 选项,并设置为 `false`)。现有的应用程序可以继续运行,但建议你迁移到新的推荐规范。
如果先前已经使用过 Vue 2.2 的服务器端渲染 (SSR),你应该注意到,推荐的代码结构现在[略有不同](./guide/structure.md)(使用新的 [runInNewContext](./api/README.md#runinnewcontext) 选项,并设置为 `false`)。现有的应用程序可以继续运行,但建议你迁移到新的推荐规范。
:::

## 什么是服务器端渲染(SSR)?
## 什么是服务器端渲染 (SSR)?

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在**服务器**和**客户端**上运行。

## 为什么使用服务器端渲染(SSR)?
## 为什么使用服务器端渲染 (SSR)?

与传统 SPASingle-Page Application - 单页应用程序)相比,服务器端渲染(SSR)的优势主要在于:
与传统 SPA (单页应用程序 (Single-Page Application)) 相比,服务器端渲染 (SSR) 的优势主要在于:

- 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

请注意,截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里,同步是关键。如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,抓取工具并不会等待异步完成后再行抓取页面内容。也就是说,如果 SEO 对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染(SSR)解决此问题。

- 更快的内容到达时间(time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验,并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言,服务器端渲染(SSR)至关重要。
- 更快的内容到达时间 (time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验,并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言,服务器端渲染 (SSR) 至关重要。

使用服务器端渲染(SSR)时还需要有一些权衡之处:
使用服务器端渲染 (SSR) 时还需要有一些权衡之处:

- 开发条件所限。浏览器特定的代码,只能在某些生命周期钩子函数(lifecycle hook)中使用;一些外部扩展库(external library)可能需要特殊处理,才能在服务器渲染应用程序中运行。
- 开发条件所限。浏览器特定的代码,只能在某些生命周期钩子函数 (lifecycle hook) 中使用;一些外部扩展库 (external library) 可能需要特殊处理,才能在服务器渲染应用程序中运行。

- 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同,服务器渲染应用程序,需要处于 Node.js server 运行环境。
- 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同,服务器渲染应用程序,需要处于 Node.js server 运行环境。

- 更多的服务器端负载。在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源(CPU-intensive - CPU 密集),因此如果你预料在高流量环境(high traffic)下使用,请准备相应的服务器负载,并明智地采用缓存策略。
- 更多的服务器端负载。在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集),因此如果你预料在高流量环境 (high traffic) 下使用,请准备相应的服务器负载,并明智地采用缓存策略。

在对你的应用程序使用服务器端渲染(SSR)之前,你应该问的第一个问题是,是否真的需要它。这主要取决于内容到达时间(time-to-content)对应用程序的重要程度。例如,如果你正在构建一个内部仪表盘,初始加载时的额外几百毫秒并不重要,这种情况下去使用服务器端渲染(SSR)将是一个小题大作之举。然而,内容到达时间(time-to-content)要求是绝对关键的指标,在这种情况下,服务器端渲染(SSR)可以帮助你实现最佳的初始加载性能。
在对你的应用程序使用服务器端渲染 (SSR) 之前,你应该问的第一个问题是,是否真的需要它。这主要取决于内容到达时间 (time-to-content) 对应用程序的重要程度。例如,如果你正在构建一个内部仪表盘,初始加载时的额外几百毫秒并不重要,这种情况下去使用服务器端渲染 (SSR) 将是一个小题大作之举。然而,内容到达时间 (time-to-content) 要求是绝对关键的指标,在这种情况下,服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

## 服务器端渲染 vs 预渲染(SSR vs Prerendering)
## 服务器端渲染 vs 预渲染 (SSR vs Prerendering)

如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 `/`, `/about`, `/contact` 等)的 SEO,那么你可能需要**预渲染**。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。
如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面(例如 `/`, `/about`, `/contact` 等)的 SEO,那么你可能需要**预渲染**。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。

如果你使用 webpack,你可以使用 [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上,[作者](https://github.com/chrisvfritz)是 Vue 核心团队的成员。

## 关于此指南

本指南专注于,使用 Node.js server 的服务器端单页面应用程序渲染。将 Vue 服务器端渲染(SSR)与其他后端设置进行混合使用,是后端自身集成 SSR 的话题,我们会在 [专门章节](./guide/non-node.md) 中进行简要讨论。
本指南专注于,使用 Node.js server 的服务器端单页面应用程序渲染。将 Vue 服务器端渲染 (SSR) 与其他后端设置进行混合使用,是后端自身集成 SSR 的话题,我们会在 [专门章节](./guide/non-node.md) 中进行简要讨论。

本指南将会非常深入,并且假设你已经熟悉 Vue.js 本身,并且具有 Node.js 和 webpack 的相当不错的应用经验。如果你倾向于使用提供了平滑开箱即用体验的更高层次解决方案,你应该去尝试使用 [Nuxt.js](https://nuxtjs.org/)。它建立在同等的 Vue 技术栈之上,但抽象出很多模板,并提供了一些额外的功能,例如静态站点生成。但是,如果你需要更直接地控制应用程序的结构,Nuxt.js 并不适合这种使用场景。无论如何,阅读本指南将更有助于更好地了解一切如何运行。

Expand Down
26 changes: 13 additions & 13 deletions docs/zh/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const renderer = createBundleRenderer(serverBundle, { /* 选项 */ })
renderer.renderToString(vm, context?, callback?): ?Promise<string>
```

将 Vue 实例渲染为字符串。上下文对象(context object)可选。回调函数是典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。
将 Vue 实例渲染为字符串。上下文对象 (context object) 可选。回调函数是典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。

在 2.5.0+ 版本中,此 callback 回调函数是可选项。在不传递 callback 时,此方法返回一个 Promise 对象,在其 resolve 后返回最终渲染的 HTML。

Expand All @@ -54,7 +54,7 @@ renderer.renderToString(vm, context?, callback?): ?Promise<string>
renderer.renderToStream(vm[, context]): stream.Readable
```

将 Vue 实例渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象(context object)可选。更多细节请查看[流式渲染](../guide/streaming.md)。
将 Vue 实例渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象 (context object) 可选。更多细节请查看[流式渲染](../guide/streaming.md)。

## Class: BundleRenderer

Expand All @@ -66,7 +66,7 @@ renderer.renderToStream(vm[, context]): stream.Readable
bundleRenderer.renderToString([context, callback]): ?Promise<string>
```

将 bundle 渲染为字符串。上下文对象(context object)可选。回调是一个典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。
将 bundle 渲染为字符串。上下文对象 (context object) 可选。回调是一个典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。

在 2.5.0+ 版本中,此 callback 回调函数是可选项。在不传递 callback 时,此方法返回一个 Promise 对象,在其 resolve 后返回最终渲染的 HTML。

Expand All @@ -78,33 +78,33 @@ bundleRenderer.renderToString([context, callback]): ?Promise<string>
bundleRenderer.renderToStream([context]): stream.Readable
```

将 bundle 渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象(context object)可选。更多细节请查看[流式渲染](../guide/streaming.md)。
将 bundle 渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象 (context object) 可选。更多细节请查看[流式渲染](../guide/streaming.md)。

## Renderer 选项

### template

为整个页面的 HTML 提供一个模板。此模板应包含注释 `<!--vue-ssr-outlet-->`,作为渲染应用程序内容的占位符。

模板还支持使用渲染上下文(render context)进行基本插值:
模板还支持使用渲染上下文 (render context) 进行基本插值:

- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation);
- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation)。
- 使用双花括号 (double-mustache) 进行 HTML 转义插值 (HTML-escaped interpolation);
- 使用三花括号 (triple-mustache) 进行 HTML 不转义插值 (non-HTML-escaped interpolation)。

当在渲染上下文(render context)上存在一些特定属性时,模板会自动注入对应的内容:
当在渲染上下文 (render context) 上存在一些特定属性时,模板会自动注入对应的内容:

- `context.head`:(字符串)将会被作为 HTML 注入到页面的头部(head)里。
- `context.head`:(字符串)将会被作为 HTML 注入到页面的头部 (head) 里。

- `context.styles`:(字符串)内联 CSS,将以 style 标签的形式注入到页面头部。注意,如过你使用了 `vue-loader` + `vue-style-loader` 来处理组件 CSS,此属性会在构建过程中被自动生成。

- `context.state`:(对象)初始 Vuex store 状态,将以 `window.__INITIAL_STATE__` 的形式内联到页面。内联的 JSON 将使用 [serialize-javascript](https://github.com/yahoo/serialize-javascript) 自动清理,以防止 XSS 攻击。

在 2.5.0+ 版本中,嵌入式 script 也可以也可以在生产模式(production mode)下自行移除。
在 2.5.0+ 版本中,嵌入式 script 也可以也可以在生产模式 (production mode) 下自行移除。

此外,当提供 `clientManifest` 时,模板会自动注入以下内容:

- 渲染当前页面所需的最优客户端 JavaScript 和 CSS 资源(支持自动推导异步代码分割所需的文件);
- 为要渲染页面提供最佳的 `<link rel="preload/prefetch">` 资源提示(resource hints)。
- 为要渲染页面提供最佳的 `<link rel="preload/prefetch">` 资源提示 (resource hints)。

你也可以通过将 `inject: false` 传递给 renderer,来禁用所有自动注入。

Expand All @@ -125,7 +125,7 @@ bundleRenderer.renderToStream([context]): stream.Readable

### shouldPreload

一个函数,用来控制什么文件应该生成 `<link rel="preload">` 资源预加载提示(resource hints)。
一个函数,用来控制什么文件应该生成 `<link rel="preload">` 资源预加载提示 (resource hints)。

默认情况下,只有 JavaScript 和 CSS 文件会被预加载,因为它们是启动应用时所必需的。

Expand Down Expand Up @@ -170,7 +170,7 @@ const renderer = createBundleRenderer(bundle, {

出于向后兼容的考虑,此选项默认为 `true`,但建议你尽可能使用 `runInNewContext: false` 或 `runInNewContext: 'once'`。

> 在 2.3.0 中,此选项有一个 bug,其中 `runInNewContext: false` 仍然使用独立的全局上下文(separate global context)执行 bundle。以下信息假定版本为 2.3.1+。
> 在 2.3.0 中,此选项有一个 bug,其中 `runInNewContext: false` 仍然使用独立的全局上下文 (separate global context) 执行 bundle。以下信息假定版本为 2.3.1+。

使用 `runInNewContext: false`,bundle 代码将与服务器进程在同一个 `global` 上下文中运行,所以请留意在应用程序代码中尽量避免修改 `global`。

Expand Down
Loading