编辑

Question

我对我的nextjs项目有疑问。

我在标头调用/files中添加了一条新路由，但我不知道为什么要返回家时需要花费很长时间来加载数据。

我console.log我的请求，并注意到两次调用我的API和INDEX，但是我不确定这是不是一个问题。

带有数据的端点有点慢，但是我相信，如果我在pages/index getInitialProps中调用它，那么一开始它是在服务器中加载的数据，对吗？如果我是对的，为什么又需要这么长时间才能再次显示数据？

这是我的代码！

标题

import React, { Component } from "react";

class Header extends Component {

  render() {
    return (
      <>
        <Navbar collapseOnSelect expand="lg" bg="light" variant="light">
            <Navbar.Toggle
              aria-controls="responsive-navbar-nav"
              style={{ outline: "0", display: 'none' }}
            />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="mr-auto"></Nav>
              <Nav>
                <Link href="/" passHref>
                  <Nav.Link>
                    Home
                  </Nav.Link>
                </Link>
                <Link href="/files" passHref>
                  <Nav.Link>
                    Files
                  </Nav.Link>
                </Link>
              </Nav>
            </Navbar.Collapse>
        </Navbar>
      </>
    );
  }
}

export default Header;

页面/索引

import React, { useState, useEffect } from "react";

/* Others */
import Error from "./_error";
import { getDataLatestEvents } from "../helper/api";

/* Components */
import MyComponent from "../components/MyComponent";

/* Bootstrap Components */
import Row from "react-bootstrap/Row";


const Index = props => {
  console.log('index*************')
  const [contentData, setData] = useState([]);
  const res = props.data.data.data;  

  useEffect(() => {
    setData(res);
  }, [props]);

  if (props.statusCode !== 200) {
    return <Error statusCode={props.statusCode} />;
  }

  return (
    <>
      <Row>
        <StyledContainer>
          <MyComponent
            data={contentData}
          />
        </StyledContainer>
      </Row>
    </>
  );
};

Index.getInitialProps = async ({ res }) => {
  try {
    let req = await getDataLatestEvents();
    return { data: req, statusCode: 200 };
  } catch (e) {
    res.statusCode = 503;
    console.log(`error /pages/index: ${e}`);
    return { data: null, statusCode: 503 };
  }
};

export default Index;

helper / api

import fetch from "isomorphic-unfetch";
const BASE_URL = "https://myendpoint/api";


export async function getDataLatestEvents() {
  const res = await fetch(`${BASE_URL}/eventos?latest`);
  let data = await res.json();
  console.log('API*************')
  return { data: data};
}

Answer 1

在使用 next dev（通过 yarn dev 或 npm dev）时经常会遇到这种延迟。这是因为在使用 yarn dev 时，每次请求时都会重建页面。因此，当您导航回索引页面时，Next.js 首先为您重建该页面，然后为其提供服务。这就是延迟的原因。

您不应该在生产中发现类似的延迟（使用 next build 然后使用 next start 时）

编辑

getInitialProps 启用页面中的服务器端呈现。如果您不需要在每次发送请求或重新加载页面时获取任何数据，请改用 getStaticProps。

在nextjs项目中导航时，时间问题

1 个答案:

编辑