見出し画像

【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)からそれをエクスポートします。子レイアウトとページは親レイアウトで設定された値を上書きするため、例えば、プリレンダリングをアプリ全体で有効にし、それから動的にレンダリングする必要があるページではそれを無効にすることができます。

https://svelte.jp/docs/kit/page-options

案内に従ってsrc/routes/ 配下に「+page.server.ts」(jsでもよい)を作成します。

// src/routes/+page.server.ts

// ページのレンダリング方式を指定
// prerender: true は、事前レンダリングを有効にする
export const prerender = true;

再びアプリを起動し直すと警告は消えました。
前は、このような警告はなかったと記憶しておりますが、
仕様が変わったようです。

チュートリアルにも今回件が出ておりました。


では


いいなと思ったら応援しよう!