モダン技術を利用したReact製静的サイトジェネレータ

• Reactで作られている

• モダン技術として、webpackや最近人気の高いSQL言語のGraphqlを用いている

Gatsbyの特徴

爆速パフォーマンスであること！！！

• 事前ビルドで、必要なHTML、JS、Jsonファイルを生成することで、サイトアクセス時にユーザーからの要求に大して、迅速にページを配信することができる

• SPA（Single Page Associstion）でもあるので、生成されたページはJavaScriptを用いて、部分的に差し替えることで、高速な画面遷移を実現する

• Build時にSSR（Server Side Rendering）をして、JavaScriptを実行済みのHTMLを生成することで、初回のページローディングを高速化している

• PWA（Progrresive Web Apps）の構築、配信するための実装パターンであるPRPL（Push Render PreCash Lazy-Load）を採用している。これは、初回ロード時には、重要なHTML、Asset類のみをローディングし、ロード後に他のページのリソースをプリフェッチすることで、他ページへの遷移を高速化している。

セキュアで安価なサイト運営

Gatsbyで作成したサイトは静的サイトなので、動的サイトに比べてホスティングのコストを安価に抑えることが可能。また、ホスティング先には静的ページしか置いていないので、データベースなどへのハッキングの恐れがない。万が一、サイト自体が破壊された場合でも、静的サイトを再度アップすれば棲むので、セキュアな運用が実現できる。

CMSをデータソースとして活用できる！

CMSの代表例は、WordPressやContentfulなどです。CMSをデータソースとすると、ブログの記事をとても楽に管理することができる。

Gatsbyの仕組み

build時にGraphqlを使って、Markdownファイル、CMS、その他データを取得、変換、使用できるようにする。この時に取得したデータはJsonファイルとして保存される。そして、build時に生成されたHTML、CSS、JS、Jsonファイルをホスティングサーバーにデプロイすることで、サイト公開してブラウザからアクセスできるようになる。