diff --git a/docs/content/3.api/1.composables/use-async-data.md b/docs/content/3.api/1.composables/use-async-data.md index 29825ec5104..f45124556f1 100644 --- a/docs/content/3.api/1.composables/use-async-data.md +++ b/docs/content/3.api/1.composables/use-async-data.md @@ -25,7 +25,6 @@ type AsyncDataOptions = { transform?: (input: DataT) => DataT pick?: string[] watch?: WatchSource[] - initialCache?: boolean immediate?: boolean } @@ -55,7 +54,6 @@ type AsyncData = { * _transform_: a function that can be used to alter `handler` function result after resolving * _pick_: only pick specified keys in this array from the `handler` function result * _watch_: watch reactive sources to auto-refresh - * _initialCache_: When set to `false`, will skip payload cache for initial fetch. (defaults to `true`) * _immediate_: When set to `false`, will prevent the request from firing immediately. (defaults to `true`) Under the hood, `lazy: false` uses `` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience. diff --git a/docs/content/3.api/1.composables/use-fetch.md b/docs/content/3.api/1.composables/use-fetch.md index 3d7f8ed69e1..7bb35c8a4d7 100644 --- a/docs/content/3.api/1.composables/use-fetch.md +++ b/docs/content/3.api/1.composables/use-fetch.md @@ -27,7 +27,6 @@ type UseFetchOptions = { transform?: (input: DataT) => DataT pick?: string[] watch?: WatchSource[] - initialCache?: boolean } type AsyncData = { @@ -60,7 +59,6 @@ All fetch options can be given a `computed` or `ref` value. These will be watche * `default`: A factory function to set the default value of the data, before the async function resolves - particularly useful with the `lazy: true` option. * `pick`: Only pick specified keys in this array from the `handler` function result. * `watch`: watch reactive sources to auto-refresh. - * `initialCache`: When set to `false`, will skip payload cache for initial fetch (defaults to `true`). * `transform`: A function that can be used to alter `handler` function result after resolving. * `immediate`: When set to `false`, will prevent the request from firing immediately. (defaults to `true`) diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts index 2a1446dd15a..96e33d0be58 100644 --- a/packages/nuxt/src/app/composables/asyncData.ts +++ b/packages/nuxt/src/app/composables/asyncData.ts @@ -29,7 +29,6 @@ export interface AsyncDataOptions< transform?: Transform pick?: PickKeys watch?: MultiWatchSources - initialCache?: boolean immediate?: boolean } @@ -102,19 +101,19 @@ export function useAsyncData< console.warn('[useAsyncData] `defer` has been renamed to `lazy`. Support for `defer` will be removed in RC.') } options.lazy = options.lazy ?? (options as any).defer ?? false - options.initialCache = options.initialCache ?? true options.immediate = options.immediate ?? true // Setup nuxt instance payload const nuxt = useNuxtApp() - const useInitialCache = () => (nuxt.isHydrating || options.initialCache) && nuxt.payload.data[key] !== undefined + const getCachedData = () => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key] + const hasCachedData = () => getCachedData() !== undefined // Create or use a shared asyncData entity if (!nuxt._asyncData[key]) { nuxt._asyncData[key] = { - data: ref(useInitialCache() ? nuxt.payload.data[key] : options.default?.() ?? null), - pending: ref(!useInitialCache()), + data: ref(getCachedData() ?? options.default?.() ?? null), + pending: ref(!hasCachedData()), error: ref(nuxt.payload._errors[key] ? createError(nuxt.payload._errors[key]) : null) } } @@ -130,8 +129,8 @@ export function useAsyncData< (nuxt._asyncDataPromises[key] as any).cancelled = true } // Avoid fetching same key that is already fetched - if (opts._initial && useInitialCache()) { - return nuxt.payload.data[key] + if (opts._initial && hasCachedData()) { + return getCachedData() } asyncData.pending.value = true // TODO: Cancel previous promise @@ -204,7 +203,7 @@ export function useAsyncData< } } - if (fetchOnServer && nuxt.isHydrating && key in nuxt.payload.data) { + if (fetchOnServer && nuxt.isHydrating && hasCachedData()) { // 1. Hydration (server: true): no fetch asyncData.pending.value = false } else if (instance && ((nuxt.payload.serverRendered && nuxt.isHydrating) || options.lazy) && options.immediate) { diff --git a/packages/nuxt/src/app/composables/fetch.ts b/packages/nuxt/src/app/composables/fetch.ts index 59d51141b33..dc9b9be706e 100644 --- a/packages/nuxt/src/app/composables/fetch.ts +++ b/packages/nuxt/src/app/composables/fetch.ts @@ -68,7 +68,6 @@ export function useFetch< transform, pick, watch, - initialCache, immediate, ...fetchOptions } = opts @@ -84,7 +83,6 @@ export function useFetch< default: defaultFn, transform, pick, - initialCache, immediate, watch: [ _fetchOptions, diff --git a/packages/nuxt/src/app/nuxt.ts b/packages/nuxt/src/app/nuxt.ts index c5c8e832366..d7a4d8e5346 100644 --- a/packages/nuxt/src/app/nuxt.ts +++ b/packages/nuxt/src/app/nuxt.ts @@ -89,6 +89,9 @@ interface _NuxtApp { } | null [key: string]: any } + static: { + data: Record + } provide: (name: string, value: any) => void } @@ -118,6 +121,9 @@ export function createNuxtApp (options: CreateOptions) { _errors: {}, ...(process.client ? window.__NUXT__ : { serverRendered: true }) }), + static: { + data: {} + }, isHydrating: process.client, deferHydration () { if (!nuxtApp.isHydrating) { return () => {} } diff --git a/packages/nuxt/src/app/plugins/payload.client.ts b/packages/nuxt/src/app/plugins/payload.client.ts index 65b1fce1c23..d8ca1c49efd 100644 --- a/packages/nuxt/src/app/plugins/payload.client.ts +++ b/packages/nuxt/src/app/plugins/payload.client.ts @@ -20,6 +20,6 @@ export default defineNuxtPlugin((nuxtApp) => { if (to.path === from.path) { return } const payload = await loadPayload(to.path) if (!payload) { return } - Object.assign(nuxtApp.payload.data, payload.data) + Object.assign(nuxtApp.static.data, payload.data) }) })