問題タブ [static-site-generation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svelte - SvelteKit で SSG と Prerender をセットアップする
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 が有効になっています。
next.js - Next.js next.config.js のヘッダーまたは Cookie に基づくリダイレクト
Next.js を使用しており、ブラウザーのAccept-Languageヘッダーに基づいて、すべてのパス (ルートだけでなく) をロケールベースのパスにルーティングしたいと考えています。ただし、ユーザーが地域を設定した場合は、ユーザー設定を尊重するために最初に確認する必要がある Cookie を設定します。
そのため、Cookie を確認する必要があります。Cookie が存在しない場合は、代わりにブラウザの言語ヘッダーに基づいてリダイレクトしてみてください。ISG を使用しているため、サーバー側の next.config.js リダイレクトに限定されます。
ドキュメントによると、これは機能するはずですが、ISG を使用しているため、next.config.jsリダイレクト機能でこれを行う必要があります。
この解決策を試してみましたが、うまくいきません (Cookie とヘッダーの両方が一致するため、無限のリダイレクトが発生します)。
javascript - 静的サイトジェネレーター、mvc、laravel、またはプレーンインクルード...何を使用するか
適切なツールを見つけるのに苦労しています。もちろん、主な文は「場合によります...」です。
ナビゲーション、フッター、コンタクトフォームなどに「インクルード」を使用しながら、まだ小さな会社のサイトを構築していますが、より良いアプローチは何でしょうか? 更新の頻度が十分でないため、CMS は使用せず、静的サイトのみを使用します。
私は仕事をする11tyのような静的サイトジェネレーターを見てきましたが、phpをもっと上手にしようとしているので、laravelを見るべきですか?
市場にはたくさんあるので、少し迷ってしまいます。コミュニティは何を使用していますか? いくつかのアイデアや例を得ることができれば、本当に素晴らしいことです。よろしくお願いします。良い一日を！