Skip to content

Guide > Server-Side Rendering Guide > Getting Started の翻訳 #322

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 3 commits into from
May 16, 2021
Merged
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
28 changes: 14 additions & 14 deletions src/guide/ssr/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
# Getting Started
# はじめに

> This guide is currently under active development
> このガイドは執筆調整中です

## Installation
## インストール

In order to create a server-side rendered application, we need to install the `@vue/server-renderer` package:
サーバサイドレンダリングのアプリケーションを作成するためには、 `@vue/server-renderer` パッケージのインストールが必要です:

```bash
npm install @vue/server-renderer
## OR
yarn add @vue/server-renderer
```

#### Notes
#### 注意点

- It's recommended to use Node.js version 10+.
- `@vue/server-renderer` and `vue` must have matching versions.
- `@vue/server-renderer` relies on some Node.js native modules and therefore can only be used in Node.js. We may provide a simpler build that can be run in other JavaScript runtimes in the future.
- Node.js のバージョンは 10 以上を推奨します。
- `@vue/server-renderer` `vue` のバージョンが一致する必要があります。
- `@vue/server-renderer` はいくつかの Node.js ネイティブモジュールに依存しているため、 Node.js でのみ使用できます。将来的には他の JavaScript ランタイムで実行できるよりシンプルなビルドを提供するかもしれません。

## Rendering a Vue Application
## Vue アプリケーションのレンダリング

Unlike a client-only Vue application, which is created using `createApp`, an SSR application needs to be created using `createSSRApp`:
`createApp` で作ったクライアント専用の Vue アプリケーションとは異なり、 SSR アプリケーションは `createSSRApp` で作る必要があります:

```js
const { createSSRApp } = require('vue')
Expand All @@ -35,7 +35,7 @@ const app = createSSRApp({
})
```

Now, we can use the `renderToString` function to render our application instance to a string. This function returns a Promise which resolves to the rendered HTML.
それでは、 `renderToString` 関数を使い、アプリケーションのインスタンスを文字列にレンダリングしてみます。この関数は、レンダリングされた HTML に解決される Promise を返します。

```js{2,13}
const { createSSRApp } = require('vue')
Expand All @@ -53,9 +53,9 @@ const app = createSSRApp({
const appContent = await renderToString(app)
```

## Integrating with a Server
## サーバとの連携

To run an application, in this example we will use [Express](https://expressjs.com/):
アプリケーションを実行するために、この例では [Express](https://expressjs.com/) を利用します:

```bash
npm install express
Expand Down Expand Up @@ -96,4 +96,4 @@ server.get('*', async (req, res) => {
server.listen(8080)
```

Now, when running this Node.js script, we can see a static HTML page on `localhost:8080`. However, this code is not _hydrated_: Vue hasn't yet taken over the static HTML sent by the server to turn it into dynamic DOM that can react to client-side data changes. This will be covered in the [Client Side Hydration](hydration.html) section.
この Node.js スクリプトを実行すると、 `localhost:8080` で静的な HTML ページが表示されます。しかし、このコードは _Hydrate_ ではありません: Vue はまだサーバから送られてきた静的な HTML を引き継いでいて、クライアント側のデータ変更に反応できる動的な DOM に変えていません。これについては [クライアントサイド Hydration](hydration.html) セクションで説明します。