web-dev-qa-db-ja.com

Next.js：getInitialProps（）でのデータの取得：サーバー側とクライアント側

Next.jsを使用していますが、Expressを使用するカスタムサーバーがあります。データベースのデータを必要とするページがあります。

getInitialProps()は、サーバー上で実行されている場合、データベースからデータを取得して返すだけで問題なく実行できます。ただし、getInitialProps()はクライアント側でも実行できます（ユーザーが最初に別のページを要求してから、このページに移動するとき）。その場合、私はクライアント側にいるので、明らかにデータベースからデータを取得することはできません-サーバーと通信して取得するように要求するためにAJAXを使用する必要があります私のために。

もちろん、これは、このリクエストを処理するためにサーバー上で新しいExpressルートを定義したことを意味します。これには、getInitialProps()のサーバー側部分とまったく同じコードが含まれます。

これを処理する最良の方法は何ですか？

javascriptajaxexpressnext.js
7
ShdNx

良い解決策が存在しないように思えたので、この問題に対するシンプルでエレガントな解決策を提供するライブラリを作成して公開しました： next-express 。

5
ShdNx

getInitialProps()は常に、サーバーでのみ設定されるパラメーターとして要求と応答を受け取ります。

static async getInitialProps({req}){
 if(req){
   // called on server
 } else {
   // called on client
 }
}

https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

19
Rob

getInitialPropsで、データベースから取得するためのロジックを持つ新しい高速ルートへのhttpリクエストを作成する必要があります。そのロジックは、UIレイヤーに存在することはありません。

クライアントまたはサーバーのどちらにいても、このルートを呼び出す必要があります。コードを分岐する必要はありません。

4
tom-james-watson

Next.jsアプリとは異なるAPIを作成します。次のアプリは、たまたまサーバー上でページをレンダリングするフロントエンドクライアントと考えてください

4
BHBH