要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。KB)シンプルに構成されたシングルページアプリケーションでは、サーバーはファイルを配信するだけで、画面を組み上げるための処理はブラウザ側で行われます。この方式におけるいくつかのデメリットを埋めるために考案されたのが、ある程度の画面構築をサーバー側で行う、サーバーサイドレンダリングです。今回は、サーバーサイドレンダリングの概要と、実際に使う場合のフレームワークの解説を行います。筆者の検証環境は以下の通りです。7.0.0シングルページアプリケーションが苦手なこと前回まで、create-react-appを用いたシングルページアプリケーションの開発手法について解説してきました。ここで、シングルページアプリケーションにおけるサーバーとブラウザの関係を、おさらいしておきましょう。前回解説した通り、シングルページアプリケーションにおけるサーバーの役割は、HTMLやJavaScriptなどのファイルを保管し、ブラウザからの要求に応じて配信することです(図1)。起点にしてDOMツリーの管理を開始します。DOMで管理できる範囲で画面の書き換えを行っていくため、応答速度が高いアプリケーションを作りやすいと言われています。そんなシングルページアプリケーションですが、その性質に由来する弱点もあります。今回は次の2つについて着目します。ファイルサイズが大きくなりがちHTMLだけを取得されるとコンテンツが空になるそれぞれ、どういった点で問題になるのか、見ていきましょう。ファイルサイズが大きくなるシングルページアプリケーションのような近代的なJavaScriptアプリケーションでは、自分で書いたすべてのJavaScriptファイルと、そこから呼び出されたすべてのライブラリを、1つのJavaScriptファイルに結合しています。いった、モジュール読み込みの仕組みを実現しています。旧来のJavaScriptアプリケーション開発のように、グローバル変数の領域で各ライブラリが名前空間を奪い合うやり方に比べれば、格段に良い方式ではあるのですが、これはこれで新たな問題を抱えました。ファイルサイズが大きくなりがちなのです。前回デプロイに使ったサンプルプロジェクトを例に挙げます。作ったプロジェクトをそのままビルドしたので、あの方法で作れる最小のサイズになっているはずです。ビルド後のフォルダの中を見てみると、118KBでした(図2)。図2:ファイルサイズが大きくなりがち118KBと言えば、ちょっとしたJPEG画像に匹敵するファイルサイズです。いえ、現代の通信速度であれば、目くじらを立てるようなサイズではないのかもしれません。これは最小のサイズです。実際の開発の現場で、何の手だても打たずに開発を進めていくと、1MBを超える、ともすると数MBに達するような、巨大なJavaScriptファイルに出会うこともあります。数MBともなってくると、速度の速いWi-Fiにつながったパソコンならばともかく、回線の遅いモバイルブラウザでは目に見えて待ち時間が発生します。場合によっては5秒や10秒では済まないかもしれません。ダウンロードが終われば速いものの、それまでにかかる時間が長くなってしまうことがある。これがシングルページアプリケーションの弱点の1つです。コンテンツが空になるまた別の問題もあります。クローラーなどがWebページを見に来たときに、空のコンテンツを返してしまうのです。Googleをはじめとした検索エンジンの類いは、ときどき私たちのWebページを巡回して、情報の取得や更新を行っています。いったクローラーと呼ばれるアプリケーションと、シングルページアプリケーションは少し相性が悪いです。クローラーの中には、HTMLファイルだけを取得して、その内容だけでコンテンツを判断しようとするものがあるからです。作ったシングルページアプリケーションの場合、初期設定ではリスト1のHTMLファイルが配信されます。中に相当するDOMツリーにコンテンツが追加されていきます。クローラーの場合はそうはいきません。クローラーはファイルをダウンロードするだけなのです。機械的に「なにもないページ」と判断されるだけです。ページの検索順位を上げたいWebサイト管理者からすれば、たまったものではありません。これもシングルページアプリケーションの注意すべき弱点です。[コラム]クローラーが賢くなってきているクローラーにコンテンツが入ったHTMLを返せないことを問題として挙げましたが、少なくともGoogleでは、この問題は解消されています。HTMLを読み込んだ後、JavaScriptによって描画されるコンテンツも、監視対象に含めてくれているのです。同じ検索エンジンを使っている、Yahoo!JAPANも同様です。いったケースもあるため、JavaScriptによって描画されるコンテンツを解釈しないクローラーに読まれることを想定している方だけが、クローラーの問題を考慮する必要があります。