Perenderan sebelah pelayan NextJS menggunakan penyepaduan React Query bahagian hadapan

Question

Saya pada masa ini mempunyai pelaksanaan pertanyaan React berikut:

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

Saya menyerahkan hasil yang dikembalikan kepada komponen tersuai:

<Results foundRecords={data}/>

Saya menghantar hasil carian awal ke dalam komponen halaman induk saya supaya perangkak enjin carian boleh melihat hasil pada pemuatan halaman awal (jika permintaan dibuat pada bahagian pelanggan - iaitu menggunakan useQuery()).

Dalam kes ini, apakah cara terbaik untuk menyepadukan nilai carian awal yang dihantar ke dalam komponen (melalui getServerSideProps() NextJS) dengan getServerSideProps()）与 useQuery()?

Dari atas kepala saya kelihatan seperti:

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

Untuk mendapatkan hasil perangkak Google, anda perlu menggunakan metadata yang disediakan dalam tajuk dan perihalan, dan anda juga perlu menyerahkan domain anda dalam konsol 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

Dokumentasi mengesyorkan meletakkan data ke dalam useQuery's 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 (
           
    )
}