Open3

Static Site Generator 作る

おーみーおーみー

GatsbyやReact StaticのようなStatic Site Generatorがどういう仕組みで動いてるのか気になったので作ってみる。このスクラップを開く前に少し実験してみていろいろと疑問点が浮かんできたのでそこを解決していく。

おーみーおーみー

Progressive SSG

Progressive SSG、とReact Staticが呼んでいるものがある。

https://github.com/react-static/react-static#what-is-a-progressive-static-site

A progressive static site is a website where every statically exported HTML page is an entry point to a fully-featured automatically-code-split React application.

Gatsbyが行っていることも同じで、これらのSSGはHexo、Hugo、Jekyll、Hakyllといった旧来型SSGとは異なり、Reactによるルーティングを導入し、ページごとにcode-splittingを行うなどWebアプリの技術を投入することで爆速な静的Webサイトを構築する。

おーみーおーみー

React Routerでも使っちゃおうかな!と思ったところめちゃくちゃRemixをお勧めされた。

https://reactrouterdotcom.fly.dev/docs/en/v6/guides/ssr

考慮すべきことについて教えてくれた。

  • ブラウザとサーバーのためにコードをバンドルする必要がある
    • それはそうね。webpackとかでいいかな
  • サーバーのコードをブラウザに混ぜ込まないようにする
    • それはそうね。そんなに大変かそれ?
  • ブラウザでもサーバーでも動くようにcode splittingする
    • code splittingわからないから難易度がわからん
  • サーバーサイドでのデータ読み込み
    • データフェッチングの実装はあまりやる気がないけど大変そうかも
  • クライアントでもサーバーでも動くデータ読み込み戦略
    • これSSGでは関係ないのでは?知らんけど
  • code splittingをブラウザとサーバーでハンドリングする(?)
    • 被ってね?
  • ちゃんとHTTPステータスコードとかリダイレクトをやる
    • SSGでは関係なさそう
  • 環境変数と機密情報
    • SSGでは関係ないぜ

GatsbyとReact Staticはreach routerを使っている。