バイバイ、サーバーサイドレンダリング。Prerender.ioーSEOを考慮したSPA

本記事は、掲載元で2日で23K「いいね」を獲得したSviat Kuzhelev氏による「Say goodby to Server Side Rendering. Prerender.io --- SPAs with SEO in mind.」（2021年9月21日公開）の和訳を、著者の許可を得て掲載しているものです。

#バイバイ、サーバーサイドレンダリング。Prerender.ioーSEOを考慮したSPA

image is taken from this resource

##はじめに

###「完璧とは、付け加えるものがない時ではなく、取り除くものがない時に達成される。」アントワーヌ・ドゥ・サン＝テグジュペリ

私たちは皆SPA❤️です。どんな形でも良いのです。React、Vue、Angular、さらにはVanillaコーディングがどのプラットフォームで使用されたかなど関係ありません。

顧客体験を損なうことなく、JavaScriptウェブサイトの静的HTMLをクローラーに提供することで、上位表示を実現したいですか？そのアイディアをここで紹介します。

##今までとこれから

サーバーサイドレンダリング（SSR）は、何十年にもわたりうまく機能していました。解析済みのHTMLデータをクライアントサイドに送信すると、ブラウザは追加のジョブなしで、UI上の内容を簡単に表示します。変更があった場合は、ページを完全にリロードして、バックエンドから再初期化する必要があります。

😳ちょっと待ってください。私はSPA開発が大好きです！SSRはSPAとうまく動作するので、それが問題なのではありません。next.jsのようなフレームワークは数多くありますし、すべてをゼロから作成することもできるため、SEO対策を考慮した静的ウェブサイトを常に構築できます。一件落着です🌈

SSRの話を聞いて頭に浮かぶ唯一の懸念は、クライアントサイドレンダリング（CSR）に関することでしょう。そう、皆CSRが大好きです。でもここでは、SSRとCSRの違いをすべて説明するために寄り道はしません（さもなくば、この記事を読み始めなくなるでしょう）。

CSRの使用に関する共通の考え方（ワクワクします）は、複雑なUIシステムのアーキテクチャのバランスを保ちながら、認知リソースを大幅に削減できるというものです。UIで結果をすぐに確認でき、バックエンド関連の問題のデバッグに費やす時間を短縮します。どういうことか説明しましょう。

###必要なもの

ライブラリ／フレームワークのReactを私くらい好きだといいのですが。DOM APIはサーバー上でアクセスできないため、既知のReact.renderDOM()メソッドはここでは使えなくなります。（SSR好きの人は）「さあ、多くのコードベースを書き直してください」と言うでしょう！💣

少なくともReact.hidate()に変更してアプリのクラッシュを解消し、（必ず必要になる）SSR関連の勉強をどんどん始めましょう。それから、状態管理について学ぶことになるでしょう…。

💡SSR対応のSPAベースアプリケーションの作成が必要な場合、状態管理はかなり大変です。

reduxなどの状態管理用ツールを追加しましょう。UIマークアップだけでなく、バックエンドから挿入された後、最初のUIレンダリングで追加された初期化データも同期している間に、面倒で嫌になるでしょう。

###テクノロジーを使えば簡単にできるのに、なぜこのような多くの途方に暮れそうな処理をする必要があるのでしょうか。

もし、左手でCSRのコードを書き、右手で好きな飲み物を飲めるとしたら？（またはその逆🍹😎）もし、SSRが原因でアプリ内の何かがクラッシュし始めても、慌てることなくDOM APIにアクセスできるとしたら？**もし…**このリストはスパゲッティのように長くなるかもしれませんが、そこから解放されることにワクワクするなら、要点に進みましょう。

###そろそろ変わり目だ

