(Next.js)getServerSideProps

辞書の知識

Next.jsのSSRは、予めレンダリングされており、ユーザがこのパスを介してアクセスする際にページの形式を提供する.
この場合、注意が必要なのは、Nextです.jsは、構築中にサーバフォルダ内のhtml(SSR)にどのコンテンツを渡すべきか、静的フォルダ内のjsファイル(CSR)に渡すべきかを決定しました.
これは何を意味しますか?次のステップ.jsでは,リンクやuserrouterなどのCSRルーティング手法がない場合,それ以外にサーバ生成のHTMLを渡す必要はないと考えられる.(jsをブラウザに渡すことで登録責任を移行)

たとえば、トップページのインデックスです.jsでは,リンクとaタグを用いた移動があると仮定する.
リンクはCSRの方法なので、ブラウザがレンダリングを担当します.したがって、事前構築時にjsで圧縮されたファイルをスクリプトとして静的フォルダに送信し、ブラウザがDOMにロードして処理する.
aタグはページをリフレッシュしてサーバに要求を送信し、このときSSRとなるのでNextである.jsサーバは、予めレンダリングされたhtmlファイルをブラウザに渡します.

実際,npm startの構築後,受信したhtmlのscriptではリンク移動可能なページオブジェクトのみがjsブロックファイルとして受信される.

getServerSideProps vs getStaticProps

요약 👍 
getStaticProps : 미리 html과 json prop데이터를 만들어놓는다. revalidate 옵션을 통해 주기적으로 호출되어 json 데이터를 새로 빌드한다.
getServerSideProps : 미리 html과 json 데이터를 만들어놓지 않는다. 첫 요청시 CSR처럼 압축된 js 파일만 미리 전송하고, 해당 페이지 요청이 들어오면 그때 호출되어 json 데이터를 제작하고 응답으로 전달한다.

上記の2つの関数、Nextを使用します.json形式でデータを生成し、jsサーバにデータを事前に渡すかどうかを決定します.
たとえば、


クライアントフォルダのインデックス.jsはgetStaticPropsで、コンビネーションフォルダのインデックスです.jsにはgetServerSidePropsが設定されています.
次に構築を行い、ファイルにこのような違いがあることを発見します.


clinet.jsonのみが存在するのは、getStaticPropsが構築中にこの関数を事前に実行し、完了した結果をjson形式で保存し、サーバへのアクセスを要求するとhtmlをコミットするとjson形式でスクリプトタグにデータを保存するためです.

NOTE. しかし、リンクのようなCSR形式のページが移動した場合、これらのデータをどのように伝達すればよいのでしょうか.答えは簡単です.上記のhtmlファイルではなくjsの場合のように、応答はhtmlをインプラントするのではなくjson形式で事前に作成されます.


なお、getServerSideProps関数を含むファイルは、上図のようにNextである.jsにレンダリングされません!
すなわち,サーバ側はhtml形式で作成しない.すなわち,圧縮されたjsファイルのみをクライアントに送信してCSRを行う.

getServerSidePropsのコンテキスト

getStaticPropsとは異なり、getServer SidePropsはnodeではなくコンテキストpramsです.js時のようにreq,resオブジェクトを受信することができる.

parmsはqeuryなどのエンドポイントに関する情報を取得することができ,reqはユーザが送信したデータのクッキーやbodyを取得することができ,res,さらにはnextとしてもよい.jsは、予め提示されたページの転送を担当するため、res.json形式をとる必要はありませんが、resオブジェクトによってタイトルを事前に設定したり、クッキーを設定したりすることができます.

動的パスのgetServerSideProps

既存のgetStaticPropsでは、htmlとjsonを作成するために上記の内容を再度レンダリングする必要がありますが、ダイナミックパスにどの値が含まれているかは判断できません.この値を事前に指定するには、getStaticPathsメソッドを使用して、オブジェクトのパスpropertyを使用してpre-renderingを実行し、可能なすべてのhtmlを作成する必要があります.

あるいはfallbackオプションをtrueに渡すことで、動的pathのクエリー情報が入力されるたびにgetStaticPropsを実行してhtmlとjsonデータを作成し、ユーザーに渡すことができます.
(もちろん、この場合htmlはクライアントでCSRを実行しようとしますが、この時点で必要なpropsデータはJSONによって生成されて伝達されていないため、ローディングエンクロージャを作成する必要があります.サーバ側がその要求に対するデータがない場合は、サーバ側コードを実行するgetStaticProps内部にリダイレクトします)彼のためにドアを返さなければならない.
ただし、getServerSideProps関数がCSRであっても、ルーティングを移動するたびにサーバに要求してJSONデータを受信する.これは、getServerSidePropsが毎回新しいリクエストによって呼び出されるため、getStaticPathsなどのプリプレゼンテーション操作を実行する必要がないことを意味します.

Client-siderデータを取得する必要がある瞬間

上に説明したケースは3種類あります
1.データが頻繁に変更される場合、予めデータを改ざんしてプリレンダリングすることは意味がない
2.ユーザにとって、関係性の強いデータ(個人情報)であれば、いずれにしてもユーザ情報のインポート作業を行う必要があり、予めレンダリングする必要はない.
3.データが担当する領域が小さい場合は、逆にnextである.jsサーバにとって、効率の悪いタスクが増加しました.
すなわち、これらの関数は、常に変わらない静的ページをサーバにキャッシュしてエクスポートする場合に使用するのが望ましい.