Skip to content

Commit bf7deff

Browse files
authored
docs: translate ssr guide > routing and code splitting (#352)
1 parent 81e6211 commit bf7deff

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/guide/ssr/routing.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Routing and Code-Splitting
1+
# ルーティングとコード分割
22

3-
## Routing with `vue-router`
3+
## `vue-router` によるルーティング
44

5-
You may have noticed that our server code uses a `*` handler which accepts arbitrary URLs. This allows us to pass the visited URL into our Vue app, and reuse the same routing config for both client and server!
5+
ここまでのサーバコードで、任意の URL を受け付ける `*` ハンドラを使っていることに気づいたかもしれません。これにより訪問した URL Vue アプリケーションに渡すことができ、クライアントとサーバの両方で同じルーティング設定を再利用することができます!
66

7-
It is recommended to use the official [vue-router](https://github.com/vuejs/vue-router-next) library for this purpose. Let's first create a file where we create the router. Note that similar to application instance, we also need a fresh router instance for each request, so the file exports a `createRouter` function:
7+
この目的のためには、公式の [vue-router](https://github.com/vuejs/vue-router-next) ライブラリを使うことをお勧めします。まず、ルータを作るためのファイルを作成します。アプリケーションのインスタンスと同様に、リクエストごとに新しいルータのインスタンスが必要なので、このファイルでは `createRouter` 関数をエクスポートします:
88

99
```js
1010
// router.js
@@ -22,7 +22,7 @@ export default function() {
2222
}
2323
```
2424

25-
And update our `app.js`, client and server entries:
25+
そして `app.js` と、クライアントとサーバのエントリを更新します:
2626

2727
```js
2828
// app.js
@@ -57,24 +57,24 @@ const { app, router } = createApp({
5757
})
5858
```
5959

60-
## Code-Splitting
60+
## コード分割
6161

62-
Code-splitting, or lazy-loading part of your app, helps reduce the size of assets that need to be downloaded by the browser for the initial render, and can greatly improve TTI (time-to-interactive) for apps with large bundles. The key is "loading just what is needed" for the initial screen.
62+
コード分割、またはアプリの一部を遅延読み込みすることは、初期レンダリングのためにブラウザがダウンロードしなければならないアセットのサイズを減らすことができ、大きなバンドルを持つアプリケーションの TTI (time-to-interactive) を大幅に改善できます。重要なのは初期画面で 「必要なものだけ読み込む」ことです。
6363

64-
Vue Router provides [lazy-loading support](https://next.router.vuejs.org/guide/advanced/lazy-loading.html), allowing [webpack to code-split at that point](https://webpack.js.org/guides/code-splitting-async/). All you need to do is:
64+
Vue Router は、 [遅延読み込みのサポート](https://next.router.vuejs.org/guide/advanced/lazy-loading.html) を提供しており、 [webpack がその時点でコード分割すること](https://webpack.js.org/guides/code-splitting-async/) を可能にしています。必要なのは:
6565

6666
```js
67-
// change this...
67+
// これを変更して
6868
import MyUser from './components/MyUser.vue'
6969
const routes = [{ path: '/user', component: MyUser }]
7070

71-
// to this:
71+
// このようにします:
7272
const routes = [
7373
{ path: '/user', component: () => import('./components/MyUser.vue') }
7474
]
7575
```
7676

77-
On both client and server we need to wait for router to resolve async route components ahead of time in order to properly invoke in-component hooks. For this we will be using [router.isReady](https://next.router.vuejs.org/api/#isready) method Let's update our client entry:
77+
クライアントとサーバのどちらでも、コンポーネント内のフックを適切に呼び出すために、ルータが非同期のルートコンポーネントを事前に解決するのを待つ必要があります。このため、 [router.isReady](https://next.router.vuejs.org/api/#isready) メソッドでクライアントのエントリを更新しましょう:
7878

7979
```js
8080
// entry-client.js
@@ -89,7 +89,7 @@ router.isReady().then(() => {
8989
})
9090
```
9191

92-
We also need to update our `server.js` script:
92+
また、 `server.js` スクリプトを更新する必要があります:
9393

9494
```js
9595
// server.js

0 commit comments

Comments
 (0)