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次に、ファイルをセットアップします。

ssr をグローバルにオフにしたので、localStorage を使用しても安全だと思いました。そこで、インポートした外部スクリプト（store.js）で使用しました。しかし、ビルド時に次のエラー メッセージが表示されました。

また、「SSRバンドルを構築中」と書いてあるのに気がつきましたが、それはなぜでしょうか...

ビルドを見ると、すべての要素がまだ JS でレンダリングされており、ブラウザーで開くだけでは機能しません。

これが私が言いたかったことのすべてです。読んでくれて、助けてくれてありがとう！

Edit1: ちょっと最初の部分を考え出しました。
ハイドレーションは、必要なコンテンツのみをレンダリングします。したがって、その他は HTML に事前にレンダリングできます。クライアント側のルーターは、JS でレンダリングする主な原因です。そのため、ハイドレーションを有効にし、ルーターを無効にしました。しかし、アプリを起動しても何も表示されません。そのため、ssrを有効にする必要がありました（したくありませんが）。
これがどのようにsvelte.config.js変更されたかです：

これで、コンテンツは希望どおりに生成されましたが、ssr が有効になっています。

私は過去に Vue.js を広範囲に使用していたので、このパターンはうまく翻訳できないかもしれませんが、それは理解しています。

私の質問は、なぜ次のものがsvelteで機能しないのか、そして使用する正しいパターンは何ですか.

編集ボタンをクリックすると期待どおりに動作しますが、保存をクリックしてもメイン コンポーネントに戻りません。値は更新されているように見えますが、コンポーネントは更新されません。

Main.svelte

編集.svelte

$: ステートメントを反応的にすることさえ試みました。動作しません

スリムなバージョン: 3.34.0

スベルテキット