結局、WordPressと新しい技術は何が違うの？（レンダリング編）

2021/05/13

tech

どうも、なる(@null__me)です。

先日はWordPressのアンチテーゼとも言える記事を書きました。
誰でも簡単に用意できて簡単に記事を投稿できちゃうWordPressですが、私は使っていません。

大事なことなのでもう一回言います。使ってません。

使えるようになるのはとても意味のあることだと思います。
お仕事でいただくのもWordPressの案件が多いでしょう。
しかしナウでヤングな若者である私は新しい技術を用いて、全く別のやり方でこのブログサイトを作りました。
で、使うかは別としてそれってどう違うの？ってはっきり言えないじゃないですか。
今回はそこのお話をしていこうかと思います。

結論から

何が違うのってところなんですけど、速度が違います。
通常Webサイトはサーバーというところからデータが送られてからそれをChromeなどのブラウザが画面を表示してくれます。
複雑なサイトの場合データを送るまでに時間が発生することもあるでしょうし、データが重すぎてブラウザが表示するまでにタイムラグが生じるかもしれません。
こういったストレスはサイトから離脱してしまう原因の一つですので、Webサイトを作る方は意識しておくといいと思います。

HTMLの始まり

ではまずサイトを作る方のほとんどはこのファイルを作成することから始めると思います。
index.html
HTMLファイルというのですが、どんなサイトでもまずはこのファイルが送信されることでこれはWebサイトだなとなるわけです。
すべての基礎となるファイルで、この中に書いてあることをブラウザアプリは表示してくれるのです。

ですがこのままだと、お知らせやブログといったページをいちいちHTMLファイルを書いて作ることになります。
それはとてもハードルが高いです。私だったら絶対やりたくないです。
そこで登場したのがWebアプリケーションです。今回はサーバーと呼んでいきます。

サーバー言語の到来

誰でもブログを投稿できるようにするために、記事を書いてそれを保存できるシステムを作ろうと考えました。
その結果できたのが、WordPressたちです。私はDjangoというものを使ったりもします。
Webサイトのほとんどはこれです。
これらはフレームワークと呼んだりしていて、大体はこんな仕組みになっています。
ーーーーーーーーーーーーーーーーーー
タイトル：
本文：
ーーーーーーーーーーーーーーーーーー

みたいな感じに記事のメインになる部分をまずは組み立てます。
その後、データベースというところから記事のデータをとってきてさっきのパーツに入れ込みます。
ーーーーーーーーーーーーーーーーーー
タイトル：タイトルだよ〜
本文：今日もいい天気だね。
ーーーーーーーーーーーーーーーーーー

そうして当てはめたものがHTMLファイルとなって私たちのブラウザまで届けられます。

この一連の動作をレンダリングと言います。
サーバーの中でレンダリングすることは基本当たり前なのですが、サイトのページのすべての部分が毎回違うわけないじゃないですか。
最近になって今度はこういったものも登場しました。

Reactの登場

突然ですが、サーバーと対比してこうやって見ているブラウザのことをクライアントと言います。
マイページなどの一部のページでは、ページを移動しても一部分だけしか変わらない場合もあるんですが、それに対して毎回サーバーが新しいページをレンダリングするのって非効率じゃないですか。
むしろ、ブラウザがデータをああだこうだしてページを作り出した方が効率よかったりする場面があります。
そういった時にReactというものが現れました。
他にも種類はあるんですが、とりあえずReactを挙げて起きます。

こういったフレームワークがブラウザ上でレンダリングすることを、クライアントサイドレンダリングと言います。
逆にサーバーがレンダリングすることをサーバーサイドレンダリングと言います。

ここまでのおさらいです。
HTMLの登場
↓
サーバーの登場（サーバーサイドレンダリング）
↓
Reactたちの登場（クライアントレンダリング）

SEOのために

Reactはページを開いてから中身となる部分が作られます。
なのでSEOを考えるとまだちょっと弱いのが考えられます。
サーバーから送られた時点で情報がないと正しく検索エンジンに認識されないのです。

なのでNextJSというReactの進化系、サーバーサイドレンダリングできるReactというものが現れました。
ここ最近で強い動きなのですが、Reactを覚えればサーバーも作れるし（NextJS）モバイルアプリも作れる（React Native）といったすべてを統一していこうって感じの動きがあります。

サーバーでレンダリングするなら別に何使ってもいいじゃん。ってなったので今度はこう考えました。
「どうせ記事の内容は編集しないと変わらないし、今のうちにHTML作っちゃえばいいじゃん。」
そうしてNextJSはバージョンアップをしていって、記事の更新や作成などのタイミングにあらかじめレンダリングを済ませておくという方法を編み出しました。

ここが終点です。お疲れ様です。
WordPressなどのWebアプリケーションはブラウザがWebサイトを見るたびにデータベースを動かしてレンダリングして、、という動作を繰り返してました。
そうするとサーバーからデータが送られるまでにちょっとタイムラグが発生するんですよね。
なので、あらかじめ済ませちゃいます。
そういった訳でこのブログサイトは高速にページを表示できるのでした。

日々Webサイトとというものが進化していってるのがなんとなくでもわかったでしょうか。
これからもどんどん新しい概念が生まれたりしていくと思います。
ぜひ、そんな世界にワクワクして見ませんか。

ではまた。