Zenn
💆‍♂️

備忘：SvelteKitのSSGでHTMLヘッダが消滅する問題への対処

2023/08/22に公開
TypeScript
Svelte
SvelteKit
tech

何が起こったか

  • SvelteKit + SSGで個人サイトを作っている
  • <svelte:head>を使用して各ルートにヘッダ内容を書き込んでいる
  • ビルドすると何故かベースルートのヘッダ内容が消える。
    • 実際にページにアクセスすると、ページタイトルなどのヘッダ情報はちゃんと更新されているので、とりあえずページを見る分には問題無いが、OGが正しく取得出来ない（DiscordやTwitterにリンクを貼り付けた際にプレビューが上手く表示されない）という不具合がある。

結論

フォールバックページをindex.htmlに指定しているのが原因だった。ビルドされたhtmlをよく見ると分かるが、フォールバックページに遷移する為のJavaScriptが生成されており、その巻き添えを食らってHTMLヘッダが消滅していると思われる。

対処

adapter-staticのfallback設定をindex.html以外にする。

  • 404用のページを作っておくと良い。
svelte.config.js
adapter: adapter({
    pages: 'build',
    assets: 'build',
    fallback: '/404/index.html', // ←ココ
    precompress: false,
    strict: true
})

Discussion