こんにちは。よっしーです(^^)
今日は、SvelteKitでの移行について解説しています。
背景
SvelteKitでの移行について調査する機会がありましたので、その時の内容を備忘として記事に残しました。
プリレンダリング中に動的環境変数は使用できません
$env/dynamic/publicと$env/dynamic/privateモジュールは、$env/static/publicと$env/static/privateが公開するビルド時の環境変数とは対照的に、実行時の環境変数へのアクセスを提供します。
SvelteKit 1のプリレンダリング中では、これらは同一のものでした。そのため、’動的’環境変数を使用するプリレンダリングされたページは、実際にはビルド時の値を’焼き付けて’しまっており、これは正しくありません。さらに悪いことに、ユーザーが動的にレンダリングされたページに移動する前にプリレンダリングされたページにアクセスした場合、$env/dynamic/publicはブラウザ内でこれらの古い値が設定されてしまいます。
このため、SvelteKit 2ではプリレンダリング中に動的環境変数を読み取ることができなくなりました — 代わりにstaticモジュールを使用すべきです。ユーザーがプリレンダリングされたページにアクセスした場合、SvelteKitはサーバーレンダリングされたHTMLから読み取る代わりに、サーバーから$env/dynamic/publicの最新の値を要求します（デフォルトでは_env.jsというモジュールから — これはconfig.kit.env.publicModuleで設定可能です）。
解説
この変更は環境変数の扱いに関する重要な更新について説明しています：
- 環境変数の種類：
- 静的（static）環境変数：
- ビルド時に設定される値
$env/static/publicと$env/static/privateで利用可能- 動的（dynamic）環境変数：
- 実行時に設定される値
$env/dynamic/publicと$env/dynamic/privateで利用可能
- バージョン1での問題点：
- プリレンダリング時の静的・動的環境変数の区別がない
- 動的環境変数がビルド時の値で固定されてしまう
- プリレンダリングページでの古い値の問題：
- ユーザーが最初にプリレンダリングページにアクセス
- その後、動的ページに移動
- 古い環境変数値が保持される
- バージョン2での改善：
- プリレンダリング時の動的環境変数使用を制限
- 代替手段の提供：
- 静的モジュールの使用推奨
- サーバーからの最新値取得機能
- 設定オプションの追加：
- デフォルト：
_env.jsモジュール config.kit.env.publicModuleで設定可能
この変更により：
- より正確な環境変数の管理
- 古い値による問題の防止
- より明確な静的/動的環境変数の区別
が実現されています。
おわりに
今日は、 SvelteKitでの移行について解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント