利用前端React Query集成的NextJS服务器端渲染
P粉790187507
P粉790187507 2024-03-28 15:53:57
0
2
417

我目前有以下 React 查询实现:

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

我将返回的结果传递给自定义组件:

<Results foundRecords={data}/>

我正在将初始搜索结果传递到我的父页面组件中,以便搜索引擎抓取工具能够在初始页面加载时看到结果(如果请求是在客户端发出的 - 即使用 useQuery())。

在这种情况下,将传递到组件中的初始搜索值(通过 NextJS 的 getServerSideProps())与 useQuery() 实现集成的最佳方法是什么?

从我的头顶来看,它看起来像:

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

全部回复(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 (
           
    )
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!