【IT】Svelte入門3(SvelteKit)(コンソール画面での警告)
皆さま
こんにちは
今回は、学習中にコンソール画面出た警告メッセージの対応をします。
今回は、Sveltekitを用いて学習しております。
<前提>
・Vite使用(npm create vite@latest)
・Svelte:5.22.6
・SvelteKit:2.19.0
ページの事前レンダリングを有効にするため、
src/routes/+page.svelteにオプションしておりました。
// src/routes/+page.svelte
<script lang="ts">
// ページのレンダリング方式を指定
// prerender: true は、事前レンダリングを有効にする
export const prerender = true;
</script>アプリを起動したときにコンソールに以下の警告が出ておりました。
「`export const prerender` will be ignored — move it to +page(.server).js/ts instead. See https://svelte.dev/docs/kit/page-options for more information.」
※`export const prerender` は無視されます。代わりに +page(.server).js/ts に移動してください。詳細については、https://svelte.dev/docs/kit/page-options を参照してください。
$ npm run dev
> sveltekit-tutorial@0.0.1 dev
> vite dev
VITE v6.2.0 ready in 734 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
src/routes/+page.svelte
`export const prerender` will be ignored — move it to +page(.server).js/ts instead. See https://svelte.dev/docs/kit/page-options for more information.警告の案内のページ(日本語版)を確認します
これらはそれぞれオプションを +page.js や +page.server.js からエクスポートすることでページごとに、または共有の +layout.js や +layout.server.js を使用してページグループごとに制御することが可能です。アプリ全体に対してオプションを定義するには、最上位のレイアウト(root layout)からそれをエクスポートします。子レイアウトとページは親レイアウトで設定された値を上書きするため、例えば、プリレンダリングをアプリ全体で有効にし、それから動的にレンダリングする必要があるページではそれを無効にすることができます。
案内に従ってsrc/routes/ 配下に「+page.server.ts」(jsでもよい)を作成します。
// src/routes/+page.server.ts
// ページのレンダリング方式を指定
// prerender: true は、事前レンダリングを有効にする
export const prerender = true;再びアプリを起動し直すと警告は消えました。
前は、このような警告はなかったと記憶しておりますが、
仕様が変わったようです。
チュートリアルにも今回件が出ておりました。
では
