LoginSignup
11
6

More than 3 years have passed since last update.

@wqwqinエンジニアと人生コミュニティ

【Nuxt】SSR CSR の違いを理解せず5時間以上を燃焼

Last updated at Posted at 2020-04-11

SSR CSR の違いをわかっておらず、5時間、いやもっと燃焼しました。
その際に教えてもらったこと、調べたことをここに書いておきます。

結論

CSRは、ブラウザからAPIに対してリクエストすることを指し、
SSRは、Node.js(コンテナ)からAPIに対してリクエストを指します

差分

Node.jsを使用するかしないかです。

コードベース

CSR　→　nuxt-linkなどでの遷移時
SSR　→　コンテナからコンテナにアクセスする時
DockerとNuxtのSSRでConnectionRefusedが発生する問題の原因を解説する - NAKKA-Kの技術ブログより引用

つまり、asyncDataを実行するタイミングが異なるということです！

イメージ図

SSR

image.png

CSR

image.png

DockerとNuxtのSSRでConnectionRefusedが発生する問題の原因を解説する - NAKKA-Kの技術ブログを参考にした

SSRに関する記事

SPA、SSR、プリレンダリングの違いをまとめてみた - Qiita
SSR, CSRについてのメモ | Qrunch（クランチ）
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 － Publickey

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
6