本日はReactを使用した静的Webサイトの制作についてになります。
リアルDOMと仮想DOMについて
Webページの初回ロードにおいて、リアルDOMを使用したレンダリングは、JavaScriptやJQueryによるDOM更新があった場合に、必要のない機能まで全て再構築するため、ロード時間に負荷がかかります。
このため、クライアント側レンダリング(CSR)では、初回ロードが遅くなることがあります。
現代のWebサイトでは、大量のDOM操作が行われ、JavaScriptフレームワークやライブラリがDOM更新を必要以上に行うことで、レンダリング速度の低下が深刻な問題となっています。
この問題を解決するために、仮想DOMが開発されました。
仮想DOMは、何らかの更新があった場合、全てのDOMを再構築するのではなく、必要な箇所だけを更新情報として受け取り、仮想DOM上で再構築し、必要な箇所のみをリアルDOMに反映することで、高速なページ遷移を実現しています。
Reactは、この仮想DOMを利用しており、ユーザーに待たせることなく高速なビルドとパフォーマンスを実現しています。
Reactの仮想DOMは、リアルDOMよりも高速であり、一流のUXを提供しています。
Reactの仮想DOMがなぜリアルDOMよりも高速なのかについて詳しく知りたい方は、以下の当ブログの参考資料を参照してください。
Reactの仮想DOMにも、唯一の欠点が存在します。
大規模なアプリやWebサイトを構築する際に、パフォーマンスが低下する可能性があります。
特に初回読み込み時間は重要であり、数秒間の待ち時間があるとユーザーの印象が悪くなります。
Reactの仮想DOMを使用したWebサイトやアプリケーションでは、初回のindex.htmlのロードに集中する必要があります。
この問題に対処する方法として、SSR（サーバーサイドレンダリング）やSSG（静的サイトジェネレーション）があります。
これらの技術を使用することで、サーバー側でコンポーネントをレンダリングし、初回のロードを高速化することができます。
また、SSGを使用すると、静的なWebサイトを生成することができ、高速な読み込みを実現できます。
つまり、Reactの仮想DOMを使用したWebサイトやアプリケーションでは、初回のロードに注力することが重要であり、SSRやSSGのような技術を活用することで、高速な読み込みを実現することができます。
これらの技術を組み合わせることで、ユーザーに快適な体験を提供することができます。
SSR
SSRとは、「Server Side Rendering」の略で、サーバーサイドでHTMLを生成した後に描画を行う手法のことです。
Reactのフレームワークである「Next.js」は、手軽にSSRを実装することができるため、多くの開発者に利用されています。
Next.jsでは、すべてのページを事前にレンダリングし、各ページのHTMLをリクエストごとに生成する方法を採用しています。
この事前レンダリングにより、SPAの問題視されていたレンダリング時の初回表示までのロードを１度だけ解決し、SPAのSEO対策としても活用されています。
また、仮想DOMよりも高速に動作するため、パフォーマンスも向上します。
Next.jsは、SSRを実現することで、クライアント側でJavaScriptを実行する必要がなくなり、サーバーサイドでHTMLを生成するため、初回読み込みが高速になるという利点があります。
これにより、ユーザーの待ち時間を減らし、ユーザー体験を向上させることができます。
総じて、Next.jsは、事前レンダリングを採用した高速かつSEOに優れたフレームワークであり、Reactを利用する上で重要な選択肢となっています。
SSG
静的サイトジェネレーター（SSG）は、Webサイトを生成するためのツールの一種で、静的なHTMLファイルを事前に生成することで、サーバー側での処理を必要としません。
SSGは、React-StaticやNext.js、Remix、Gatsbyなど、多数のフレームワークで利用されています。
SSGは、ビルド時にHTMLファイルを生成するため、リクエストのタイミングでHTMLをそのまま返すことができます。
React-Staticを例に挙げると、データベースを利用する必要がなく、ビルド時に静的なHTMLファイルとCSSファイルを生成することができます。
SSGを利用することで、Webサイトの開発や管理、別のホストへの移行が簡単になり、複雑さや互換性の問題が発生しません。
また、Reactと組み合わせることで、SEO対策も簡単に行うことができます。
React-Staticは、Reactをベースにした静的サイトジェネレーターであり、静的なHTMLファイルからWebサイト全体を生成することができます。
下記では、筆者が構築したNext.jsでの静的生成によるシンプルなブログサイトとなっております。
SSGではWordpressのWebサイト静的バージョンを生成できるようにもなります。
下記では、Next.jsドキュメントに掲載されているデモサンプルのNext.jsとWordPressのサイトです。
初回ロードの読み込み速度を体感して下さい。
Next.js Blog Example with WordPress
Next.jsを利用したシンプルなブログサイトや、Next.jsとWordPressを組み合わせたデモサイトを見ると、初回のロード速度が非常に速く、保守も簡単に行えることがわかります。
Webサイトの複雑さや保守の問題に悩むことが多いですが、SSGを利用することでこれらの問題を解決することができます。
静的サイトジェネレーターを活用して、高速かつ安全なWebサイトを構築することができます。
SSGのサイトはCMSより速い??
CMSはWebサイトの作成から管理・更新までを効率的に行うための便利なツールです。
一般的には、専門的な知識や技術がない人でもWebサイトを作成し、運用することができますが、カスタマイズや設定を行う場合は、一定の知識や技術が必要になることがあります。
WordPressは、ユーザーからのリクエストに応じて動的にWebページを生成するCMSの代表的なツールです。
しかし、Webサイト制作に携わる開発者ならば、WordPressの知識や技術は必須となります。
静的サイトジェネレーター（SSG）は、あらかじめHTMLやCSS、JavaScriptなどの静的ファイルを生成することで、動的なデータ取得が必要なくなるため、高速であるとされています。
また、SSGはデータ依存がなく、必要に応じてどこからでもデータをサイトに提供できます。
React用のSSGには、プラグインや拡張機能を使用してカスタマイズや拡張が可能なものがあり、ほとんどのニーズに対応できるとされています。
Webサイト制作において、SSGを使いこなすことは、開発者およびプロフェッショナルなブロガーにとって非常に重要なスキルです。
Next.jsでのチュートリアルは当ブログで解説しております。
また、SSRおよびSSGのレンダリング戦略は下記でも詳しく解説しております。
最後に
私の個人的な意見として、クライアント側レンダリング（CSR）ではなく、サーバーサイドレンダリング（SSR）または静的サイトジェネレーター（SSG）を使用して、Reactで管理された「仮想DOM」によるコンポーネントベースのWebサイトを作成することが多くのメリットを提供すると考えています。
ただし、この分野は深く、学習する必要があります。
ある程度の知識と技術がなければ、移行には苦労するかもしれません。
JavaScriptを含むプログラミング言語の基礎知識と技術がある場合、移行をお勧めします。
Reactをベースにした静的サイトジェネレーターは日々増加しており、静的・動的Webサイトの制作に役立つことがあります。
ただし、Reactは本来ライブラリであり、Webアプリケーションの構築に最適化されています。
したがって、Reactを使用した静的サイトジェネレーターは、Webサイト制作に適したツールではない場合があります。
ですが、Webアプリケーションまたはネイティブアプリ、Webサイトのどちらも開発可能であることから、Reactは多様な用途に使用できることがわかります。
本日は以上となります。
最後まで読んで頂きありがとうございます。
