You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/README.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,20 +2,20 @@
2
2
title: Universal load functions
3
3
---
4
4
5
-
In the [previous section on loading](page-data) we loaded data from the server using `+page.server.js`and`+layout.server.js`files. This is very convenient if you need to do things like getting data directly from a database, or reading cookies.
-You want to delay navigation until an image has been preloaded, to avoid pop-in
12
-
-You need to return something from `load` that can't be serialized (SvelteKit uses[devalue](https://github.com/Rich-Harris/devalue)to turn server data into JSON), such as a component or a store
In this exercise, we're dealing with the latter case. The server `load` functions in `src/routes/red/+page.server.js`, `src/routes/green/+page.server.js` and `src/routes/blue/+page.server.js`return a `component` constructor, which can't be serialized like data. If you navigate to `/red`, `/green` or `/blue`, you'll see a 'Data returned from `load` ... is not serializable' error in the terminal.
14
+
この演習では、最後のケースを扱います。`src/routes/red/+page.server.js`、`src/routes/green/+page.server.js`、`src/routes/blue/+page.server.js`の server `load` 関数は、シリアライズできない `component` コンストラクタを返します。`/red`、`/green`、`/blue` に移動すると、ターミナルで 'Data returned from `load` ... is not serializable' というエラーが表示されるでしょう。
15
15
16
-
To turn the server `load`functions into universal `load`functions, rename each `+page.server.js`file to `+page.js`. Now, the functions will run on the server during server-side rendering, but will also run in the browser when the app hydrates or the user performs a client-side navigation.
16
+
server `load`関数を universal `load`関数に変えるため、各 `+page.server.js`ファイルを `+page.js` にリネームします。これで、この関数はサーバーサイドレンダリング中にサーバーで実行されるものの、アプリのハイドレーション中またはユーザーがクライアントサイドナビゲーションを実行しているときにも実行されるようになります。
17
17
18
-
We can now use the `component` returned from these `load` functions like any other value, including in `src/routes/+layout.svelte`:
@@ -34,4 +34,4 @@ We can now use the `component` returned from these `load` functions like any oth
34
34
</nav>
35
35
```
36
36
37
-
Read the [documentation](https://kit.svelte.dev/docs/load#shared-vs-server) to learn more about the distinction between server `load` functions and universal `load` functions, and when to use which.
37
+
server `load` 関数と universal `load` 関数の違いや、その使い分けなど、詳細については[ドキュメント](https://kit.svelte.jp/docs/load#shared-vs-server)をご参照ください。
0 commit comments