Page content is not showing in page source

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;

Solution

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;