docs: add advanced async data example

docs/pages/3.usage.md

@@ -377,6 +377,12 @@ const total = await count('restaurants')
 
 > Check out the Strapi v3 [Count entries](https://docs-v3.strapi.io/developer-docs/latest/developer-resources/content-api/content-api.html#count-entries) REST API endpoint.
 
+<alert type="info">
+
+All examples above are demonstrated with http calls in script setup. However, to handle SSR properly you may want to use [useAsyncData](/advanced#async-data).
+
+</alert>
+
 ## `useStrapiGraphQL`
 
 This composable is an alias of `useStrapiClient` that sets the `url` to `/graphql` and `method` to `POST`. You can use this method to send an authenticated GraphQL query to your API.

docs/pages/4.advanced.md

@@ -3,6 +3,25 @@ title: Advanced
 description: 'Real-life advanced usages of the strapi module.'
 ---
 
+## Async data
+
+To take full advantage of server-side rendering, you can use Nuxt [useAsyncData](https://v3.nuxtjs.org/docs/usage/data-fetching#useasyncdata) composable:
+
+```vue
+<script setup lang="ts">
+import type { Restaurant } from '~/types'
+import type { Strapi4Response } from '@nuxtjs/strapi'
+
+const route = useRoute()
+const { findOne } = useStrapi4()
+
+const { data, pending, refresh, error } = await useAsyncData(
+  'restaurant',
+  () => findOne<Strapi4Response<Restaurant>>('restaurants', route.params.id)
+)
+</script>
+```
+
 ## Auth middleware
 
 You can protect your authenticated routes by creating a custom plugin in your project, here is an example: