Tweet
Tweet

Slide 1

Slide 1 text

CDNから届ける Nuxt Edge-Side Rendering 2023/07/27 Vue.jsの勉強会はなんぼあってもいいですからね ICS Inc. Fumiya Konno

Slide 2

Slide 2 text

Fumiya Konno E ICS Inc.でフロントエンドエンジニア5年# E Vue.js歴も5年# E JSを使ったアニメーションの実装が得意 自己紹介 @238_k_

Slide 3

Slide 3 text

Nuxtのレンダリングの話

Slide 4

Slide 4 text

レンダリングって何？ 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要素 にすること！

Slide 5

Slide 5 text

▼App.vue

Slide 6

Slide 6 text

▼中間生成JavaScript ▼レンダリング結果（HTML）

Slide 7

Slide 7 text

静的サイトジェネレート（SSG）

Slide 8

Slide 8 text

サーバーサイドレンダリング（SSR）

Slide 9

Slide 9 text

クライアントサイドレンダリング（CSR）

Slide 10

Slide 10 text

サーバーサイドレンダリング（SSR）のメリット U SSGにくらべて..H U 動的なサイトが作れるC U CSRにくらべて..H U SEOにつよいC U 表示までが高速C U 実行環境に左右されない

Slide 11

Slide 11 text

サーバーサイドレンダリング（SSR）のデメリット 3 サーバーが遠方にあると、通信遅延が大き! 3 サーバー代がかかる

Slide 12

Slide 12 text

Edge-Side Rendering

Slide 13

Slide 13 text

従来のSSR

Slide 14

Slide 14 text

Edge-Side Rendering

Slide 15

Slide 15 text

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 より

Slide 16

Slide 16 text

実際の設定画面（Cloudflare Pages）

Slide 17

Slide 17 text

Edgeのデメリット... @ Edge Serverに乗せられるファイルのサイズ上限がシビ5 @ Cloudflare Workersの場合は10MP @ ビルド最適化やより軽量なライブラリの選定が必要

Slide 18

Slide 18 text

Nuxt Server Directoryの活用

Slide 19

Slide 19 text

serverディレクトリ P ~/server/api以下で定義した処理はAPIとして呼び出せI P ~/server/middlewareで定義した処理は、リクエストのたびに呼び出されI P 例）localhost:3000/api/helloにリクエストすると”world ”が返ってくる ▼~/server/api/hello.get.ts

Slide 20

Slide 20 text

server→DBへの接続 G CDNの中にはDBを提供しているサービスもある（Edge Database2 G ~/server/apiからCloudflare KVに接続する例 ▼~/server/api/endpoint.ts

Slide 21

Slide 21 text

Edge Databaseの例 4 Cloudflare K 4 Cloudflare D1（beta' 4 Vercel K 4 Deno KV（beta）

Slide 22

Slide 22 text

まとめ r 従来の技術であるCDNとサーバーサイドレンダリングが組み合わさって、高速な配信 が可能になったh r Nuxtはサーバーとクライアントが一体になった、SSRに適したフレームワーI r Edge Databaseと組み合わせて、開発体験が最高になるかも？

Slide 23

Slide 23 text

ICS MEDIA、読んでね！ https://ics.media/entry/230706/