【问题标题】：Problem with time when I navigate in my nextjs project我在 nextjs 项目中导航时出现时间问题
【发布时间】：2021-06-01 21:24:29
【问题描述】：

我对我的 nextjs 项目有疑问。

我在标题调用/files中添加了一个新路由，我不知道为什么我想回家时需要很长时间才能加载数据。

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

带有数据的端点有点慢，但我相信如果我在我的pages/indexgetInitialProps 中调用它，它在开始时加载到服务器中的数据，我是对的吗？如果我是对的，为什么要花这么长时间再次向我展示数据？

这是我的代码！

标题

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;

助手/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};
}

【问题讨论】：

您是否尝试过单击 Chrome 中的网络选项卡来查看加载时间如此之长？此外，在控制台中看到两个响应也是一个问题。您可能有一些代码需要查看以解决此问题。
是的，我检查了网络，getDataLatestEvents 的端点是问题...无论如何我不知道 console.log 问题...我已经检查过但我找不到问题...

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

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

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

编辑

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

【讨论】：

在next build 和next start 之后仍然延迟大约1 秒。可能是服务器问题？
[getInitialProps][1] 在页面中启用服务器端呈现。如果您不需要在每次发送请求或重新加载页面时获取任何数据，请改用getStaticProps。