Rendu côté serveur NextJS utilisant l'intégration frontale de React Query

Question

J'ai actuellement l'implémentation de requête React suivante :

const { data, isSuccess, isLoading } = useQuery(['myQuery', myParams], async () => {
    return myAjaxCall(myParams);
}, {
    cacheTime: 0
});

Je passe le résultat renvoyé au composant personnalisé :

<Results foundRecords={data}/>

Je transmets les résultats de recherche initiaux dans mon composant de page parent afin que les robots des moteurs de recherche puissent voir les résultats lors du chargement initial de la page (si la demande est faite côté client - c'est-à-dire en utilisant useQuery()).

Dans ce cas, quelle est la meilleure façon d'intégrer la valeur de recherche initiale transmise dans le composant (via getServerSideProps() de NextJS) avec getServerSideProps()）与 useQuery() ?

Du haut de ma tête, cela ressemble à :

export async function getServerSideProps(context){
    ...
    return {
       initialData: ....
    }
}

export default function MyPage({initialData}){
    const { data, isSuccess, isLoading } = useQuery(['myQuery', myParams], async () => {
        return myAjaxCall(myParams);
    }, {
        cacheTime: 0
    });

    return (
        <Results foundRecords={initialData || data}/>   
    )
}

Answer 1

Pour obtenir les résultats du robot d'exploration Google, vous devez utiliser les métadonnées fournies dans le titre et la description, et vous devez également soumettre votre domaine dans la console Google

export default function Mypage({user}) {
    
      return (
        <>
          
            
            
            
            
            
            //Open Graph meta tags...
          
          <>Home
        ) 
 }
    
    
export async function getServerSideProps ({ req }) { 
  const user ={...}
  return {props: {user: user}} 
}

Answer 2

La documentation recommande de mettre les données dans useQuery initialData中。然后，您可以继续使用从 useQuery 返回的 data :

export async function getServerSideProps(context){
    ...
    return {
       initialData: ....
    }
}

export default function MyPage({initialData}){
    const { data, isSuccess, isLoading } = useQuery(['myQuery', myParams], async () => {
        return myAjaxCall(myParams);
    }, {
        cacheTime: 0,
        initialData
    });

    return (
           
    )
}