この10年間、静的アプリがいかに人気だったかをGoogleが理解した時点で、それが現実になりました。より簡単に、より速く、処理するために需要が生まれたのです。これはウェブコーディングの大きな飛躍であり、SEOも進化すべきです。2015年発表のGoogleのクロールロボットは、動的クライアントサイドのウェブページ（静的SPAなど）を解析できるようになりました。

とはいえ、時々、落とし穴があるかもしれません。ロボットがタイムアウトする前に、ページに必要なリソース（画像、CSS、データ）を取得できる保証はありません:(

Googleが、ダイナミックレンダリングと呼ばれるウェブページのスクリーンショット（.png/.jpg/.webp/.svgファイルではない;)）を開発者が作成できると発表したすぐ後に、完全にプリレンダリングされたHTMLを保存できるようになりました。

💡ダイナミックレンダリングーMicrosoftが推奨するJavaScriptのレンダリング方法。詳細については、開発者向けドキュメントを参照してください。

ロボットがウェブページにアクセスすると、バックエンドミドルウェアがリクエストをハイジャックして、SEOに最適化された実際のスクリーンショットをクローラーエンジンに送り返します。エンドユーザーは、通常のHTML+CSS+JSパックを展開します。一般的に、サーバーは人間とロボットを区別できるようになり、人間には完全な体験を、ロボットには軽量のHTMLバージョンを提供します。

##ダイナミックレンダリングの設定方法

基本的な設定はとても簡単です。クローラーエンジンのリストを作成し、リクエストヘッダをテストするだけです。

export const botUserAgents = [
  'googlebot',
  'bingbot',
  'linkedinbot',
  'mediapartners-google',
];

次に、ユーザーエージェントがデスクトップコンテンツとモバイルコンテンツのどちらをリクエストしているか判断します。ダイナミックサービングを使用して、適切なデスクトップ版またはモバイル版を提供します。以下は、判断の設定例です。

const isPrerenderedUA = userAgent.matches(botUserAgents)
const isMobileUA = userAgent.matches(['mobile', 'android'])

if (!isPrerenderedUA) {
  // serve regular, client-side rendered content
} else {
  servePreRendered(isMobileUA) // serve the mobile version
}

これは、よくある仕組みの概念です。詳細については、Google公式ページを参照してください。

###Prerender.ioの設定

もし自分ですべて作成するのが苦手なら、Prerender.ioの検討をお勧めします。かなり直感的なサービスで、作業が簡単です。

まず、パッケージを自分のリポジトリにインストールします。

// ./
npm install prerender-node --save

次に、NodeJSベースのアプリ（expressJS、nextJSなど）をセットアップし、ミドルウェアを追加します。

// ./server/index.js
app.use(require('prerender-node'));

…または、prerender.ioのアカウントを持っている場合は、トークンを使用します。

// ./server/index.js
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

ほら、とても簡単でしょう？

###スケールアップ

さらに詳しく知りたい場合は、GithubのPrerender.io公式リポジトリを掘り下げると良いでしょう。スナップショットのテスト、カスタマイズ、スナップショット保存のための独自サーバー作成に関する高度なリソースまであります🌀

##まとめ

この記事が役に立てば嬉しいです😇私が何か見逃していたり、SSRはまだ素晴らしい仕事ができると思ったりしたら、議論を持ちかけてください。

いつか、このSEO関連の混乱がすべてなくなり、AIが地球を支配するようになるでしょう。それが実現するまで:)、開発者の作業を楽にしてくれるPrerender.ioなどの関係者に感謝しましょう！

それまでの間、役に立つ記事があります。

👉 React 2021でプログレッシブ画像セットを扱う方法
🚀未来への道。速度を落とさずにReactでRetinaとWebP画像を統合する

👉 Reactで画像セット作成を自動化する方法
❤️2021年デザイナー／開発者向けプログレッシブ画像セット作成の自動化フロー

それではまた！🍻

##翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: Sviat Kuzhelev
Original Article: Say goodby to Server Side Rendering. Prerender.io --- SPAs with SEO in mind.
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。