Serverseitiges NextJS-Rendering unter Verwendung der Front-End-React-Query-Integration
P粉790187507
P粉790187507 2024-03-28 15:53:57
0
2
418

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}/>   
    )
}

P粉790187507
P粉790187507

Antworte allen(2)
P粉726133917

为了获取 Google 抓取工具的结果,您需要使用标题和说明中提供的元数据,还需要在 Google 控制台中提交您的域名

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

文档建议将数据放入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 (
           
    )
}
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!