リリース·  

Nuxt 3.17

Nuxt 3.17がリリースされました！非同期データレイヤーの大幅な再構築、新しい組み込みコンポーネント、より良い警告表示、そしてパフォーマンスの改善が含まれています！
Daniel Roe

ダニエル・ロー

@danielroe.dev

📊 データフェッチの改善

Nuxtのデータフェッチレイヤーの大幅な再編成により、useAsyncDataとuseFetchが大幅に改善されました。

後方互換性の維持に努め、破壊的変更はexperimental.granularCachedDataフラグ（デフォルトで無効）の背後に配置しましたが、アップグレード後はアプリケーションを徹底的にテストすることをお勧めします。useAsyncDataを使用するコンポーネントがアンマウントされた後もキャッシュされたデータが永続的に利用可能であることに依存している場合は、experimental.purgeCachedDataを無効にして以前の動作に戻すこともできます。

詳細については元のPRをご覧ください。

コンポーネント間での一貫したデータ

同じキーを持つuseAsyncDataまたはuseFetchへのすべての呼び出しは、基となるrefを共有するようになり、アプリケーション全体で一貫性が確保されます。

<!-- ComponentA.vue -->
<script setup>
const { data: users, pending } = useAsyncData('users', fetchUsers)
</script>

<!-- ComponentB.vue -->
<script setup>
// This will reference the same data state as ComponentA
const { data: users, status } = useAsyncData('users', fetchUsers)
// When either component refreshes the data, both will update consistently
</script>

これにより、コンポーネント間でデータ状態に不整合が生じる様々な問題が解決されます。

リアクティブキー

キーとして計算されたref、プレーンなref、またはゲッター関数を使用できるようになりました。

const userId = ref('123')
const { data: user } = useAsyncData(
  computed(() => `user-${userId.value}`),
  () => fetchUser(userId.value)
)

// Changing the userId will automatically trigger a new data fetch
// and clean up the old data if no other components are using it
userId.value = '456'

最適化されたデータ再フェッチ

同じデータソースを監視している複数のコンポーネントは、依存関係が変更されたときに1回のデータフェッチのみをトリガーするようになりました。

// In multiple components:
const { data } = useAsyncData(
  'users', 
  () => $fetch(`/api/users?page=${route.query.page}`),
  { watch: [() => route.query.page] }
)

// When route.query.page changes, only one fetch operation will occur
// All components using this key will update simultaneously

🎭 組み込みNuxtコンポーネント

<NuxtTime> - 安全な時刻表示のための新しいコンポーネント

日付を扱う際のハイドレーションの不一致を解決するSSRセーフな時刻表示のための新しい<NuxtTime>コンポーネントが追加されました。#31876):

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

このコンポーネントは複数の時刻形式を受け入れ、クライアントとサーバーの両方のレンダリングを適切に処理します。

強化された<NuxtErrorBoundary>

<NuxtErrorBoundary>コンポーネントは単一ファイルコンポーネントに変換され、コンポーネントからerrorとclearErrorを公開するようになりました。エラーのスロット型でも同様に公開され、テンプレート内およびuseTemplateRefを介してエラーを処理する能力が向上しました。#31847):

<NuxtErrorBoundary @error="handleError">
  <template #error="{ error, clearError }">
    <div>
      <p>{{ error.message }}</p>
      <button @click="clearError">Try again</button>
    </div>
  </template>
  
  <!-- Content that might error -->
  <MyComponent />
</NuxtErrorBoundary>

🔗 ルーターの改善

<NuxtLink>がtrailingSlashプロパティを受け入れるようになり、URLの書式設定をより細かく制御できるようになりました。#31820):

<NuxtLink to="/about" trailing-slash>About</NuxtLink>
<!-- Will render <a href="/about/"> -->

🔄 ローディングインジケーターのカスタマイズ

コンポーネントに直接新しいプロパティを追加して、ローディングインジケーターをカスタマイズできるようになりました。#31532):

  • hideDelay: ローディングバーを非表示にするまでの待機時間を制御します。
  • resetDelay: ローディングインジケーターの状態をリセットするまでの待機時間を制御します。
<template>
  <NuxtLoadingIndicator :hide-delay="500" :reset-delay="300" />
</template>

📚 パッケージとしてのドキュメント

Nuxtのドキュメントがnpmパッケージとして利用可能になりました！@nuxt/docsをインストールすることで、ドキュメントウェブサイトの構築に使用される生のMarkdownおよびYAMLコンテンツにアクセスできます。#31353).

💻 開発者体験の改善

一般的な間違いを捕捉するのに役立ついくつかの警告が追加されました。

  • サーバーコンポーネントにルート要素がない場合の警告#31365
  • 予約済みのruntimeConfig.app名前空間を使用した場合の警告#31774
  • コアの自動インポートプリセットが上書きされた場合の警告#29971
  • ファイル内でdefinePageMetaが複数回使用された場合のエラー#31634

🔌 モジュール開発の強化

モジュール作者にとって朗報です。

  • 新しいexperimental.enforceModuleCompatibilityにより、Nuxtは互換性のないモジュールがロードされたときにエラーをスローできるようになりました。#31657これはNuxt v4でデフォルトで有効になります。
  • addComponentExportsを使用すると、ファイルから名前付きエクスポートを介してエクスポートされたすべてのコンポーネントを自動的に登録できるようになりました。#27155

🔥 パフォーマンスの改善

いくつかのパフォーマンス改善が行われました。

  • より高速なファイルグロビングのためにtinyglobbyに切り替えました。#31668
  • より高速なビルドのために.dataディレクトリを型チェックから除外しました。#31738
  • purgeCachedDataチェックを巻き上げることで、ツリーシェイキングを改善しました。#31785

✅ アップグレード

アップグレードの推奨事項は、以下を実行することです。

npx nuxi@latest upgrade --dedupe

これにより、ロックファイルが更新され、Nuxtが依存するすべての最新の依存関係、特にunjsエコシステムからのものが取り込まれます。

完全なリリースノート

Nuxt v3.17.0の完全なリリースノートを読む。

このリリースに参加してくださったすべての方々に心からの感謝を。❤️

← ブログに戻る
Nuxt on LinkedInBlueskyのNuxtNuxt on X