Vue アムステルダム 2022: パート VIII - Nuxt Web

いらっしゃいませ！ Vuejs Amsterdam Conference 2022 要約シリーズの第 7 部でお会いできてうれしく思います。このシリーズでは、すべての講演の要約を共有します。

私の JSWorld Conference 2022 サマリー シリーズ (4 部構成) は、ここで読むことができます。ここでは、初日のすべての講演をまとめています。私のブログでは、Vue Amsterdam Conference 2022 の以前の講演もご覧いただけます。

(繰り返し) はじめに

2 年半ぶりに JSWorld と Vue Amsterdam Conference が 6 月 1 日から 3 日にかけて Theatre Amsterdam に戻ってきました。私は初めてこの会議に参加する機会がありました。多くのことを学び、多くの素晴らしい人々に出会い、素晴らしい開発者と話し、素晴らしい時間を過ごしました。初日は JSWorld Conference が開催され、2 日目と 3 日目は Vue Amsterdam が開催されました。

会議は素晴らしい講演者の情報でいっぱいで、それぞれが私に貴重なことを教えてくれました。彼らは皆、知識と情報を他の開発者と共有したいと考えていました。それで、それを共有し続け、他の人がそれを使用するのを助けることができれば素晴らしいと思いました.

最初は、いくつかのメモやスライドを共有しようとしましたが、スピーカーが私と共有したものほどではなく、十分ではないと感じました.そこで、私は各スピーチをもう一度見て、深く掘り下げ、検索し、メモを取り、それらをスライドやスピーチ内の正確な言葉と組み合わせて、あなたと共有することにしました。私が彼らから学んだことと同じレベル。

非常に重要なポイント

これらのいくつかの記事で読んだものはすべて、スピーカー自身の努力と時間の結果であり、私はそれらをこれらの記事に変えることができるように学ぼうとしました.これらの記事に書かれている文章の多くでさえ、彼らが言ったことやスライドに書いたこととまったく同じです。つまり、何か新しいことを学べば、それは彼らの努力のおかげです。

最後になりましたが、一部のスピーチでは、すべての技術的な詳細やライブ コーディングを掘り下げることはできません。しかし、興味があり、より多くの情報が必要な場合は、私に知らせてください。より詳細な記事を別に書くようにします.また、Twitter/Linkedin も忘れずにチェックしてください。

ここでは、会議のプログラムを見つけることができます。

Nuxt ウェブ

Sebastien Chopin - Nuxt の共同創設者

@nuxtlabsでの私たちの使命は、最高の開発者エクスペリエンスを提供して、エンド ユーザーに最高のユーザー エクスペリエンスを提供することです。これを Nuxt で 6 年間行っています。

Nuxt は、あらゆる種類の Vue アプリを作成するための Web フレームワークです。つまり、次のことができます。

• サーバー側レンダリング (SSR)
• 静的サイト生成 (SSG)
• クライアント側レンダリング (CSR)
• Nuxt 3 による Edge Side Rendering (ESR)

2016 年 10 月に Nuxt が開始されて以来、npm で約 4,600 万回ダウンロードされ、30 万のライブ Web サイトがあり、18,000 の GitHub コントリビューターがいます。

Nuxt 2 と Nuxt 3 の比較

• Web サーバー:開発および運用 Web サーバーの場合、Nuxt 2 は Express.js のコアである接続に使用しますが、Nuxt 3 では h3 を作成し、あらゆる種類の JavaScript 環境で動作します。

• Bundler: Nuxt 2 では Webpack 4 が使用され、Nuxt 3 では Webpack 5 から開始されましたが、Vite のリリース後、デフォルトの Bundler として正式にサポートされています。

• UI フレームワーク: Nuxt 2 の Vue 2 と Nuxt 3 の Vue 3

• ルーティング ライブラリ: Nuxt 2 の Vue Router 3 と Nuxt 3 の Vue Router 4。 pages/ディレクトリが見つからない場合は含まれません。

• メタ管理: Nuxt は SSR を行うため、メタ タグを管理できることが重要です。 Vue Meta は Nuxt 2 で使用され、VueUse Head は Nuxt 3 で使用されます。

• Server(less) packager:これは Nuxt 3 で導入されました。これは node_modules を削除することで実稼働用の nuxt アプリケーションを圧縮するため、Nuxt アプリケーションは約 1 メガバイトになります。

これは、Nuxt 2 と Nuxt 3 の hello world バンドル サイズの比較です。

Nuxt 3 が非常に小さい理由の 1 つは、Vue 3 のようにツリー シェイク可能であることです。したがって、使用しない機能はバンドルに含まれません。

次の同等のバンドル サイズは約 80kB です。

その Nuxt 3 JS バンドルでは、25.3kB が Vue からのもので、残りの 8.7kB には以下が含まれます。

• ハイドレーション付きアプリエントリー
• <Suspense>を持つルート コンポーネント
• ユニバーサルで軽量なルーター: useRouter() 、 middleware 、および<NuxtLink>
• ヘッド コンポーザブル & コンポーネント: useHead() 、 <Title> 、 <Meta> 、 <Script> 、…
• ユニバーサル データ フェッチ: $fetch()
• デフォルトのエラー ページ: 404および500
• PluginsとruntimeConfigロジック
• useNuxtApp()とフック: app:created 、 app:mounted 、 page:start …

エッジサイドレンダリング

Edge Side Rendering (Ryan Dahl によって JavaScript コンテナーとも呼ばれる) は、エンド ユーザーに近い世界中の CDN ノードで JavaScript を実行する機能です。

利点:

• エンドユーザーからミリ秒単位で実行
• 0ms コールドスタート
• 維持するサーバーがない
• 自動スケーリング
• 手頃な価格

現在のエッジ コンピューティング プロバイダーの一部:

• CloudFlare ワーカー
• ヴェルセル エッジ
• ネットリファイエッジ
• デノデプロイ
• ラムダエッジ
• スタックパス

コンテンツ V2

Nuxt Content は、 content/ディレクトリ内の Markdown、YAML、CSV、および JSON ファイルを読み取り、アプリケーション用の強力なデータ レイヤーを作成するNuxt モジュールです。Content V2は、より多くの機能を備えています。

Nuxt 2.X

Nuxt 2.X の予定:

• ビュー 2.7
• Nuxt ブリッジ (ベータ版)
  • バイト
  • ニトロ
  • コンポジション API とスクリプトのセットアップ
  • TypeScript
  • nuxi CLI
  • PostCSS 8

Nuxt 3.0

Nuxt 3.0 の予定:

• Nuxt 画像
• ハイブリッド レンダリング: サーバー + SWR + プレレンダリング
• 完全な静的生成
• プレビューモード
• サーバー セッションと認証
• サービスワーカー (PWA)
• SEO ヘルパーと i18n サポート

第八話の終焉

この部分を楽しんでいただければ幸いです。私にとってのように、あなたにとっても価値があります。今後数日かけて、残りの会話を共有します。乞うご期待…

ここにも掲載されています。