diff --git a/pages/docs/prefetching.en-US.md b/pages/docs/prefetching.en-US.md
index b163aa33..864eed3c 100644
--- a/pages/docs/prefetching.en-US.md
+++ b/pages/docs/prefetching.en-US.md
@@ -14,7 +14,9 @@ It will prefetch the data when the HTML loads, even before JavaScript starts to
## Programmatically Prefetch
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
```jsx
import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
}
```
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
```jsx
function App({ userId }) {
const [show, setShow] = useState(false)
+
+ // preload in effects
+ useEffect(() => {
+ preload('/api/user?id=' + userId, fetcher)
+ }, [useId])
+
return (
setShow(true)}
+ {/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
diff --git a/pages/docs/prefetching.es-ES.md b/pages/docs/prefetching.es-ES.md
index 4ea54322..0c11b1f8 100644
--- a/pages/docs/prefetching.es-ES.md
+++ b/pages/docs/prefetching.es-ES.md
@@ -14,7 +14,9 @@ Se precargarán los datos cuando se cargue el HTML, incluso antes de que el Java
## Programmatically Prefetch
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
```jsx
import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
}
```
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
```jsx
function App({ userId }) {
const [show, setShow] = useState(false)
+
+ // preload in effects
+ useEffect(() => {
+ preload('/api/user?id=' + userId, fetcher)
+ }, [useId])
+
return (
setShow(true)}
+ {/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
diff --git a/pages/docs/prefetching.ja.md b/pages/docs/prefetching.ja.md
index 6efa43d0..d3b730ac 100644
--- a/pages/docs/prefetching.ja.md
+++ b/pages/docs/prefetching.ja.md
@@ -14,7 +14,9 @@ JavaScriptのダウンロードが開始される前であっても、HTMLの読
## プログラムによるプリフェッチ
-SWR は `preload` というデータをプログラマブルにプリフェッチして結果をキャッシュに保存する API を提供しています。`preload` は `key` と `fetcher` を引数として受け取ります。`preload` は React の外からも呼ぶことが可能です。
+SWR は `preload` というデータをプログラマブルにプリフェッチして結果をキャッシュに保存する API を提供しています。`preload` は `key` と `fetcher` を引数として受け取ります。
+
+`preload` は React の外からも呼ぶことが可能です。
```jsx
import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
}
```
-またボタンをホバーしたタイミングでプリロードすることもできます
+React のレンダリングツリー内においては, `preload` はイベントコールバックやエフェクトの中で利用可能です。
```jsx
function App({ userId }) {
const [show, setShow] = useState(false)
+
+ // エフェクトの中でプリロードする
+ useEffect(() => {
+ preload('/api/user?id=' + userId, fetcher)
+ }, [useId])
+
return (
setShow(true)}
+ {/* イベントコールバックの中でプリロードする */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
diff --git a/pages/docs/prefetching.ko.md b/pages/docs/prefetching.ko.md
index 32442ffe..4a9906f9 100644
--- a/pages/docs/prefetching.ko.md
+++ b/pages/docs/prefetching.ko.md
@@ -14,7 +14,9 @@ HTML `` 안에 넣기만 하면 됩니다. 쉽고 빠르며 네이티브
## 프로그래밍 방식으로 프리패치
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
```jsx
import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
}
```
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
```jsx
function App({ userId }) {
const [show, setShow] = useState(false)
+
+ // preload in effects
+ useEffect(() => {
+ preload('/api/user?id=' + userId, fetcher)
+ }, [useId])
+
return (
setShow(true)}
+ {/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
diff --git a/pages/docs/prefetching.pt-BR.md b/pages/docs/prefetching.pt-BR.md
index f104e30e..640026d5 100644
--- a/pages/docs/prefetching.pt-BR.md
+++ b/pages/docs/prefetching.pt-BR.md
@@ -14,7 +14,9 @@ Irá pré-obter os dados quando o HTML carregar, antes mesmo de iniciar a baixar
## Prefetching Programático
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
```jsx
import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
}
```
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
```jsx
function App({ userId }) {
const [show, setShow] = useState(false)
+
+ // preload in effects
+ useEffect(() => {
+ preload('/api/user?id=' + userId, fetcher)
+ }, [useId])
+
return (
setShow(true)}
+ {/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
diff --git a/pages/docs/prefetching.ru.md b/pages/docs/prefetching.ru.md
index 3f67b952..4ff71887 100644
--- a/pages/docs/prefetching.ru.md
+++ b/pages/docs/prefetching.ru.md
@@ -14,7 +14,9 @@
## Программная предварительная выборка
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
```jsx
import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
}
```
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
```jsx
function App({ userId }) {
const [show, setShow] = useState(false)
+
+ // preload in effects
+ useEffect(() => {
+ preload('/api/user?id=' + userId, fetcher)
+ }, [useId])
+
return (
setShow(true)}
+ {/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
diff --git a/pages/docs/prefetching.zh-CN.md b/pages/docs/prefetching.zh-CN.md
index aa5ad54a..3db98319 100644
--- a/pages/docs/prefetching.zh-CN.md
+++ b/pages/docs/prefetching.zh-CN.md
@@ -14,7 +14,9 @@
## 手动预请求
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
```jsx
import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
}
```
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
```jsx
function App({ userId }) {
const [show, setShow] = useState(false)
+
+ // preload in effects
+ useEffect(() => {
+ preload('/api/user?id=' + userId, fetcher)
+ }, [useId])
+
return (
setShow(true)}
+ {/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User