SEO対策におけるクライアントサイドレンダリング・サーバーサイドレンダリング

SEOに強いWebサイトを制作する際にWeb開発者が知っておくべき2つのコンセプトがあります。

「クライアントサイドレンダリング(CSR)」と「サーバーサイドレンダリング(SSR)」です。

SEO基準のWebサイト最適化とは、Google、Bing、Yahooなどの検索エンジン上で上位表示させてユーザーのWebサイトやWebページの視認性を高めることです。

それはWebサイトの品質やトラフィックを向上させるプロセスです。

Webサイトがせっかくユニークなコンテンツを持っていても、ユーザーに見つけてもらえず、楽しんでもらえないのであれば、それはもったいないことです。　

サーバーサイドレンダリング（SSR）とは?

サーバーサイドレンダリング（SSR）は従来のレンダリング方式です。

基本的に、サイトのすべてのリソースはサーバー上で保存されています。

ユーザーによるページへのアクセスがリクエストされると、サーバーがブラウザに表示するHTMLページを返し、JS・CSSがダウンロードされ、ページのコンテンツがユーザーに表示されます。

クライアントサイドレンダリング（CSR）はJavascriptフレームワークを使ってブラウザ側でJSを実行する最新のレンダリング方法です。

レンダリング処理はサーバーサイドレンダリングのようにサーバー上で行われるのではなく、ブラウザ上で行われます。

ユーザーがページへのアクセスをリクエストすると、ブラウザはサーバーからデータを受け取り、そのデータを組み立てて、エンドユーザーに表示します。

SSRとCSRとの違いを表すこんな例えがあります。

「サーバーサイドレンダリング（SSR）では、新しいWebページを見たいときに、そのページを取りに行かなければなりません。

それは食事をするたびにスーパーに行って食材を買うようなものです。

一方、クライアントサイドレンダリング（CSR）は、一度スーパーに行って45分かけて1ヶ月分の食材を大量に購入するようなものです。

そして、食べたいときに冷蔵庫を開けるだけです」（アダム・ザーナー氏）

SSRを採用したWebサイトでは、初回のアクセス時にレンダリング速度が若干速くなることがあります。

これは、サーバーへのラウンドトリップを必要としないため、理解できることです。

しかし、パフォーマンスは以下のような他のいくつかの要素に影響されます。

上記の要素はすべて、ユーザーエクスペリエンスに影響を与えます。それはユーザーがリクエストするたびにサーバーに接続し、サーバーが同じレンダリングをやり直しているからです。

一方、CSRを適用したWebサイトの場合、サーバーへの往復が多いため、最初にヒットではレンダリングが遅くなります。しかし、これらの要件が満たされると、CSRはJSフレームワークを通じて迅速なエクスペリエンスを提供します。

明らかにCSRは、ユーザーエクスペリエンスを向上させ、ユーザー数が過多になったときにサーバーの負担を軽減する最適な選択だと言われています。

しかし、CSRでは、インデックス用のHTMLはクライアント側でJavascriptが完全にレンダリングされたときにのみレンダリングされます。

そのため、現在Googleが採用しているインデックス作成の仕組みでは、コンテンツがクロールされ、インデックスが作成され、検索結果で上位に表示されるようになるまでに、数時間から1週間程度の時間がかかることがあります。

一方、SSRでは、すべてのHTMLコンテンツがソースコード内に存在するため、検索エンジンは即座にコンテンツをリクエストし、クロールし、インデックスすることができます。これにより検索結果に表示されるまでの時間を短縮することができます。

SSRのようなSEO最適化機能を統合したWebサイトを構築したい、CSRでユーザーエクスペリエンスを向上させたい開発者には、次の2つのソリューションがあります。

プリレンダリング（ダイナミックレンダリングとも呼ばれる）
プリレンダリングは検索エンジンのボットがページをリクエストする際に、HTMLスナップショットを送信することです。これはクライアントサイドレンダリングの高速性を確保しつつ、検索エンジンにはページをインデックスさせるのに必要なHTMLコンテンツを提供することができます。
Isomorphic（同形）JavaScript（Universal JavaScriptとも呼ばれる）
これはGoogleが推奨しているオプションです。Isomorphic JavaScriptでは、ページが初回に読み込まれたときに、従来のWebページのようにページの表示がサーバー上でレンダリングされ、その後それがHTML形式でクライアントに送信されるため、クライアントが即座に表示できます。その後、SPA（Single Page Application）がバックグラウンドで読み込まれ、それ以降のアクションはクライアント側で処理されます。

Isomorphicレンダリングはサーバーサイドとクライアントサイドの両方で稼動するため、ユーザーにさまざまなメリットをもたらします。

現在、ReactJsのNext.js、VueJsのNuxt.js、AngularのAngular Universalなど、IsomorphicレンダリングをサポートするJavascriptフレームワークがいくつかあります。

Vuejs、ReactJs、またはAngularに慣れているユーザーにとって、Isomorphicの Webサイトの構築が簡単にできるようになりました。

近年の経済分野では、E-コマースが主要なトレンドとなっています。そのためSEOに強いWebサイトを構築することは非常に重要です。

優れたコンテンツや高品質の製品が必要なのはもちろん、ユーザーをWebサイトに呼び込むためのSEO対策も必要です。

この記事がWebサイトの構築の際のご参考になれば幸いです。

弊社Rabilooは、これらの知識を活かし、E-コマースサイトやマーケティング目的のWebサイトを構築してまいりました。

Webサイト構築でお困りのことがあれば、ぜひお気軽にお問い合わせください。

当ブログではフレームワーク、プログラミング言語、テクノロジー、ビジネスに関するお役立ち情報を発信しております。他の記事もよろしければご覧ください。