CSR・SSR・SSGを初学者がふんわり理解するための記事

はじめに

Web系を学んでいるとよく聞く単語
【CSR】【SSR】【SSG】

Next.jsをいじくり回しているとよく検索欄に出てくるので、勉強がてらまとめてみることにします。

初学者の皆さん、私と一緒にふんわり理解しましょう！！
つよつよエンジニアのみなさん、間違っていることがあればビシバシご指摘ください><

そもそもレンダリングってなんだろう

Next.jsちゃぱちゃぱ勢の私としてはここから調べていく必要がありました。
調べたところ

指定したリソースをブラウザ画面に表示すること

だそうです。

ふむふむ、、、、、ん?
え、皆さんわかりました？

つよつよエンジニアのみなさんはきっとこれで分かるんでしょう。
参考にさせていただいた記事の執筆者様もきっとつよつよなんだ、、、

まあでも、ふんわり分かればいいんです。ふんわり。

噛み砕いて書くならば、

レンダリングとは
ブラウザさんがサーバーさんからもらったデータを解釈して、わたしたちが目にするようなwebページとして描画すること。

こんな感じにしておきましょう。(させてください笑)

CSR (Client Side Rendering)

クライアントサイドレンダリング
一番想像しやすい、、、?
Reactなどクライアント側Javascriptによってページが描画されるものがこれにあたるみたいです。

create-react-app なんかで作られるデフォルトプロジェクトの描画方法ですね。
クライアント側のJavascriptで描画するってことは、初期状態は真っ白で何もないということで、
つまりSEO(Search Engine Optimization : 検索エンジン最適化)に不利であるそうです。

なるほどなるほど、
Reactでフツーにつくったwebサイトはクライアント側でレンダリングされているってことか。

クライアント側で作られるってことは、SEOクローラーからしたら、何も見えないってことだから、
上位に表示してほしいって言ったって無理なもんですな。

じゃあちょこっとまとめます。

CSRとは
クライアント側でレンダリングする方式。Reactがこれに当たる。
SEOクローラーさんは見れないのでSEOには不利。

SSR (Server Side Rendering)

サーバーサイドレンダリング
Next.jsをいじっていると一番聞くやーつ。

サーバーサイドでレンダリングすることでwebページを作ることですね。
サーバーサイドでレンダリングしてくれているのでSEOクローラーさんもニッコリ。
サーバー側でレンダリング処理を行うから表示速度は早いものの、リクエスト毎の生成となるので、サーバーの負荷が増加するそうです。

SSRをしらべていると、やたらプリレンダリングなる単語が出てくるので、こちらも調べてみます。
(Nextやってるなら知っておけというツッコミは真摯に受け止めます)

プリレンダリング

プリレンダリング機能は、ウェブサイトを表示する際に必要なデータ取得やJavaScriptをWebサーバーで実行し、HTMLの生成を行います。

ん、、、?
んん、、、？？

SSRのことじゃないの?
ちゃぱちゃぱ勢は混乱してきました。

よーく調べたら、プリレンダリングの方式としてSSRとSSGがあるそうです。
知らなかった、、、！

Nextさんはデフォルトでプリレンダリングしてくれてるそうです(これはなんとなぁく知ってたやーつ)。
だから早いし、SEO対策にもなるってことなんですね。

ふむふむ。
Nextさんすばらしい。

ではSSRについてもまとめてみます。

SSRとは
サーバー側でレンダリングする方式。リクエストごとにページを生成する。
パフォーマンスとSEO向上に一役買っている。

SSG (Static Site Generator)

スタティックサイトジェネレーター

名前がかっこいい(ﾎﾞｿｯ)

SSGはアプリのビルド時にデータを取得、HTMLの生成を行って、サーバー上にキャッシュさせておく方式らしいです。

それだとDBなどのデータの変更が反映されないのでは??と思いましたが、どうやらそういった問題もしっかり対応されているようです。(ちゃぱちゃぱ勢にはちょっと難しすぎたので割愛させてください><)

基本的に静的サイト(HPやLP)に向いているそうです。
キャッシュさせておくことができるので爆速ですしね。

私がちゃぱちゃぱしているNextだったり、昨今話題のAstroやGatsbyなんかがSSGになります。

SSGについても軽くまとめます。

SSGとは
ビルド時にページを生成して、サーバ上にキャッシュさせておくことができる方式。爆速。
静的なページで利用されることが一般的。

おわりに

ふんわり理解できた、、、と思いたい。
でも、実際に開発してみないとわからないことのほうが多いかなと思います。
概念だけでも知っておいて損はないはず、、、！

もし今後勉強していくなかで発見があれば随時追記していこうかなと思います。
Nextちゃぱちゃぱ勢頑張ります！