サーバーサイドエンジニアとして転職して、早 5 ヶ月が経とうとしています。
最近 Nuxt.js を勉強し始め、SPA と SSR の違いや、
転職の際に Laravel で作成したポートフォリオのようなものはなんと呼ぶんだろう？と疑問に思ったため、ざっくりまとめました。
MPA とは
MPA というのが、Vue や React を組み込まず、Laravel や rails などの Blade などのテンプレートエンジンでフロント作成するやつです。
僕のように就活時に Laravel のみで作成したポートフォリオのことです。
M(multi)P(page)A(application)の略です。
ページごとに HTML を作成しているため、Multi(複数)のページで構成されたアプリケーションということです。
SPA とは
S(single)P(page)A(application)の略です。
Vue や React は、1 つの HTML ファイルの中身を変えることで複数のページを表示しています。
Single(単一)のページで構成されたアプリケーションということです。
SSR とは
S(serber)S(side)R(rendering)の略です。レンダリングについてはこちら
サーバーサイドというので MPA と同じように思ってしまいがちですが、実はほぼ SPA なんです！
どういう意味？となりますが、SSR は SPA のデメリットを補うために現れたものなので、SPA のデメリットを理解すれば意味はわかってきます。
SPA のデメリット
これら以外にもデメリットはあるかと思いますが、この記事の目的は「なんとなーく」の理解なので最低限にさせていただきます。
1.初期ローディングに時間がかかる
2.SEO が不利になる
今回は 1 のみを考慮した説明をしていきます。
SPA がなぜ初期ローディングに時間がかかってしまうかというと、
ユーザーからの初回リクエストではサーバーから全コンテンツが返ってきます。それをブラウザ側で組み立てるので、初期表示に時間がかかってしまいます。
JavaScript のファイルが多い程、処理時間がかかってしまいます。
簡単にまとめる
SPA のデメリットもわかったところで、そこをどうカバーしているのかを完結に説明します。
SSR は、初回リクエストをサーバー側で組み立てます.
SPA のようにブラウザ側に全て任せず、サーバー側も協力してくれるので早いというわけです。
ということは、MPA と変わらないんじゃ？と思いがちですが、
SSR では、2回目以降は SPA と同じ動きをします。
SPA の初回ローディングが遅いというデメリットを、サーバーにも作業を共有することで打ち消し、
MPA の HTML を複数作成する手間を、SPAの処理を利用することで打ち消しています。