入る前に
こんにちは、アプリケーションエンジニアとして働いてるキムです。
社内では、アプリケーションエンジニアと言う職名として入ってますが、世間的にはサーバーサイドエンジニアに近い立場ですね。（バックエンド側的な感じですかね？）
フロント側については、本当にプログラミングを学び初めての時、HTMLを書きながら、コーディングてこんなものなんだとか、javascriptや、jQueryを使ってみたりとかが全部で、本格仕事を始めてからはサーバーサイドを開発するのが、思った以上楽しかったのでなかなか接するチャンスが無かったです。
今回チーム内でLaravelアプリを機能ごと分け複数のアプリとしてサービスする施策がこの２年ぐらい進めているところです。その中、サーバーサイド処理はGoで開発し、運用中です。
残りのフロント部分を今回移行することになり、自分が一度やってみます！という感覚で今回経験・勉強したことをこの場を借りて、共有してみようと思います。
この記事を始め、少なくとも２個と記事を作成する予定になります。
前回yarnと、npmについての記事を作成しておいたものがあります。興味があれば、一度読んで見てください。
まだパッケージマネジメントについてはブラックボックス的な部分が多いのでまだまだ勉強が必要ですが、なんとかこんなものなんだレベールまでは身につけたと思います。
１．最近のフロントエンドのアプリケーションについて、
２．Nuxt.jsについて
３．ESLint、Prettierなどのツールについて
これから上記の順番で作業した内容や、学んだことを整理する予定です。
よろしくおねがいします。
CSR vs SSR
基本的にSSRとCSRについて理解する必要があります。
この２つの概念は今回使ったNuxt.jsでは最も重要な特徴かと思います。
CSR (Client Side Rendering)
言葉通りに、クライアントサイドレンダリングです。
普段SPA(Single Page Application)でよく使ってる方法であります。
SPAとは、最初一度ページ全体をロードしておいて中身のデータだけを更新しながら使えるウェブアプリケーションのことです。
最初ページをロードする時点からはページ再読み込み（F5のルプレッシュですね）なしで、必要な部分だけサーバーからデータを取得して更新するレンダリング方法になります。
必要な部分だけ更新するので、ページの動きがかなり自然に見えます。
サーバーでViewをレンダリングするのではなく、クライアント側でHTMLをダウンロード後、jsファイルや、リソースなどを追加でダウンロードして、ユーザーのブラウザからレンダリングして見せるので、SSRよりは初期Viewをロードするときに時間がかかります。
Viewが表示された後からはすぐインターレクション（相互作用）が可能になります。
最近使われてるほとんどのウェブクローラー、ボットはjsファイルを実行できず、HTMLコンテンツだけ収集する動作してます。
なので、CSRの方法で作られたページはレンダリングされる前の状態なので、空ページとして認識され、これは検索エンジンに正しく漏出されないので、ウェブページヘの輸入が減る原因になることもあります。
CSRのメリット
- 自然なUX
- 必要な部分だけを部分的にロードする（性能）
- サーバーのテンプレートレンダリングをクライアントに分散（性能）
- コンポネントごと開発に用意（生産性）
- モバイルアプリ開発を考慮してる時、同じAPIを使えるように設計可能（生産性）
CSRのデメリ
- javascriptファイルをBundlingして一気にDLするので、初期レンダリングに時間がかかる（WebpackのCode Splittingで解消可能）
- 検索エンジン最適化（SEO)が難しい
- セキュリティー的にIssuesがある（フロントエンド側へのビジネスロジック最小化）
SSR (Server Side Rendering)
サーバーサイドレンダリング
MPA(Multiple Page Application)でよく使われる方法
言葉通りに、サーバーでユーザーに見せるページを全部レンダリングして出す方法
サーバーで新しいページを養成（Request)をする方法なので、RequestをするたびにRefreshが発生する。。
Viewをサーバーでレンダリングすので、初期ロードがCSRに比べ早い。
Viewをサーバーで全部レンダリングして、HTMLとして返すので、HTML内部にすべてのコンテンツ情報が入ってる。ことでSEO適用に問題がない。
SSRのメリット
- SEO (検索エンジン最適化）
- 初期ロードスピードの速さ（サーバーから画面レンダリングの必須情報を先に取得できるので）
SSRのデメリ
- ページ移動の時画面全体がリロードされる
- ページ移動する時、不要なテンプレートも重複してロード（性能）
- サーバーでのレンダリングについての負荷（性能）
- モバイルアプリを開発するときに追加のバックエンド作業が必要（生産性）
- TTV(Time To View)とTTI(Time To Interact)間のタイムラッグが発生→ユーザーの操作に反応がない場合がある
- UXの経験的に良くないときがある。
上で説明してるSSRの方法はもう古いSSR方法になりました。
過去、ページを移動するたびに再読込が発生したことを改善するために新しいSSR概念が登場しました。この新しいSSRを適用したアプリケーションをUniversal Appと呼ばれてます。
それではUniversal Appの一つである、Nuxt.jsについて確認してみましょう。