我希望能对此问题寻求帮助。
我正在使用动态路由[id] .js
我首先获取客户端IP,然后从动态路由中获取页面ID,然后从第三方API获取数据。
最后我需要SSR,以便可以从获取的数据中显示图像和描述,以便在社交媒体上共享。
我可以使用useStates和useEffects来获取客户端信息,但是我不知道如何制作最后一个渲染SSR。
[id] .js文件
const myIP = () => {
const router = useRouter()
let pid;
useEffect(() => {
pid = router.query;
}, [router]);
const [postData, setData] = useState(<div/>);
useEffect(() => {
if (Object.values(pid).length > 0) {
//Call function to fetch data from the dynamic route ID - ex. <domain>/pages/167 -- pid = 167
sendID(pid)
.then((postData) => {
const componentIp = postData['data'];
setData(componentIp)
return componentIp;
})
.catch(error => "Error" )
}
}, [router])
var imageArray = [];
if (postData.images) {
//Get the First Image from the json data
var imageObj = new Object();
imageObj.src = URL_BASE + postData.images[0];
imageObj.altText = "Image 1";
imageArray.push(imageObj);
return (
<>
<Layout>
<Head>
<link rel="icon" href="/favicon.ico" />
<meta property="og:description" content="Some Description" />
<meta property="og:image" content={ imageArray[0].src } />
</Head>
<h3> { postData.page_information } </h3>
</Layout>
</>
);
}
else {
return <Loading />
}
因为在页面不显示openGraph标题之前需要花费一些渲染时间,但是页面源仅显示页面(第一个渲染)。