场景:通过getServerSideProps获取服务端数据,并且传递到子元素中进行渲染,理论上应该是出现在html的body中的,但是实际上只有<script>中包含获得的数据。
const getServerSideProps: GetServerSideProps<PageData> = async () => {
const { res } = await fetchHomeNews();
return {
props: {
res
}
}
}
export default function News(props: PageData) {
const { res } = props;
return (
<HomeNews newsArr={res} />
)
}
function HomeNews(props: TeamNewsProps) {
const { newsArr }= props;
const [newsList,setNewsList] = useState<>([]);
useEffect(()=>{
setNewsList(transformToNews([...newsArr]));
},[])
return (
<main >
{ newsList.map((item,index) => (
<News
news={item}
/>
))
}
</main>
)
}
export default memo(HomeNews)
主要原因在于HomeNews中首次渲染使用的newsList = [ ],在componentDidmount之后才进行setNewsList(transformToNews([...newsArr])),这个时候dom已经渲染完毕了,所以查看源代码,服务端渲染的数据是空。
直接改为:即可。
const { newsArr }= props;
const newsList:NewsItemType[] = transformToNews([...newsArr]);
可以看见首屏数据在div中了,可以进行seo