Serverseitiges NextJS-Rendering unter Verwendung der Front-End-React-Query-Integration

Question

Ich habe derzeit die folgende React-Abfrageimplementierung:

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

Ich übergebe das zurückgegebene Ergebnis an die benutzerdefinierte Komponente:

<Results foundRecords={data}/>

Ich übergebe die ersten Suchergebnisse an meine übergeordnete Seitenkomponente, damit Suchmaschinen-Crawler die Ergebnisse beim ersten Laden der Seite sehen können (wenn die Anfrage auf der Clientseite erfolgt – d. h. mit useQuery()).

Was ist in diesem Fall der beste Weg, den an die Komponente übergebenen anfänglichen Suchwert (über getServerSideProps() von NextJS) mit getServerSideProps()）与 useQuery() zu integrieren?

Aus meinem Kopf sieht es so aus:

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

为了获取 Google 抓取工具的结果，您需要使用标题和说明中提供的元数据，还需要在 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

文档建议将数据放入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 (
           
    )
}