contentSPA、SSR、プリレンダリングの違いをまとめてみたJavaScriptVue.jsnuxt.jsNuxt.jsを使い始めましたが、SPAとSSRの違いをあまり理解していなかったので、それぞれの動作と違いをまとめました。SSRについて調べる過程でプリレンダリング(事前描画)についても学んだことも一緒にまとめています。普段の業務ではコードそのものに目が行きがちですが、動作の違いやメリット/デメリットをしっかり理解した上で技術選定をすることが必要だと感じます。動作の流れ1.クライアント側からHTTPリクエストが送られる2.サーバーがhtmlファイルを生成3.サーバーからレスポンスとしてHTML/CS/JSが返ってくる4.ブラウザ側でhtmlファイル内のJSを実行。ここにAjaxなど再度サーバーとの通信が必要な処理が含まれていた場合は、再度サーバーへリクエストを送る。Application)ページ遷移をすることなく、同一のページ内でコンテンツのみを切り替えるアプリケーション動作の流れ初回のページ読み込み先ほどと同様に、クライアントからのリクエストに応じてサーバーからHTML/CS/JSが返ってくるので、クライアント側(ブラウザ)でjsを実行してページを表示します2回目以降1.クライアント側から差分の更新に必要なデータのみのリクエストが送られる2.サーバー側でjsonデータを用意3.レスポンスとしてjsonやXML形式でデータが返ってくる4.ブラウザ側のjsで差分のみを更新してHTMLを生成する先ほどとの一番の違いは、クライアント側の操作によって新たに必要となった差分のデータのみをHTTPリクエストで要求することです。この際のリクエストにはAjaxなどが使われ、サーバーからのレスポンスもjsonデータなどです。動作の流れ1.クライアント側からリクエストが送られる2.サーバーが更新後のHTMLを生成してクライアントに返す3.ブラウザ側でHTMLを表示するAjaxなどでHTTPリクエストを送信する部分はSPAと同様です。SPAとの違いはHTMLをクライアント側(ブラウザ)ではなくサーバーで行う点にあります。ガイドでSSRとの比較がされています。SSRとの大きな違いは、クライアントからのリクエスト時にサーバーを使用してHTML生成をするか、ビルド時にHTMLファイルを生成するかです。requestStockLike79amakawa@amakawa_事務職→フロントエンドエンジニアに転職して奮闘中。upLoginユーザーは見つかりませんでした。