問題タブ [getstaticprops]
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.
next.js - ユーザーがコンテンツを作成する Web アプリを提供するために、NextJS getStaticProps を使用する必要がありますか?
元の質問はGithub ディスカッションに投稿されました。しかし、誰もまだその質問に答えていません。では、ここで運を試してみましょう。
環境
Ebay のように、ユーザーがコンテンツの大部分を作成するプラットフォーム (別名 web-2.0) Web サイトを構築しようとしています。useSWRページがロードされた後、ユーザー固有のデータを取得するために使用することにしました。ここで、キャッシュ可能で SEO 可能なページ スケルトン データをロードするかどうかを選択getStaticPropsしています。getServerSideProps
getStaticPropsHTML ファイルと JSON ファイルを生成します。どちらもパフォーマンスのために CDN によってキャッシュできます。
getStaticPropsドキュメントから、本番環境でCDNをどのように提供する必要があるかについては詳しく説明されていません。fallbackを使用しない純粋な静的なブログのような Web ページのみを参照しているのかどうか疑問に思っていますregeneration。getServerSidePropsサーバー/ラムダの前にCDNを使用すると、より簡単でパフォーマンスの高いキャッシュアーキテクチャになる可能性があると感じています。
質問
getStaticPropsユーザーが作成したコンテンツの Web アプリを提供するために、フォールバックと再生成を備えたNextJSを使用する必要がありますか?
この質問の答えを得るには、まずいくつかのことを理解する必要があると思います。
わからないこと、関連するドキュメントが見つからないこと
getStaticProps上記のドキュメントのように、 、フォールバック、および再生成を含むページを CDN でどの程度正確に提供する必要がありますか?- フォールバックを使用する場合、ネットワーク リクエストは常に NextJs を通過する必要がありますか?
fallback&をサポートしながら、事前にレンダリングされたページの CDN をサーバー/ラムダの前に配置する例はありますregenか? 私の考えは、事前にレンダリングされたページがある場合に、サーバーのヒットを回避し、処理時間とリソースをさらに節約することです。 - 新しく生成された HTML と JSON を S3 のようなリモート ストアに保存し、NextJS をそこから読み取らせることをサポートしていますか
fallback?regeneration - 上記の質問の答えが「いいえ」の場合、サーバーレスの場合、たとえば Lambda では、新しく生成されたファイルをどのように再利用しますか? 非コールド Lambda コンテナのメモリ/状態に依存していますか? サーバーを使用する場合、新しく生成されたアーティファクトをサーバー間で共有できますか?
ドキュメントの一部を見逃していた可能性があります。手がかり、リンク、または修正をいただければ幸いです。
よろしくお願いします=]
アップデート
以下のような詳細情報を見つけました
残りの質問については、この投稿で NextJS に提起しました。
javascript - コンポーネント レベルでデータを取得し、事前にレンダリングする/ssr nextjs
私は初めて Nextjs を使用しています。
構造で構成される複数のレイアウトを作成しようとしています<Header><different-layouts-for-each><Footer>。
私が直面している問題は、getStaticProps または getServerProps がページ レベルでしか実行できないことです。
ナビゲーションに SEO が必要なので、前述の 2 つの方法のいずれかを使用して、すべてのページ ファイルでその小道具を取得する必要があると思います。
ここでの問題は、ページごとにメニュー プロパティを取得する必要があることですが、さまざまなテンプレートを使用すると、コンテンツを静的またはプリレンダリングして SEO で読み取り可能にするために、すべてのテンプレートで同じことを繰り返す必要があります。
コンポーネントでメニューの小道具を取得するの<MainNav>が理想的な状況です。
コンポーネントで asnyc/await を実行してみました:
<Header>成分
<MainNav>成分
ここでの問題は、これが promise を返し、html が実際のメニュー html ではなく「読み込み中」と表示されることです。
これについて私を助けることができるヘルプや記事はありますか?
ありがとう。