docs: add more info about custom serialize/revive (#24680)

docs/1.getting-started/6.data-fetching.md

@@ -440,7 +440,17 @@ Using `<script setup lang="ts">` is the recommended way of declaring Vue compone
 
 :read-more{to="/docs/api/utils/define-nuxt-component"}
 
-## Serialization
+## Serializing Data From Server to Client
+
+When using `useAsyncData` and `useLazyAsyncData` to transfer data fetched on server to the client (as well as anything else that utilizes [the Nuxt payload](/docs/api/composables/use-nuxt-app#payload)), the payload is serialized with [`devalue`](https://github.com/Rich-Harris/devalue). This allows us to transfer not just basic JSON but also to serialize and revive/deserialize more advanced kinds of data, such as regular expressions, Dates, Map and Set, `ref`, `reactive`, `shallowRef`, `shallowReactive` and `NuxtError` - and more.
+
+It is also possible to define your own serializer/deserializer for types that are not supported by Nuxt. You can read more in the [`useNuxtApp`](/docs/api/composables/use-nuxt-app#payload) docs.
+
+::callout
+Note that this _does not apply_ to data passed from your server routes when fetched with `$fetch` or `useFetch` - see the next section for more information.
+::
+
+## Serializing Data From API Routes
 
 When fetching data from the `server` directory, the response is serialized using `JSON.stringify`. However, since serialization is limited to only JavaScript primitive types, Nuxt does its best to convert the return type of `$fetch` and [`useFetch`](/docs/api/composables/use-fetch) to match the actual value.
 

docs/3.api/2.composables/use-nuxt-app.md

@@ -126,16 +126,25 @@ Nuxt exposes the following properties through `ssrContext`:
 
   It is also possible to use more advanced types, such as `ref`, `reactive`, `shallowRef`, `shallowReactive` and `NuxtError`.
 
-  You can also add your own types, with a special plugin helper:
+  Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own serializer/deserializer for types that are not supported by Nuxt.
 
-  ```ts [plugins/custom-payload.ts]
+  In the example below, we define a serializer for the [Luxon](https://moment.github.io/luxon/#/) DateTime class.
-    /**
+
-     * This kind of plugin runs very early in the Nuxt lifecycle, before we revive the payload.
+  ```ts [plugins/date-time-payload.ts]
-     * You will not have access to the router or other Nuxt-injected properties.
+  /**
-     */
+   * This kind of plugin runs very early in the Nuxt lifecycle, before we revive the payload.
+   * You will not have access to the router or other Nuxt-injected properties.
+   *
+   * Note that the "DateTime" string is the type identifier and must
+   * be the same on both the reducer and the reviver.
+   */
   export default definePayloadPlugin((nuxtApp) => {
-    definePayloadReducer('BlinkingText', data => data === '<blink>' && '_')
+    definePayloadReducer('DateTime', (value) => {
-    definePayloadReviver('BlinkingText', () => '<blink>')
+      return value instanceof DateTime && value.toJSON()
+    })
+    definePayloadReviver('DateTime', (value) => {
+      return DateTime.fromISO(value)
+    })
   })
   ```