SvelteKit を使い始めたばかりで、ドキュメントを読みました。アプリで SSG を使用し、すべてのページをプリレンダリングしたいと考えています。ドキュメントに記載されているとおりにアプリを構成しましたが、説明どおりに何も機能しないようです。
私が達成したいこと:
1. SSG（プリレンダー）
ビルド時に静的コンテンツ (例: ) を HTML に生成<h1>します。<p>クライアント側のページを JS でハイドレートしないでください。可能な限り回避したいのですが、読み込み時間が長くなり、一部のユーザーは JS を無効にしており、SEO に適していません。なぜそんなことをするのか、何のメリットもないと思います。JS でデータを生成するのは、データが変化している場合にのみ有効ですよね? また、「水分補給なし」と「事前レンダリング」の間に違いは見られません.
2.SSRを無効にする
サーバー上でコードを実行して、ページまたはリクエストをレンダリングしないでください。したがって、localStorageなどが利用可能であると想定できます。
3.ノードサーバーを使用せずにアプリを開く
これはそれほど重要ではありませんが、ブラウザで index.html ファイルをローカルで開くだけでアプリが動作するようになると便利です。その場合、Github Pages で動作します。純粋なSvelteで書かれたアプリを構築した後、どのようにできるか。
4.SvelteKitのみ
SvelteKit を設定するだけで十分であればいいでしょう。外部ライブラリや別の Svelte フレームワークの助けを借りずに。
私が試したこと
これはgithubの例です。最初のディレクトリには、ビルドが生成された再現可能な例があります。2 番目は、手動で書いた、ビルドによって得られると予想される出力の大まかな内容です。
新しい SvelteKit プロジェクトを開始し、.xml 経由で静的アダプターをインストールしnpm i -D @sveltejs/adapter-static@nextました。svelte.config.js次に、ファイルをセットアップします。
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
adapter: adapter(),
ssr: false,
hydrate: false,
prerender: {
crawl: true,
enabled: true,
}
}
};
export default config;
ssr をグローバルにオフにしたので、localStorage を使用しても安全だと思いました。そこで、インポートした外部スクリプト（store.js）で使用しました。しかし、ビルド時に次のエラー メッセージが表示されました。
また、「SSRバンドルを構築中」と書いてあるのに気がつきましたが、それはなぜでしょうか...
ビルドを見ると、すべての要素がまだ JS でレンダリングされており、ブラウザーで開くだけでは機能しません。
これが私が言いたかったことのすべてです。読んでくれて、助けてくれてありがとう！
Edit1: ちょっと最初の部分を考え出しました。
ハイドレーションは、必要なコンテンツのみをレンダリングします。したがって、その他は HTML に事前にレンダリングできます。クライアント側のルーターは、JS でレンダリングする主な原因です。そのため、ハイドレーションを有効にし、ルーターを無効にしました。しかし、アプリを起動しても何も表示されません。そのため、ssrを有効にする必要がありました（したくありませんが）。
これがどのようにsvelte.config.js変更されたかです：
ssr: true,
hydrate: true,
router: false
これで、コンテンツは希望どおりに生成されましたが、ssr が有効になっています。