web-dev-qa-db-ja.com

Next.JS：サーバー側ですべてのリクエストを行う方法

Python APIとPostgresデータベースからデータを取得する Next.JS アプリを構築しています。

通常、これは単純ですが、ユーザーのクライアントではなくサーバー側からすべての要求を送信する必要があるという要件は除きます。

私は getInitialProps を使用して作業していますが、READMEのこの行のために、これが必要な完全なソリューションであることを確信できません。

最初のページの読み込みでは、getInitialPropsはサーバーでのみ実行されます。 getInitialPropsは、Linkコンポーネントを介して、またはルーティングAPIを使用して別のルートに移動する場合にのみクライアントで実行されます。

getInitialPropsは最初のページの読み込み用に設計されており、その後のサーバー側のデータフェッチ用ではないようです。

すべてのリクエストがサーバー側から来るようにNext.JSアプリを設計するにはどうすればよいですか？

ノート：

  • すべてのリクエストが基本的に初期ページのロードをもたらすことは問題ありません。
  • ユーザーClientは、Node（Next.JS）サーバーに公開されているので、それとやり取りしても問題ありません。現在、Next.JSを expressサーバー 。

助けのために事前にタイ

javascriptreactjstypescriptserver-sidenextjs
9
AuthorOfTheSurf

Next.JSをExpressでラップすることで解決策を見つけました！

簡単なサンプルプロジェクトをGitHubにプッシュしました here

リポジトリには、Nice READMEと、何が起こっているのかを詳しく説明するコード内のコメントがあります。

簡単な要約：

  • Next.JSをExpressサーバーにラップします。標準のNext.JSアプリで暗黙的に発生するnextApp.render(...)を呼び出して、ページを明示的にレンダリングします。 server.js を参照してください
  • エクスプレスルーティングを使用します。 nextApp.render(...)を使用してページをレンダリングする前に、サーバー側のリクエストを行います。 server.js を参照してください。
  • 標準のアンカータグを使用して、ページ要求がExpressサーバーにヒットするようにします。 index.js を参照してください
  • nextApp.renderは、ページに渡された値をctxのコンテキスト（getInitialProps）パラメータで提供します。これらの値をページで使用できるようにすることができますthis.propsをgetInitialPropsに返します。 stars.js を参照してください

提案や改善を歓迎します！

9
AuthorOfTheSurf

これは一般に悪い考えです。

SPAの全体のポイントは、ページ全体のロードを防ぐことです。

getInitialPropsを使用すると、最初のページリクエスト中、および後続のナビゲーション中に、すべてのページに対して呼び出されるので、データをフェッチできます。

次に、APIを使用してサーバーと通信することをお勧めします

0
Ascherer