Front
フロントでの設計思想を記述する。
Frontで使えるやつ
画像からfaviconを作ってくれる favicon一 式必要なため生成ツール紹介
JAMStack(JavaScript/APIs/Markup)
事前にデータを埋め込んだ静的HTMLとJavaScriptをベースに、完全に分離したサービスやシステムのAPIを通じて動的コンテンツを扱うWebアプリ・WebサイトのアーキテクチャをJamstackといいます。 ※nuxtのgenerate
JAMStackの env KEYについて
各レンダリング
SSG(静的サイトジェネレーター)
SSGはプリレンダリング。 静的ファイルのみなのでNetlifyやVercel、GitHub Pagesなどが良い。 JAMStackと言われれるアプリケーションはSSGに当たる。 環境に関しては、Node.js環境を必要 としません。 その代わり設計によってはクライアント側に大きな負荷をかけやすい&動的コンテンツの実装は難しい(できないことはない)ので、優れた設計が必要です。 CDNと相性が良いので、ホスティング先のリージョンは気にしなくて良いでしょう。 VercelのCDNは、強力に見えますが、Netlifyの扱いやすさを加味するとどちらも良い選択肢でしょう。
メリットとしては、 高速(CDN配信) セキュア(サーバを管理しない) でしょうか。
storeはどこに保存されている?
Vuexのストアは最終的にどこにデータを保存しているのでしょうか?ローカルのメモリですか?ブラウザのクッキーですか? ↓ 明示的に保存しなければ変数に入っているだけですので、ブラウザがページ遷移したりリロードしたタイミングでリセットされます。 ↓
物理的には、CPUかGPUかRAMかSSDかHDDかSDカードか。。。どれもあり得ます。それはOSやJavascript engine が決める事です。OSには仮想メモリという機能があり、RAMの中身を一時的にSSDやSDカードに待避する事があります。通常はRAMですが、計算をする瞬間にはCPU内のレジスタに読まれたり、読まれなかったりします。 明示的にコードを書かなければGPUに値を保存する事はほぼありませんが、コードを見ないとなんとも。 どこに保存されているとしても、その寿命は Javascript エンジンが管理しており、通常はブラウザ の画面遷移時に全て消えます。 ただし、Vue router のようなものを使っている場合、一見ページ遷移に見えてブラウザセッションは継続する場合があり、そのようなケースではグローバル変数は値を維持しています。