🥞

SSGのメリットとは何か、の主観。

2 min read

NuxtやNext、SvelteKitと、ほーんという感じで使ってきたけれど、
改めてSSGってなんだ?となり、調べてみたことを書いていく。
HTML/CSS/Jsをサーバーに上げてそれらをリクエストに応じて返却するのと何が違うのだろう・・・。

SSGってまずなによ

Static Site Generator
静的 サイト 発生器

なるほど、わからん。普通にサイト作るのと違うのか、

NuxtとかNextとかでよくある構成を大雑把にするとこうなります。
src配下で開発したものをbuildタスク叩いてdistに吐き出す。

.
├── dist // yarn buildとかそのへんのでサーバーサイドにデプロイされるファイル郡
└── src // 開発時のソースコード郡格納

普通にウェブサイトをjsフレームワークつかわないで作るときもこれ。
ただ違うのがPre-rendering(プリレンダリング)が出来る。

SSGにおけるPre-renderingってなに

自分で理解するためにパン屋さんで例えます、が自分はパン屋さんではありません。

1.クライアントがパン屋さんでチョココロネを注文する

2.パン屋さんがチョココロネをちゃんと作る

3.クライアントがチョコロネを受け取る

これがごく一般的なサーバーへHTMLをリクエストした時の流れ。
こだわりのあるパン屋さんって感じがする、できたてほかほか。
サーバーはリクエストがあった時にファイルを生成してクライアントへ返すわけですね。

Pre-renderingの場合

1.クライアントがパン屋さんでチョココロネを注文する

2.たくさんつくられたチョココロネがすでにある

3.クライアントがチョコロネを受け取る

これがPre-renderingですね。パン屋さんが受注生産ではない。
こだわりの一品とかではないスタイルですね。
サーバー側でファイルを事前生成していたものをブラウザで表示させる。
確かにこれならレンダリングが早そう。ブラウザ側で描画するだけでいい。
DBからのレンダリング部分だけSSRとかもNextはやってくれるので、便利ですね。

SSGのメリットってなに。

主観ではありますが、特定のjsフレームワークを用いて、開発環境をCLIに任せて作れる。
これだけでも十分なメリットだと思います。昨今騒がれるweb core vitalでの点数も考慮されているのかのようなパフォーマンスが発揮されるのも嬉しい。svelteでこの前サイト制作したときALL100点だった。すごいよね。

それに加えてPre-renderingが出来る、もしくは選べる。
ただSSRのほうがページ遷移等がとても早いなどの意見も見る、このあたりはプロジェクトやページ数、主目的が何かにもよりそう。

認識あってるかどうか間違っている気もするので、間違ってるよ!!!!ってなったら教えてください。

Discussion

ログインするとコメントできます