CDNから届ける Nuxt Edge-Side Rendering

2023年7月27日「Vue.jsの勉強会はなんぼあってもいいですからね」のLT登壇資料です

Transcript

1. CDNから届ける Nuxt Edge-Side Rendering 2023/07/27 Vue.jsの勉強会はなんぼあってもいいですからね ICS Inc. Fumiya Konno
2. Fumiya Konno E ICS Inc.でフロントエンドエンジニア5年# E Vue.js歴も5年# E JSを使ったアニメーションの実装が得意 自己紹介 @238_k_
3. Nuxtのレンダリングの話
4. レンダリングって何？ Both the browser and server can interpret JavaScript code to turn Vue.js components into HTML elements. This step is called rendering. Nuxt - Rendering Modes (https://nuxt.com/docs/guide/concepts/ rendering) →ブラウザとサーバーがJavaScriptの力 で、Vue.jsのコンポーネントをHTML要素 にすること！
5. ▼App.vue
6. ▼中間生成JavaScript ▼レンダリング結果（HTML）
7. 静的サイトジェネレート（SSG）
8. サーバーサイドレンダリング（SSR）
9. クライアントサイドレンダリング（CSR）
10. サーバーサイドレンダリング（SSR）のメリット U SSGにくらべて..H U 動的なサイトが作れるC U CSRにくらべて..H U SEOにつよいC U 表示までが高速C U 実行環境に左右されない
11. サーバーサイドレンダリング（SSR）のデメリット 3 サーバーが遠方にあると、通信遅延が大き! 3 サーバー代がかかる
12. Edge-Side Rendering
13. 従来のSSR
14. Edge-Side Rendering
15. Nuxt公式ドキュメントいわく i Cloudflare Pages with zero configuration using the git integration and the nuxt build commane i Lagon using the NITRO_PRESET=lagon npx nuxt build commane i Vercel Edge Functions using the nuxt build command and NITRO_PRESET=vercel-edge environment variablF i Netlify Edge Functions using the nuxt build command and NITRO_PRESET=netlify-edge environment variable 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 Nuxt - Rendering Modes - Edge-Side Rendering より
16. 実際の設定画面（Cloudflare Pages）
17. Edgeのデメリット... @ Edge Serverに乗せられるファイルのサイズ上限がシビ5 @ Cloudflare Workersの場合は10MP @ ビルド最適化やより軽量なライブラリの選定が必要
18. Nuxt Server Directoryの活用
19. serverディレクトリ P ~/server/api以下で定義した処理はAPIとして呼び出せI P ~/server/middlewareで定義した処理は、リクエストのたびに呼び出されI P 例）localhost:3000/api/helloにリクエストすると”world ”が返ってくる ▼~/server/api/hello.get.ts
20. server→DBへの接続 G CDNの中にはDBを提供しているサービスもある（Edge Database2 G ~/server/apiからCloudflare KVに接続する例 ▼~/server/api/endpoint.ts
21. Edge Databaseの例 4 Cloudflare K 4 Cloudflare D1（beta' 4 Vercel K 4 Deno KV（beta）
22. まとめ r 従来の技術であるCDNとサーバーサイドレンダリングが組み合わさって、高速な配信 が可能になったh r Nuxtはサーバーとクライアントが一体になった、SSRに適したフレームワーI r Edge Databaseと組み合わせて、開発体験が最高になるかも？
23. ICS MEDIA、読んでね！ https://ics.media/entry/230706/