目的
SPA構成のWebアプリケーションはクライアントでDOMをレンダリングするため、検索エンジンにインデックスされない可能性がある。そのため、SPAでSEOするために必要な情報を集めた
TL;DR
- SSRとプリレンダリングという2つの方法がある
- SSR
- サーバーでDOMレンダリングすること
- プリレンダリング
- SEOのためにページをキャッシュすること
- SSRは導入コスト高い
- レスポンスがシビアに求められる場合に検討する
SSRについて
1. SSRとは
Server Side Rendering のこと。
通常、ReactやVueなどはブラウザでJavascriptを実行し、コンポーネントのDOMを生成する。 SSRの場合、サーバーでJavascriptを実行し、コンポーネントのDOMを生成、静的なマークアップとしてクライアントに送信する。
Rails + React + hypernova でSSRする例 (AirbnbがSSRライブラリを提供している)
https://qiita.com/noriaki/items/e2dac69b9dd88334dd43
2. SSRのメリット
- SEOが向上する
- 検索エンジンのクローラーに完全なページを提供できるため
- GooglebotなどはJavascriptを実行できるようになってきている
- コンテンツの表示速度が短縮できる
- あらかじめページを生成しているため
- インターネットの速度や処理能力の低いデバイス向け
- コンテンツの所要時間がコンバージョン率に関連している場合は重要
3. SSRの注意点
- 実装コストが高い
- SEOだけであればプリレンダリング(後述)でも効果がある
- ブラウザ固有のコードを使う場合、気をつけないといけない
- サーバー側で動かない
- 特別な処理が必要になる場合がある
- 外部ライブラリなど
- サーバーの負荷が増える
- クライアントで実行する描画処理をサーバーで処理するため
4. SSRよもやま
- SSR不要派の方々
- Vueの公式でも以下のように書かれている
あなたのアプリケーションに SSR を使用する前に、まず初めに、実際に SSR が必要かどうかを考える必要があります。これは主に、アプリケーションのコンテンツに対する時間の重要性によります。 例えば、最初の負荷の数百ミリ秒がそれほど重要ではない内部的なダッシュボードを構築する場合、SSR は過度なものとなるでしょう。しかし、コンテンツの所要時間が非常に重要な場合は、SSR を使用してできるだけ早く初期ロードパフォーマンスを保つことができます。
プリレンダリングについて
1. プリレンダリングとは
SPAとして構成されたWebページを検索エンジンにインデックスさせたい場合に使う。主にSEO目的。 クローラーからあるページにアクセスがあった場合、そのページをサーバー側でヘッドレスブラウザなどを使ってレンダリングし、静的なHTMLとしてキャッシュしておく。次回、クローラーがそのページアクセスしてきた場合、キャッシュされたページを返す。
レンダリング・ページキャッシュをするためのSaaSがある。
https://prerender.io/documentation
Vueによるプリレンダリングの解説 -> https://ssr.vuejs.org/ja/#ssr-vs-%E3%83%97%E3%83%AA%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0-%E4%BA%8B%E5%89%8D%E6%8F%8F%E7%94%BB
2. プリレンダリングのメリット
- SSRと比較して導入コストが低い
- クローラーに対してのみ動作する
- キャッシュするだけ
3. プリレンダリングの注意点
- 頻繁に内容が更新されるページが多数ある場合
- 変更が多いとそもそもキャッシュが利かない
- 数が多いとページをキャッシュするのに時間がかかる
SPA知見
まとめ
対SEOならプリレンダリングで事足りる