Skip to content

tweak ja/caching.md #98

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.

Sign up for GitHub

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 1 commit into from
Jul 11, 2017
Merged

tweak ja/caching.md #98

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 8 additions & 8 deletions ja/caching.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ Vue の SSR は非常に高速ですが、コンポーネントインスタン

## ページレベルでのキャッシュ

ほとんどの場合、サーバーレンダリングされたアプリケーションは外部データに依存するため、コンテンツは本質的には動的であり長期間キャッシュすることはできません。しかしながら、コンテンツがユーザー固有のものでない場合、(すなわち、同一URLが常にすべてのユーザに対して同じコンテンツをレンダリングする場合)、 [マイクロキャッシング](https://www.nginx.com/blog/benefits-of-microcaching-nginx/) という戦略を活用してアプリケーションのトラフィック処理能力を劇的に改善します。
ほとんどの場合、サーバで描画されたアプリケーションは外部データに依存するため、コンテンツは本質的には動的であり長期間キャッシュすることはできません。しかしながら、コンテンツがユーザー固有のものでない場合、(すなわち、同一URLが常にすべてのユーザに対して同じコンテンツを描画する場合)、 [マイクロキャッシング](https://www.nginx.com/blog/benefits-of-microcaching-nginx/) という戦略を活用してアプリケーションのトラフィック処理能力を劇的に改善します。

これは通常 Nginx レイヤーで行われますが、 Node.js で実装することも可能です。
これは通常 Nginx レイヤーで行われますが、 Node.js で実装することも可能です:

```js
const microCache = LRU({
max: 100,
maxAge: 1000 // 重要： コンテンツの登録内容は1秒後に期限切れになります。
maxAge: 1000 // 重要： コンテンツの登録内容は1秒後に期限切れになります
})
const isCacheable = req => {
// リクエストがユーザー固有のものかどうかチェックするロジックを実装します。
// ユーザー固有でないページのみがキャッシュ可能です。
// リクエストがユーザー固有のものかどうかチェックするロジックを実装します
// ユーザー固有でないページのみがキャッシュ可能です
}
server.get('*', (req, res) => {
const cacheable = isCacheable(req)
Expand All @@ -38,7 +38,7 @@ server.get('*', (req, res) => {

## コンポーネントレベルでのキャッシュ

`vue-server-renderer` には、コンポーネントレベルのキャッシュ機能が組み込まれています。それを有効にするにはレンダラを作成する際に[キャッシュ実装](./api.md#cache)を有効にする必要があります。代表的な使用例は [lru-cache](https://github.com/isaacs/node-lru-cache) を渡すことです。
`vue-server-renderer` には、コンポーネントレベルのキャッシュ機能が組み込まれています。それを有効にするにはレンダラを作成する際に[キャッシュ実装](./api.md#cache)を有効にする必要があります。代表的な使用例は [lru-cache](https://github.com/isaacs/node-lru-cache) を渡すことです:

```js
const LRU = require('lru-cache')
Expand All @@ -50,7 +50,7 @@ const renderer = createRenderer({
})
```

次に `serverCacheKey` 関数を実装してコンポーネントをキャッシュすることが出来ます。
次に `serverCacheKey` 関数を実装してコンポーネントをキャッシュすることが出来ます:

```js
export default {
Expand All @@ -76,7 +76,7 @@ export default {
- グローバルな状態に依存する子コンポーネントがあります。
- 描画 `context` に副作用をもたらす子コンポーネントがあります。

したがって、コンポーネントのキャッシングは、パフォーマンスのボトルネックに取り組むために慎重に適用する必要があります。 ほとんどの場合、単一インスタンスのコンポーネントをキャッシュする必要はなく、すべきではありません。キャッシングに適した最も一般的なコンポーネントのタイプは、大きな `v-for` リストで繰り返されるコンポーネントです。 これらのコンポーネントは通常、データベースコレクション内のオブジェクトを元にするため、一意のIDと最後に更新されたタイムスタンプを合わせて使用してキャッシュキーを生成するという単純なキャッシュ戦略を使用できます。
したがって、コンポーネントのキャッシングは、パフォーマンスのボトルネックに取り組むために慎重に適用する必要があります。 ほとんどの場合、単一インスタンスのコンポーネントをキャッシュする必要はなく、すべきではありません。キャッシングに適した最も一般的なコンポーネントのタイプは、大きな `v-for` リストで繰り返されるコンポーネントです。 これらのコンポーネントは通常、データベースコレクション内のオブジェクトを元にするため、一意のIDと最後に更新されたタイムスタンプを合わせて使用してキャッシュキーを生成するという単純なキャッシュ戦略を使用できます:

```js
serverCacheKey: props => props.item.id + '::' + props.item.last_updated
Expand Down