# やったこと
- Nuxt SPA のチュートリアルを写経
- 防災アプリについてAPI／フロントの連携をどう構成するのが良さそうか検討
- （おまけ）サーバーサイドレンダリング（SSR）とは何か、何が嬉しいのか

# Nuxt SPA
- [Nuxt.jsでSPAを実装してみた話 #devio2020 - YouTube](https://www.youtube.com/watch?v=IkSRJFox-MY)
- 20分で作れるチュートリアル（クラスメソッド社）
- 写経して作ったもの

- 認証付きToDo管理アプリを意識したサンプルアプリ
- 認証部分はダミー
- 簡単にデモします

- Vue+VueRouter+VuexよりNuxtの方が書きやすいと思った
- 認証部分を実装するには？

- SPAから Rails API を叩いて認証を行う
- [【Nuxt.js】Auth Moduleでログイン機能を実装する （ + Ruby on Rails・devise_token_authで認証を行う） - Qiita](https://qiita.com/mtoyopet/items/a94cd61f9213c6501519)
- Firebaseの認証機能を使う

# 防災アプリの構成検討
## 防災アプリの要件
- Rails + Vue or React
- スマホ利用前提
- 会員登録機能
- ログイン認証
- ブログ機能（CMS）
- 外部ECサイトとのAPIによる連携

## 論点1 SPA or 静的化（SSG）
- [Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら - Qiita](https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d)
- 結論としてはSPAで良いのではないか

- ログイン機能と静的サイトの相性が悪いため
> ログインが必要だったり、ユーザーごとに最適化されたタイムラインが表示されるような場合は、あらかじめHTMLを生成する利点が少ないどころか、実装が面倒になるので、静的化には向いていません。気合で解決できるケースもありますが、労力が割に合わないことが多いと思うので、後悔することになるかもしれません。（しました）
- SPAでもホスティング先をS3やNetlifyにすることは可能

## 論点2 Railsとフロントを分けて作るか、SPA on Railsにするか
- 個人的には前者の方が嬉しい
- fa-coding-app, brapon, ssrは後者
- 前者はNuxt.jsで作れる、ホスティング先はS3やNetlify
- 後者はRailsのapplication.html.erbの上にレンダリングする。ホスティングサーバは不要になるが密結合なのとNuxt、Nextが使えない（Vue、Reactを使う）

## 論点3 VueかReactか
- 個人的にはVueの方が嬉しい
- とはいえ将来的にはReactも触ってみたい

# サーバーサイドレンダリング（SSR）とは何か
- メリット

- SPAのUXをさらに向上させられる
- SEO対策としても有効
- デメリット

- Node.jsが動くサーバを立てる必要がある
- [Real World HTTP ミニ版](https://www.oreilly.co.jp/books/9784873118789/)によるWebアプリケーションの動作パターン分類

- 第1世代：サーバーサイドレンダリング
- JavaScriptを使わないRails、Laravel、Djangoなどのアプリ
- 第2世代：Ajax
- 画面遷移せずに、ページの一部のデータのみを書き換える
- 第3世代：SPA
- Vue.js, React
- ページ遷移がより高速化、ただし初回読み込みに時間がかかる
- 第3.5世代：SPA+サーバーサイドレンダリング
- Nuxt, Next.js
- 初回読み込みを高速化してSPAの第3世代の課題を補う
- [Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 － Publickey](https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html)
- SPA+SSRはなぜ早いのか
- それぞれの処理に掛かる時間が以下であるとする
- 0.1s HTMLのダウンロード
- 0.1s JavaScriptファイルのダウンロード
- 1.0s JavaScriptをロードする（ブラウザ上で実行可能な状態にする）
- 0.1s JavaScript（仮想DOM）からHTMLの生成
- 0.1s HTMLの表示
- SPAの場合は上の順で処理が行われるため、HTMLの表示までに1.4s掛かる（それまで真っ白）
- 対するSPA+SSRは0.3sでHTML描画が完了する
- 0.1s JavaScript（仮想DOM）からHTMLの生成（サーバ側で行う）
- 0.1s HTMLのダウンロード（完成済）
- 0.1s HTMLの表示
- 0.1s JavaScriptファイルのダウンロード
- 1.0s JavaScriptをロードする（ブラウザ上で実行可能な状態にする）
- JavaScriptがブラウザ上で実行可能な状態になるまでの時間は変わらない
- 以上のように解釈したが間違っているかもしれません