nuxt-modules / nuxt-modules/ionic

docs: How to wrap useAsyncData for SSR aware code (seo meta tags)

Open
#466 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

documentation
Dominant language
TypeScript
Stars
457
Forks
53
Avg merge
7h 32m
Merged PRs (30d)
21

Description

📚 Is your documentation request related to a problem?

I want to set meta tags server side for the web build.

The doc mentions to wrap useAsyncData for SSR aware code.

It is unclear how a implementation for such a wrapper function would look like.

🔍 Where should you find it?

https://ionic.nuxtjs.org/cookbook/web-and-device#a-single-codebase

ℹ️ Additional context

Our current workaround for SSR to set meta tags from asynchronous data on a nuxt/ionic web server is to

  1. Wrap useSeoMeta & useServerSeoMeta like so:
useIonMeta.ts

export function useIonMeta(seoInput: UseSeoMetaInput) {
  useServerSeoMeta(seoInput);

  onIonViewWillEnter(() => {
    useSeoMeta(seoInput);
  });
}
  1. Query async data and set tags in App.vue
App.vue

const { data } = await useFetch(`https://gorest.co.in/public/v2/users`);

  useIonMeta({
    title: () => data.value?.name,
    // more meta tags e.g. description, ogImageUrl, etc
  });

I would be more than happy to modify the docs and create a PR.

Thanks

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the “A single codebase” section in the linked cookbook and compare its useAsyncData guidance with the reported useIonMeta workaround. Update that section with a clear SSR-aware wrapper example for asynchronous SEO data, including the expected server-side and client-side behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.