Page content is not showing in page source
Asked Answered
S

1

1

I am trying to fetch content from an API and show it in a page. It's working fine but when I am trying to view page source code it's not showing those content that I am getting from API. I am using Next.js for this project and the code that I have used is following. Is there anyone who can help help me to solve this issue?

import React, { Fragment, useEffect, useState } from 'react'
import { API_BASE_URL } from '../Config/Settings'
import SideBar from '../Layouts/SideBar'
import Link from "next/link"
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import axios from 'axios'
    
export const CmsPage = (props) => {    
    const [PageHtmlContent, setPageContent] = useState('');
    const [PageTitle, setPageTitle] = useState('');
    const [PageDescription, setPageDescription] = useState('');
    const [SeoKeyword,setSeoKeyword]=useState('');

    useEffect( async() => {
        let body = {pageTypeCode:props.pageType,pageName:props.pageName};
        const config = {
            headers: {
                'x-auth-token':"rpsite-public-token" 
            }
        }
        try {
            const res= await axios.post(API_BASE_URL+'/api/cms/page',body,config);
           // alert(res.data.content);
           setPageContent(res.data.content);
           setPageTitle(res.data.seoTitle);
           setPageDescription(res.data.seoDescription);
           setSeoKeyword(res.data.seoKeyword);
        }
        catch(err) {
            setPageContent('<b>Something went wrong!</b>');
        }
    
      },[props]);

    return (
        <section class="inner-body-section">
              <Head>
               <title>{PageTitle}</title>
               <meta name="viewport" content="initial-scale=1.0, width=device-width" />
               <meta name="keywords" content={SeoKeyword} />
               <meta name="description" content={PageDescription}/>
             </Head>
            <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <SideBar/>
                        </div>
                        <div class="col-md-9">
                           <div className="inner-body-content">
                                <div id="contentBlock" className="page-content" dangerouslySetInnerHTML={{__html:PageHtmlContent}}></div>
                                </div>
                           </div> 
                        </div>
                </div>
       </section>  
    )
}

export default CmsPage;
Scimitar answered 3/2, 2021 at 13:57 Comment(4)
I don't understand what the problem is. It seems you retrieve some data from an API and then render the result. When you say "It's working fine" what part are you referring to? Does the page render correctly? Or is it only "view page source" that doesn't work as expected? I assume what you pasted is your source code. We would need to see matching output to help you. In general, it's a good idea to post a self-contained example (i.e. hard-code the API result) so anyone can run the code for themselves to troubleshoot.Passim
The output of the page working fine but when i am trying view source code only those part that are dynamic is not workingScimitar
Does this answer your question? page source doesn't have dynamic div elementPassim
Check this please #62065304Ayrshire
M
0

What you get when looking at View Page Source is the HTML returned by the server.

Because you're making the request and populating the data inside a useEffect this will only occur on the client, thus the data won't be visible in the page's source.

If you want the data to be populated on the server you may want to have a look at getStaticProps or getServerSideProps instead.


Here's an example of how you can use getStaticProps to populate the data on the server-side (a similar approach could be used with getServerSideProps).

export async function getStaticProps(context) {
    const res = await axios.post(`${API_BASE_URL}/api/cms/page`);
    
    // Assuming `res.data` format: { content, seoTitle, seoDescription, seoKeyword }
    return { 
        props: res.data 
    };
}

const CmsPage = ({ content, seoTitle, seoDescription, seoKeyword }) => {
    return (
        <>
            <Head>
                <title>{seoTitle}</title>
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                <meta name="keywords" content={seoKeyword} />
                <meta name="description" content={seoDescription}/>
            </Head>
            <section class="inner-body-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <SideBar/>
                        </div>
                        <div class="col-md-9">
                            <div className="inner-body-content">
                                <div id="contentBlock" className="page-content" dangerouslySetInnerHTML={{__html: content}}></div>
                            </div>
                        </div> 
                    </div>
                </div>
            </section>
        </>
    )
}

export default CmsPage;
Mclendon answered 3/2, 2021 at 14:23 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.