Next.jsは、Reactのフレームワークです。
Next.jsを使う理由のひとつとして、SEOが関係してくるのは間違いありません。
現在、フロントサイドの主流になりつつあるReactですが、SEO対策をしなければいけないサイトを考える場合には注意点があります。
Reactのプロジェクトを新規で作成する場合、主に次の２パターンで作成し始めます。
- CRA（Create React App）を使用する方法
- Next.jsを使用する方法
SEO対策を考えるべきサイトにはCRAは使えません。
その理由については後ほど確認していきますが、簡単に結論だけ言ってしまうと
- CRAで作成したページのHTMLは、JSが読み込まれてから生成される。
- つまり、JSが読み込まれる前のHTMLは、中身がない状態である。
- SEOはHTMLを読み込んで評価するため、CRAで作成したページは評価されない
- Next.jsはPre-renderingの仕組みを持ち、JSが読み込まれる前に既にHTMLを生成している
- そのため、Next.jsはSEOに対応したプロジェクトでも使用することができる
- Reactを使ってSEOに対応したWebサイトを作成したい場合はNext.jsが適している
そして、Next.jsは上記の問題を解決する仕組みを持っています。
キーワードの整理
Next.jsの特徴を理解するために、まずは必要なキーワードを知るところから始めましょう。
ここで確認するキーワードは次の通りです。
- SEO
- CRA（Create-React-App）
- Pre-rendering
- Client-side-rendering
それぞれ、簡単に見ていきます。
SEO
- Search Engine Optimization（検索エンジン最適化）
- 検索エンジンの検索結果として、上位に表示されるようにすること
- 検索結果の1番目と2番目だけでもアクセス数は２倍の差がある
- Webサイトを巡回するロボットがいて、各サイトの評価をしている
- そのためHTMLの中身はとても重要
Pre-rendering
- 事前にHTMLを生成しておくこと
- JavaScriptが読み込まれる前でもHTMLは生成されている
Client-side- rendering
- リクエストごとにブラウザでJSが実行されてHTMLを生成すること
- JavaScriptが読み込まれる前だとHTMLは生成されていない（空の状態）
Pre-renderingとClient-side-renderingの比較
Pre-renderingとClient-side-rendering
これについては、Vercel社が出しているNext.jsのドキュメントにわかりやすい説明が書いてあります。
https://nextjs.org/learn/basics/data-fetching/pre-rendering
