はじめに
私は2021年10月からフロントエンドエンジニアへの転職を果たし、
研修で様々なアプリケーションを作成してきました。
先日まで社内用のSNSアプリケーション開発を同期の他の技術の方とチームを組んで開発を行ない、
フロントサイドとしては "Next.js"＋"TailwindCSS"＋"TypeScript" の技術を用いて開発を行いました。
この開発では、Next.jsの勉強を始めたばかりであり、その技術を使ってアプリケーションを作成したいみたいという意味合いが強かったですが、次のプロジェクトはそれぞれの技術の強みをしっかり理解した上で、その技術の強みを活かせるような開発を行なっていきたいと思っています。
しかし、いざ技術を選定する際に、Reactが良いのか、ReactのフレームワークであるNext.jsが良いのか、それぞれの強みはどこなのか等を考えた際に、知識が曖昧であることに気付かされました。
そこで今回は、ReactとNext.jsのそれぞれの特徴と強みの学んだことを、メモ帳代わりに、ここにまとめようと思います。
Reactとは
UI特化型のJavaScriptのライブラリ
ReactはFacebook社が開発したJavaScriptのライブラリです。他のVueやAngularと比較されることもありますが、React自体はフレームワークではなく、あくまでもUIを構築するだけのライブラリです。未だにフレームワークとライブラリがごっちゃになります。。。
（使用例）
Facebook、Instagram、Yahoo!、Netflix、Slack、Uber等
UIってなに？
UIとは、ユーザーインターフェイスの略称で、一般的にユーザーと製品やサービスとの接点全てのことを意味します。WebサイトでいうところのUIは、サイトの見た目や使いやすさのこと。UI＝見た目だけではなく、ユーザーが目にするもの・操作するもの全てが含まれます。
UXはUIと何が違うの？
UXとは、ユーザーエクスペリエンスの略称で、ユーザーが製品やサービスを通じて得られる体験のことを意味します。ECサイトの例ですと、利用した時に「レイアウトがきれいで情報がわかりやすい！」「ボタンのサイズや位置が良くて使いやすい！」と思うなど、どのような体験をして、どのような印象を持ったかを指します。
Reactの特徴
宣言的なView
宣言的とは、「変更したい部分のみを変更する」ということ。そのため、更新があった際、変更部分のみを効率的に更新することができます。これにより、シンプルでわかりやすいコード作成を可能にし、デバックがしやすいという利点もあります。
コンポーネントベース
Reactでは部品ごとにコンポーネントを分けることでカスタマイズや再利用がしやすくなっています。他の技術であるAngular等では一部を変更する場合でも、全てを変更する必要がありました。しかし、Reactでは変更したい部分のみを変更することができるため、改修や管理がしやすく、さらに再利用もしやくなっています。
Reactでできること
仮想DOMが高速でパフォーマンスが良い
Reactには仮想DOMというレンダリング機構が備わっております。そのため、この仮想DOMと実際のHTML上のDOMを比較した時に出てくる違いのみが、毎回HTML上に再描画されます。そのため、更新をした際に、必要な部分しか更新がされないため、非常に速い動作を実現させることができます。
仮想DOMってなに？
仮想DOMとは、DOMをJavaScriptのオブジェクトとして表現しているものです。DOMそのものを操作するのではなく、オブジェクトを変更して、差分のみをDOMに反映することで、パフォーマンスを向上させているものです。
SPA（Single Page Application）が作成しやすい
最近ではWebやアプリケーション開発ではSPAが流行していますよね。SPAの良さは、最初にページ全体の読み込みを行ってしまうため、ページ遷移等の際に効率的かつ高速で動かすことができるという点が挙げられます。その反面、開発する際に、JavaScriptを多用しなければならないというデメリットもあります。しかし、Reactを使用することでSPAを実現することができます。
SPAってなに？
SPAとは、単一のページでコンテンツの切り替えを行うWebアプリケーションの構造の名称です。SPAではブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことでUXを大きく向上させることができます。
CSR（Client Side Rendering）
CSRではクライアントのリクエストに対して空のHTMLとJavaScriptを返し、クライアント側でJavaScriptを実行してレンダリング、およびデータの取得を行います。
Reactのみを使用してSPAを作る場合、全てがクライアント側で完結するため、実装も運用もシンプルなのが特徴です。
その反面、SEOとOGPに対応できない点とクライアント側でJavaScriptを実行するため、初期表示が遅いという点があります。
SEOとは
SEOとは、「Search Engine Optimization：検索エンジン最適化」の略称であり、検索エンジンを使ったマーケティング戦略の一つです。特定のキーワードで検索された場合の検索結果で、自分のサイトのページを上位に表示させるようにすることで、Webサイトの成果を向上させる施策のこと。
OGPとは
OGPとは、「Open Graph Protocol」の略称であり、SNS等でWebサイトのURLを送信した時に、そのページのタイトルやURL、概要、画像を表示させる仕組みのこと。
Next.jsとは
サーバー側でのレンダリングが可能なReactのフレームワーク
Next.jsはJavaScriptのライブラリであるReact開発におけるフレームワークです。Reactではブラウザ側でレンダリングを行うSPA開発が特徴ですが、Next.jsを使用することでサーバー側でのレンダリングを行うことができます。
レンダリングとは
もととなる数値データを計算し、表示を行うこと。Webサイトの場合、HTMLファイルなどをもとにユーザーが閲覧できるページに表示すること
Next.jsの特徴3選
SSR（Sever Side Rendering）
SPAではブラウザへ空のHTMLを返し、実際のページのコンテンツはJavaScriptを使って生成します。そのため、一度ページを読み込んでしまえば、ページ遷移毎にサーバーへのリクエストが発生することがないため、高速で動作をさせることができます。
しかし、JavaScriptのサイズが大きくなればなるほど、初回表示時の読み込みには時間がかかります。
それに対して、Next.jsでは、アプリケーションを事前にページ単位でレンダリングします。
SSRでは、クライアントのリクエストに対してサーバー側でデータを取得してHTMLを生成し、クライアントに返します。
サーバー側でHTMLを生成するため、SEOやOGPに対応可能であり、初期表示も高速になります。
SSG（Static Site Generation）
SSGはビルド時に一括して全てのレンダリングを行います。事前に静的なHTMLを生成するため、CDNにキャッシュさせることができ、SSRよりパフォーマンスが向上します。
しかし、ビルド後に動的に内容を変更することができないため、更新が頻繁なWebサイトには不向きです。
CDNとは
CDNとは、「Content Delivery Network」の略称であり、世界中に張り巡らされた配信ネットワークを利用して、Webサイトにアクセスしようとするユーザーに効率的かつ高速にWebコンテンツを配信する仕組みです。
これにより、Webサイトの表示を高速化させたり、たくさんの人が同時にアクセスしても遅くならないようにすることができます。
ISR（Incremental Static Regeneration）
ISRではビルド時にサーバー側でHTMLを生成し、キャッシュの仕組みを使い、リクエストがあった場合はバックグラウンドでサーバー側でデータを再取得してHTMLを再生成し、次のリクエストに対して再生成したHTMLを返します。SSGとSSRを統合したようなものです。
CSR/SSR/SSG/ISRのどれを使用すればよいのか
CSRを使用する
まず最初に検討することは、CSRにおけるSPAで済むか済まないかを検討します。言い換えれば、クライアント側でデータを取得するか、サーバー側でデータを取得するかです。
SPAのメリット
SPAを採用するメリット以下に列挙します。
- 通常のWebページでは実現できないユーザー体験が実現できる
- 高速なページ遷移を実現できる
- ネイティブアプリの代わりとして提供することができる
1. 通常のWebページでは実現できないユーザー体験が実現できる
ブラウザの挙動に縛られないことから、より幅広いUIを実現することができるため、UXを向上させることができます。
ブラウザによるページ遷移が発生しないことにより、音楽を試聴しながらブラウジングを行うことができる音楽配信サービスのようなものも実現可能です。また、Twitterのようなプッシュ型の通知を提示することや、Facebookのようにチャットウィンドを表示したまま、表示しているコンテンツを変更することも実現できます。
他にもなめらかなアニメーションによるページ遷移や見栄えの良いローディングも独自に実装することが可能です。
2. 高速なページ遷移を実現できる
表示速度が１秒遅れることでコンバージョンが7%低下するという調査結果があるほど、表示速度はコンバージョンやリピーターの獲得に大きく影響します。
SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。
また、ブラウザによるページ遷移が発生しないため、独自にキャッシュ機能や先行ローディングの機能を実装することでさらなる速度向上を図ることも可能です。
3. ネイティブアプリの代わりとして提供することができる
SPAによるUXはネイティブアプリと比較しても遜色ないものとなるため、Webアプリとして作成したものをネイティブアプリとして流用することができます。最近ではPWA（Progressive Web Apps）という考え方がGoogleから提唱されており、Webの最新の技術を用いて、Webとネイティブアプリの両方の利点を持ったアプリを作ることが着目されています。この手法により、オフラインでのページ閲覧、プッシュ通知、ホーム画面にアイコンを追加して起動できるのようなネイティブアプリならではの機能をWebアプリで実現することができます。
SPAのデメリット
逆にSPAのデメリットも以下に列挙します
- 実装コストが大幅に増える
- 初期ローディングにかかる時間が増える
1. 実装コストが大幅に増える
SPAではブラウザに任せていた処理を実装する必要があるため、開発コストが増えます。例えば、ブラウザのページ遷移、ページ毎のURLの割り当て、リンククリック時のローディング表示などが挙げられます。一般的な機能であれば、すでに実装されたライブラリがある場合が多いですが、アプリの要件に合わせるために独自に実装しなければならないケースも多くあります。
また、動くものを作るだけでは通常のWebページと比較してSEOの面で不利になるため、SSRという技術で対策する必要があります。SPAはJavaScriptでデータを取得して、HTMLを構築してページを表示するため、ほとんどの場合はクローリングの対象外です。SSRを導入するためにはサーバーサイドの開発も必要となり、対応しているライブラリも限られているため、一般的に実装コストが大きく増加します。
クローリングとは
ロボット型検索エンジンにおいて、プログラムがインターネット上のリンクを辿ってWebサイトを巡回し、Webページ上の情報を複製し、保存すること。
2. 初期ローディングにかかる時間が増える
ページの切り替えは高速になりますが、JavaScriptのコード量が増え、HTMLの生成をブラウザで行うことになるため、初期ローディングにかかる時間は増えます。
SPAはどのような場面で採用するべきか
SPAの特性上、ユーザーが頻繁にページ遷移やコンテンツの操作を行う滞在時間の長いサービスに適しています。
例えば、データ可視化サービスやチケットの座席指定などはユーザーが繰り返し検索を行うため、SPAに向いていると言えます。
このようなサービスを従来のWebページで実装すると、検索が行われる度にページ遷移が発生し、待ち時間が多くなります。しかし、SPAにすることで、検索の実行から結果の表示まで一画面で行うことができるため、待ち時間を採用に抑えることが可能となります。
その反面、ブログのように直帰率が高いサービスはSPAにはあまり適していないといえます。SPAでは、最初にアクセスした時の読み込みやセットアップにより多くの時間を必要とします。そのため、直帰率が高いサービスにSPAを採用しても、アクセス時に時間が増加してしまうため、メリットが少ないと言えます。
SSRを使用する
SSRのメリット
SSRを採用するメリット以下に列挙します。
- SEOに強い
- 初期描画の表示速度が高速
SSRのデメリット
逆にSSRのデメリットを列挙します
- SSRするためのWebサーバーが必要
- サーバー側の負荷が高い
- キャッシュ設定が大変
SSRはどのような場面で採用するべきか
コンテンツ更新頻度の高いサービスに向いている。例としては動画投稿サービスやSNSサービスが挙げられる。また比較的大規模向け。
SSGを使用する
SSGのメリット
SSGを採用するメリット以下に列挙します。
- SSRよりもレスポンスが高速
- SEOに強い
- 動的なOGP対応が可能
- キャッシュを気にしなくてよい
SSGのデメリット
逆にSSGのデメリットを列挙します。
- ビルド以降、データが更新されてもページに反映されない
- ページの数やコンテンツの数が多くなるとビルド時間が長くなる
- 頻繁にデータ更新があるサイトには向かない
SSGはどのような場面で採用するべきか
更新頻度の少ないブログやコーポーレートサイト等
ISRを使用する
ISRのメリット
ISRを採用するメリット以下に列挙します。
- SSGのビルド時間を短縮できる
- SSRと比較したらDB負荷は軽め
ISRのデメリット
逆にISRのデメリットを列挙します。
- 現状ではVercelに依存している
ISRはどのような場面で採用するべきか
常に最新の情報である必要はないが適度な更新頻度のあるサービス
まとめ
以上が、ReactとNext.jsを採用する際に考えることに関して学習したメモです。
いろんな記事を読むことで改めてReactとNext.ｊｓの特徴を理解することができました。
何を採用するかは、どのユーザーに対して、どんなアプリケーションを作成するかによって合う技術が異なってくると思います。
Webアプリケーションを開発する際は、そのページやアプリケーションに合った最適な技術を選定することが大切だと感じました。
これからも最新情報を取り入れて、たくさん勉強していきたいと思います。