页面内容未显示在源代码中答案

【问题标题】：Page Content is not showing in source code页面内容未显示在源代码中
【发布时间】：2021-02-03 13:57:18
【问题描述】：

我正在尝试获取 API 的内容并显示一个页面，它工作正常，但是当我尝试查看页面源代码时，它没有显示我从 API 获取的那些内容。我正在使用 next.js这个项目和我使用的代码如下。有没有人可以帮我解决这个问题？

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;

【问题讨论】：

我不明白问题出在哪里。您似乎从 API 检索了一些数据，然后呈现结果。当您说“它工作正常”时，您指的是哪一部分？页面是否正确呈现？还是只是“查看页面源代码”无法按预期工作？我假设您粘贴的是您的源代码。我们需要查看匹配的输出来帮助您。一般来说，最好发布一个独立的示例（即硬编码 API 结果），以便任何人都可以自己运行代码进行故障排除。
页面的输出工作正常，但是当我尝试查看源代码时，只有那些动态的部分不起作用
这能回答你的问题吗？ page source doesn't have dynamic div element

标签： reactjs next.js

【解决方案1】：

查看View Page Source 时得到的是服务器返回的 HTML。

因为您是在发出请求并在 useEffect 中填充数据，所以这只发生在客户端上。

如果您希望在服务器上填充数据，您可能需要查看getStaticProps or getServerSideProps。

【讨论】：