【ロピタルの学習記録 2/23】Nuxtの理解を深める。AsyncDataについて
今日はTeam Poetaのミーティングがありました（Poetaはそのミーティングで決まりました！可愛いでしょ？）
チームは３人でやっていて、僕は主にフロントエンドを担当しています。元々サーバサイドやってましたが追い出されました☺️でもめっちゃいい機会でしたね！まだフロント歴１ヶ月くらいですが、１つ開発したいアプリを決めて勉強するとかなり早く習得できますね
このままフロントエンドエンジニアになるのも全然ありかな〜？って思い始めてます
Nuxt
今日はAsyncDataの必要性が疑問だったので考えたり調べたりしてみました
AsyncDataとは
まずこいつは初回のレンダリング時とページ遷移時に呼び出されるみたいです。そして、初回レンダリング時はサーバ側で実行されて（SSR）、ページ遷移時はクライアントで実行される（CSR）って感じらしいです。
んで、この二つのタイミングで実行する際にデータを取得するためにAxiosで通信します。初回はサーバ側で、２回目以降はブラウザ上で実行されるのでそもそも環境が違いますが、AxiosのisomorphicによってNode.js（サーバ上で動くJavascript）でもブラウザ環境でも動作するので心配はご無用って感じです
つまり、AsyncDataとAxiosの組み合わせによって、初回レンダリング時にはサーバ側で実行し、それ以降はブラウザ上で実行するということが可能になるというわけです
AsyncDataはなぜ変な挙動をするのか
※SPAという前提の話になります
じゃあ、なんでこんな面倒な挙動をするのか。だって、HTMLとCSSとJavascriptをブラウザ上にダウンロードしてからJavascriptを実行してサーバにデータを取りに行った方がブラウザからは部分的な表示は早くなります。
なぜ面倒な挙動をするのかというと、SEO対策です。クローラはそのサイトにどんなこと書いてあるのか分析して検索結果の上位に表示したりしますが、クローラはJavascriptが実行されるのをまたずに次に行ってしまいます。
なので、サーバ側でJavascriptを先に実行してからページを返すことによって、SEO対策になるのですぅ
Javascript
文字列の部分は眠たかったのでぶっとばしました☺️
アプリ開発
ログイン画面を作成して、NuxtのAuth-Moduleを使用してRailsAPIを叩き、ログインできるようにしました。
とりあえずって感じのUIですが、試作した大枠に合わせて改善していきます（位置もずれてるし）
ただ、ログイン後の状態を維持するにはVuexが必要みたいなので勉強します。というかNuxt使うなら必須みたいですね
明日はNuxtのドキュメントとVuexのドキュメントを丁寧に読むことにします。おやすみなさい
