NextJs-具有SSR的动态路由的客户端IP捕获

时间:2020-09-16 06:45:18

标签: reactjs next.js server-side-rendering

我希望能对此问题寻求帮助。

我正在使用动态路由[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标题之前需要花费一些渲染时间,但是页面源仅显示页面(第一个渲染)。

0 个答案:

没有答案