2023/06/03

【初心者向け】いま主流のSSR（サーバーサイドレンダリング）とは？メリットはある？

WEBページを表示する際、一般的にはサーバ側に保存されているHTMLファイルやCSSファイルを読み込むことで、文字や画像といった情報を画面に描画（レンダリング）します。

今まではクライアントサイド（WEBページを閲覧する利用者のPCやスマホ）でファイルの中身を分析し、表示をしていましたが、様々な課題が存在しました。

そういった課題を解決する技術として、昨今主流となっているのがSSR（サーバーサイドレンダリング）です。

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

サーバーサイドレンダリングは、クライアントサイドではなく、WEBページの情報を保存しているサーバ側でファイルの読み込み・描画まで行う技術のことです。

一般的にIT業界ではユーザ側をクライアントサイド、サーバ側をサーバサイドと呼ぶので、プログラマ・エンジニアにとっては馴染み深い言葉ではないでしょうか。

クライアントサイドで描画する場合は、用意されたHTML・CSS・JSなどのファイルを読み込むだけで勝手に描画してくれますが、サーバーサイドレンダリングの場合は事前に描画する処理を記述しておく必要があるので、どちらかと言えば上級者向けの技術だと言えます。

SSRは実装に少し手間のかかる技術な一方、それに見合ったメリットがあるのも事実です。

具体的なメリットとしては、以下の3つがあります。

それぞれのメリットについて詳しく見ていきましょう。

SSRの特筆すべきメリットの一つが、常に最新の情報を表示できるという点。

より専門的に言い換えると、キャッシュなどの影響を受けないという利点を持ち合わせています。

クライアントサイドでレンダリングする場合、端末が毎回ファイルの情報を読み込んでいると、端末の性能によっては高い負荷がかかってしまう可能性があります。

快適にWEBページを閲覧するため、ブラウザ側が一度読み込んだWEBページの情報を保存しておくのです。次にWEBページを表示する際にはサーバではなくブラウザのキャッシュから情報を読み込むようにすることで、処理速度が高速化されるというメリットがあります。

ただし、キャッシュはWEBブラウザにしばらくの間保存されたままになってしまうので、その間にサーバ側でファイルが更新されていたとしても、変更後のファイルではなく、キャッシュから変更前の古いファイルを読み込んでしまうのが欠点です。

一方でSSRの場合、WEBページのサーバ側で常に新しい情報を参照して描画します。

クライアントサイドで機能するキャッシュに保存された情報は活用しないため、ブラウザの仕様やキャッシュの制約に囚われず、常に最新のWEBページを表示することが可能なのです。

SSRのさりげないメリットの一つにサーバの容量を節約可能という点が挙げられます。

クライアントサイドで描画する場合、基本的にはHTMLファイルなどから文書内容を読み込み、別途CSSやJSなどのファイルも用意することがほとんどで、意外とサーバの容量を使います。

ファイルを保存する程度でサーバの容量が満ちることは基本的にありませんが、不測の事態に備え、できる限り容量を節約したいですよね。

そういった場面でも、SSRの特徴が生きてきます。

SSRは性質上、描画の処理と同時にHTML文書の構造もコードに記すので、HTML対応のページを表示する場合であっても、HTMLファイルが要りません。

例えばNext.js（React）を使ってSSRを実行する場合、用意するファイルは基本的にSSRの処理が記されたJSファイルだけでOK。結果として、不要なHTMLファイルの生成などを省略することが可能です。

※これは案件の内容やシステムの仕様にもよるので、一概には言えません。

SSRは描画そのものの処理はJavaScriptやPHPで作成する関係上、同一のプログラムにDOMのレンダリングとWEBサイトに機能を実装するプログラムが両立する形になります。

これはすなわち、プログラムをWEBサイトと連携させやすい、要するにWEBサイトの開発が円滑化することを意味しています。

HTMLファイルを一々用意していると、WEBサイト上で実行させたい外部ファイルやプログラムはわざわざHTMLファイル上で取り込む必要があるため、読み込み漏れによるエラーが発生したり、ソースファイルのパス記述など不要な工程・負担がかかったりします。

はじめからプログラミング言語で一元化しておけば、開発コストはもちろん、メンテナンスコストを下げることにも繋がることから、SSRは開発面でのメリットも大きいと言えるのです。

SSRはプログラミング言語を用いて実装するのが一般的で、現在では以下のような言語がよく利用されています。

もちろん、この他にも言語はある（というより、著名な言語であれば大体SSRは実装可能）のですが、よく現場でも見られるのがこれらの言語になるので、エンジニアを目指す方は注目しておくべきでしょう。

SSRは、クライアントサイドでレンダリングする際の冗長な開発コストやページの正確性の不安定さといった問題を解決するのに適しており、現在では主流なレンダリング手法となっています。

これからエンジニアを目指す方、あるいはWEBの分野に興味がある方は、当たり前とも言えるSSRを最低限扱えるよう、勉強するのがおすすめです。