はじめに
次のgatsby-starterを利用して爆速ポートフォリオ作りを行いたいと思います。
そもそもGatsbyとは
React用の静的サイトジェネレーターとなります。
これがまた素晴らしいものでGitHubPageなどで手軽に高速なサイトを構築することができます。
Gatsbyは公式サイトの日本語ドキュメントも充実しており、チュートリアルを行うことでどんなことができるのか一通り理解することができると思います。
Gatsby.jsドキュメント
特にReactをやりたい！場合は、Reactでカスタマイズを行えば、比較的なんでもできます。
構築自体は簡単なので、いろいろチャレンジしてみてください！
どんな時にGatsbyを使うのか
Reactでアプリケーションを作る時に主に利用されるのが次の３パターンかと思います。
結局のところなんでもそれとなく作れてしまうところでもあります。
好み的な要素は大きいかと．．．
- CRA(Create React App)
- Next.js
- Gatsby
簡単な違いをさらっとだけご紹介します。
CRA(Create React App)
Reactを初めましての方は、まずはこちらから触ってみるのではないでしょうか。
主な用途としては、クライアントサイドでゴリゴリレンダリングするSPAとしてサイトが構築されます。
なんでもそつなく対応できます。
パフォーマンスがいいわけではないため、入門として始めるには良いと思います。
用途
- 雑に言えば、なんでもOK
Next.js
サーバーサイドレンダリング(SSR)でサーバー側でHTMLを生成してあげる強者です。
結構クセがあり、CRAでは上手く行ってたのに、Next.jsでは動かない…という悲しいお話も聞きます。
データ更新などが多い場合、クライアント側に負荷をかけることは少ないので、ユーザー的にはCRAよかいいのかなと。
SSRにする際に気にされることとしてはSEOを意識してSSRを取り入れることが多い印象があります。
用途
- SEOを意識するサイト
- ECサイト
- BtoC向けサイト
Gatsby
ビルド時にHTMLを生成し、クライアントが読み込むものはHTMLファイルとなります。(生成済み)
そのため、ユーザーは読み込み時間を意識することなく、爆速でページが表示されることとなります。
※API通信がなければ…
読み込みが多いサイトなどはあまり向かないかもしれません。
用途
- コーポレートサイト
- ブログ
- ポートフォリオ
開催レポート
https://note.com/miracleave/n/n81222169027d?magazine_key=m27fc128773e9
