Question

我有一个使用NextJS的网站并做出反应，当我单击“查看页面源代码”时，HTML元素不可见，标记内唯一的元素是此代码是一个带有“正在加载”文本和脚本标记的div：

<body dir="rtl"><div id="__next"><div>loading</div></div><script id="__NEXT_DATA__"
...
></script></body>

我试图使NextJS在服务器端呈现它，并在正文中返回在右键单击->查看页面源代码时也将可见的所有HTML标记

我尝试将以下代码添加到页面中，如在一些教程中所见，但仍然相同。

import fetch from 'isomorphic-unfetch';
index.getInitialProps = async () => {
    //for test
    const res = await fetch("http://api.github.com/repos/zeit/next.js");
    const json = await res.json();
    return {
        fullName: json.full_name,
    }
};

整个页面的组件代码如下：

import fetch from 'isomorphic-unfetch';
import Head from "next/head";
import { GetListOfCategories, GetListOfTools } from "../src/assets/Database/DatabaseUtils";
import { useEffect } from "react";
import { GAEvent, GAEventCat, GAEventAction } from "../src/components/Utils/Tracking";
import CustomSlider from "../src/components/MainPageComponents/CustomSlider";
import CardsBar from "../src/components/CardsBarComponents/CardsBar";
import ArticlesViewer from "../src/components/ArticleComponents/ArticlesViewer";
import MainComponentContainer from "../src/components/ContainerComponents/MainComponentContainer";

function BakeToolsCardsForCategory(category) {
    let toolsInThisCategory = fetchedData.toolsList.filter(tool => tool.category == category.id);
    return <CardsBar categoryData={category} cardsToShow={toolsInThisCategory} isMainCategoriesDisplay="false" key={category.id} ></CardsBar>
}

let fetchedData = {
    categoriesList: [],
    toolsList: []
}

function index(props) {

    console.log('props are:', props);

    fetchedData.categoriesList = GetListOfCategories();
    fetchedData.toolsList = GetListOfTools();

    useEffect(() => {
        GAEvent(GAEventCat.TOOLS_FOR_RENT_PAGE, GAEventAction.PAGE_VIEWED);
    })

    return (
        <MainComponentContainer>
            <div>
                <Head>

                </Head>

                <CustomSlider />

                {/* first cards bar with all main categories */}
                <CardsBar cardsToShow={fetchedData.categoriesList} isMainCategoriesDisplay></CardsBar>

                {fetchedData.categoriesList.map((category) => BakeToolsCardsForCategory(category))}

                <ArticlesViewer />
            </div>
        </MainComponentContainer>
    );
}

index.getInitialProps = async () => {
    //for test
    const res = await fetch("http://api.github.com/repos/zeit/next.js");
    const json = await res.json();
    return {
        fullName: json.full_name,
    }
};

export default index;

如何使用NextJS在服务器端渲染静态页面并做出反应

0 个答案: