Nuxt v3はどうなるのか

2020/09/19にめでたくVue.js v3がリリースされました🎉
さて、私の関心は業務でも利用しているNuxt.jsがVue.js v3に対応するとどうなるのか、Nuxt.js v3はどうなっていくのか気になっています。

Vue.js Amsterdamで紹介されたNuxt.js v3のスライドから個人的に気になったところを抜粋して紹介します。

- [The State of Nuxt by Sébastien Chopin](https://nuxtjs.slides.com/atinux/state-of-nuxt-2020)
- [Nuxt 3 Architecture Updates by pooya parsa](https://slides.com/pi0/nuxt3-arch/)

詳しくはスライドを参照ください。


# TypeScriptのサポート
- core や vue-appが型付になる
- `@nuxt/types`や`nuxt-ts`が不要になる
- VueComponentのTypescriptサポート（SFC？）
- ランタイムと`nuxt.config`のサポート

現状は[Nuxt TypeScript](https://typescript.nuxtjs.org/ja/)を使っていますがNuxt v3からはnuxt-tsが不要になるというので楽しみですね。

# Builder v3
- ESBuild preset（babelより３倍速くなる）
- Webpack Config preset
- Webpack5

ESBuildを使うことによってビルドが高速化されるのは嬉しいですね。
`hardSource`オプションを使っていますが、これなしでも十分速くなることに期待

# app.vue
- エントリーポイントがapp.vueに変更
- `pages`はオプショナル

ランディングページを作成する際などはシンプルになりますね。

# Routing
- Vue Router 4
- `pages/_slug.vue` は `pages/[slug].vue` に変更
- `pages/blog/[...all].vue` でサブパスをすべて取得できる
- `pages/404.vue` と `pages/_error.vue` が追加
- `pages/_ignored.vue` プレフィックスを無視する
- プラグインを利用して実行時にルートを追加
- `<nuxt/>` および `<nuxt-child/>` は `<nuxt-page/>` に変更

エラーページはSSR時のエラーもハンドリングされるんでしょうか？
期待したいですね。
ignoreについてはよくわからないです（詳しい方コメントください）

# Data Fetching
- CompositionAPIベース
- fetchされるまでページナビゲーションを停止できる
- サーバー側とのデータをレンダリング時にハイドレーション
- コンポーネントレベルでどこでも機能
- SWRのようなキャッシングをサポート
- Custom Data Fetcherをサポート

Nuxt v3で特に期待されている機能かと思います。
~~SWRはstale-while-revalidateの頭文字だそうで、ざっくり説明するとCache-Control、ETag、Expiresヘッダーなどからリソース期限を判断し、適切に再取得する仕組みのようです。ユーザーはリソースの期限を気にすることなく実装することができそうですね。~~

追記:
@ushironoko さんよりコメントいただきました。

> VueにもSWRVというNuxtのコアメンバーが開発しているcomposition apiベースの似たライブラリがあるので、それを利用するという話かもしれませんね。
https://github.com/Kong/swrv

また、SWR(stale-while-revalidate)はCache-Controlヘッダーに指定することでブラウザがバックグラウンドで新しいリソースをチェックくれるみたいです。細かい挙動を理解していないので以下等を参照ください🙇‍♀️
https://tools.ietf.org/html/rfc5861
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

## useFetch
Data FetchingはuseFetch関数によって提供されます。
詳しい機能は[スライドの動画](https://nuxtjs.slides.com/atinux/state-of-nuxt-2020#/5/12)を参照ください。

```ts
	
import { useFetch } from '@nuxt/composables'
 
export default {
  async setup() {
    // Make an API call
    const { data: mountains } = await useFetch('https://api.nuxtjs.dev/mountains')
    
    return { mountains }
  }
}
```

```ts
// Signature
useFetch(request, options)
 
// Watch a param
useFetch(() => `https://api.nuxtjs.dev/mountains/${props.slug}`)
 
// Use a custom fetcher
useFetch(() => $prismic.api.getByUID('page', params.uid))
 
// Don't block client-side navigation
useFetch('https://api.nuxtjs.dev/mountains', { defer: true })
 
// Fetch only on client
useFetch('https://api.nuxtjs.dev/mountains', { server: false })
```

# Multi App
- themeを利用したProjectの拡張
- ロジックで構造を分離

個人的には刺さらなかったですが、複数アプリを管理したい人は朗報でしょうか？

```
├── shop
|  ├── components
|  |  └── nav.vue
|  ├── layouts
|  |  └── admin.vue
|  ├── middleware
|  |  └── admin.js
|  ├── pages
|  |  └── shop
|  |     └── index.vue
|  └── store
|     └── admin.js
├── nuxt.config.js
├── package.json
├── pages
|  └── index.vue
└── store
   └── public.js
```
※スライドより転載


# 他気になったところ
- IE11がサポート対象外
- `/plugins` がauto importになる
- `/static` は `/public` に変更
- `app.html` は `document.html`に変更
- サーバーサイドのみ機能する `/functions` が追加

Nuxt v3の提供は今の所時期未定のようです。
今から待ち遠しいですね。

🙇‍♀️