@@ -4,18 +4,18 @@ Vue の SSR は非常に高速ですが、コンポーネントインスタン
4
4
5
5
## ページレベルでのキャッシュ
6
6
7
- ほとんどの場合、サーバーレンダリングされたアプリケーションは外部データに依存するため 、コンテンツは本質的には動的であり長期間キャッシュすることはできません。しかしながら、コンテンツがユーザー固有のものでない場合、(すなわち、同一URLが常にすべてのユーザに対して同じコンテンツをレンダリングする場合 )、 [ マイクロキャッシング] ( https://www.nginx.com/blog/benefits-of-microcaching-nginx/ ) という戦略を活用してアプリケーションのトラフィック処理能力を劇的に改善します。
7
+ ほとんどの場合、サーバで描画されたアプリケーションは外部データに依存するため 、コンテンツは本質的には動的であり長期間キャッシュすることはできません。しかしながら、コンテンツがユーザー固有のものでない場合、(すなわち、同一URLが常にすべてのユーザに対して同じコンテンツを描画する場合 )、 [ マイクロキャッシング] ( https://www.nginx.com/blog/benefits-of-microcaching-nginx/ ) という戦略を活用してアプリケーションのトラフィック処理能力を劇的に改善します。
8
8
9
- これは通常 Nginx レイヤーで行われますが、 Node.js で実装することも可能です。
9
+ これは通常 Nginx レイヤーで行われますが、 Node.js で実装することも可能です:
10
10
11
11
``` js
12
12
const microCache = LRU ({
13
13
max: 100 ,
14
- maxAge: 1000 // 重要: コンテンツの登録内容は1秒後に期限切れになります。
14
+ maxAge: 1000 // 重要: コンテンツの登録内容は1秒後に期限切れになります
15
15
})
16
16
const isCacheable = req => {
17
- // リクエストがユーザー固有のものかどうかチェックするロジックを実装します。
18
- // ユーザー固有でないページのみがキャッシュ可能です。
17
+ // リクエストがユーザー固有のものかどうかチェックするロジックを実装します
18
+ // ユーザー固有でないページのみがキャッシュ可能です
19
19
}
20
20
server .get (' *' , (req , res ) => {
21
21
const cacheable = isCacheable (req)
@@ -38,7 +38,7 @@ server.get('*', (req, res) => {
38
38
39
39
## コンポーネントレベルでのキャッシュ
40
40
41
- ` vue-server-renderer ` には、コンポーネントレベルのキャッシュ機能が組み込まれています。それを有効にするにはレンダラを作成する際に[ キャッシュ実装] ( ./api.md#cache ) を有効にする必要があります。代表的な使用例は [ lru-cache] ( https://github.com/isaacs/node-lru-cache ) を渡すことです。
41
+ ` vue-server-renderer ` には、コンポーネントレベルのキャッシュ機能が組み込まれています。それを有効にするにはレンダラを作成する際に[ キャッシュ実装] ( ./api.md#cache ) を有効にする必要があります。代表的な使用例は [ lru-cache] ( https://github.com/isaacs/node-lru-cache ) を渡すことです:
42
42
43
43
``` js
44
44
const LRU = require (' lru-cache' )
@@ -50,7 +50,7 @@ const renderer = createRenderer({
50
50
})
51
51
```
52
52
53
- 次に ` serverCacheKey ` 関数を実装してコンポーネントをキャッシュすることが出来ます。
53
+ 次に ` serverCacheKey ` 関数を実装してコンポーネントをキャッシュすることが出来ます:
54
54
55
55
``` js
56
56
export default {
@@ -76,7 +76,7 @@ export default {
76
76
- グローバルな状態に依存する子コンポーネントがあります。
77
77
- 描画 ` context ` に副作用をもたらす子コンポーネントがあります。
78
78
79
- したがって、コンポーネントのキャッシングは、パフォーマンスのボトルネックに取り組むために慎重に適用する必要があります。 ほとんどの場合、単一インスタンスのコンポーネントをキャッシュする必要はなく、すべきではありません。キャッシングに適した最も一般的なコンポーネントのタイプは、大きな ` v-for ` リストで繰り返されるコンポーネントです。 これらのコンポーネントは通常、データベースコレクション内のオブジェクトを元にするため、一意のIDと最後に更新されたタイムスタンプを合わせて使用してキャッシュキーを生成するという単純なキャッシュ戦略を使用できます。
79
+ したがって、コンポーネントのキャッシングは、パフォーマンスのボトルネックに取り組むために慎重に適用する必要があります。 ほとんどの場合、単一インスタンスのコンポーネントをキャッシュする必要はなく、すべきではありません。キャッシングに適した最も一般的なコンポーネントのタイプは、大きな ` v-for ` リストで繰り返されるコンポーネントです。 これらのコンポーネントは通常、データベースコレクション内のオブジェクトを元にするため、一意のIDと最後に更新されたタイムスタンプを合わせて使用してキャッシュキーを生成するという単純なキャッシュ戦略を使用できます:
80
80
81
81
``` js
82
82
serverCacheKey : props => props .item .id + ' ::' + props .item .last_updated
0 commit comments