やったこと
udemyでnextJSのハンズオンをした
Nextを学ぶモチベーション
- react-router-domがなくてもRoutingができるのすごい
- reactよりもSEO対策に有利
- create-react-appはSEO対策が要求されるサイトには使えない
tailwind cssのチートシート TailwindCHEAT SHEET
NextJSについて
1. Pre-rendering
SPAではページをロードする時、まず空の html を読み込んで JS ファイルも読み込んでその JS が画面をレンダリングします。このやり方では SEO でデメリットがあったりファーストビューが遅くなったりする問題があります。
この問題を解決するため、 Next.js は基本的にすべてのページを Pre-rendering します。これはクライエント側の JS がレンダリングする代わりに、各ページに対して html を予め作っておくことを意味します。そうするとパーフォーマンスでも SEO でもより良い結果が出せます。
2. SSG
SSG は Static Site Generation の略で、言葉通り静的サイトを生成する Pre-redndering です。この方式では html がビルド時に生成され、各リクエストに再利用されます。