Next.jsアプリで一度だけデータを取得し、サーバーとクライアントの両方ですべてのアプリにアクセス可能にする方法
初期化する前に、リモートサーバーから設定ファイルを取得する必要があるNEXT.JSアプリに取り組んでいます。 App Serverの側面をレンダリングする前に、コールごとに1回のコールに1回要求したいです。その後、ブラウザからリモートサーバーに2番目のリクエストをすることなく、クライアント内の同じ設定を取得できます。
getInitialProps関数を_appまたは_documentファイルで使用してから、ReactのコンテキストAPIを使用して、すべてのコンポーネントに設定を目に見えるようにしてくださいが、これは実行されます。サーバー内（ブラウザから最初の通話で）とクライアントの両方で設定を要求するコード（すべてのページナビゲーション）。
Server.jsファイルを作成しようとし、そこから設定を要求し、ES6モジュール内の変数に保存します。しかし、私はこのアプローチを作ることができませんでした。これは、明らかにNext.js React Appは実際には2つの異なるアプリケーションであるため、server.jsと同じモジュールにアクセスできないためです。繰り返しますが、私は間違っているかもしれません。
基本的に、Next.jsがあらゆる種類の「ブートストラッププレイス」を提供しているかどうかを知りたいのですが、React App Next.jsに送信できるデータを生成するアプリケーションの初期化タスクを実行できます。
_app.jsまたは_document.jsのgetInitialPropsの何でも正しくありません。 Configを取得すると、pagesのコンポーネントに小道具としてコンポーネントに渡すことができます。そこから、私はあなたが2つの選択肢があると思います：
- アプリがブートストラップされたので、他のアプリをSPAクライアント側として実行します。これにより、将来のSSRが起こるのを防ぎます。明らかに、あなたはSSRの利点を失い、最初のページの負荷が長くなる可能性がありますが、それからそれはその後はスナッピーになるでしょう。
- Configを
_app.jsで取得した後、クッキーとして送信します（クッキーになるには大きすぎないと仮定しますか？）。サーバーへの将来の要求では、Cookieが自動的に送信され、最初にCookieをチェックします。存在しない場合は、設定を取得します。存在する場合は、アプリがブートストラップされているため、より高価なブートストラップをスキップします。
それで、私はそれが本当にサーバー上でブートストラップされるかどうか、そしてその後、その後に完全にクライアント側（オプション1）または1ページあたりのサーバーサイドレンダリング（オプション2）を最小限に抑えたいと思うと思います。
アプリとブートストラップが理にかなっている場合は、サーバーから複数のクッキーを送信できないことを妨げていません。そして、remember ではありませんそれをhttp-only cookieにするために、それをすべての後に読みたいと思う - それがあなたが探しているものです - サーバー上で生成されたクライアント側の設定です。