next.js - 刷新时或导航到页面时获取数据有什么区别？

Question

所以，我有这个组件results.js，在这个组件中我从我们的后端服务器获取数据。

import { useRouter } from 'next/router';
import Navigation from '../../components/Navigation';

const Results = (props) => {
  return (
    <div>
      <Navigation />
      {console.log(props)}   
    </div>
  )

}


export const getServerSideProps = async (context) => {
  // Fetch all the id's
  const res = await fetch(`https://api.myapi.com/results`)
  const results = await res.json()
  return { props: { results } }
}

我有这个导航

import Link from 'next/link'

const Navigation = () => {
    return (
        <div>
            <Link as="/" href="/"><div>Homepage</div></Link>
            <Link as={`/results`} href={`/results`}><div>ResultsPage</div></Link>
        </div>
    )
}

export default Navigation;

我的问题现在来了：

为什么当我刷新时，它会拨打我的电话，但在网络开发人员控制台中看不到？

为什么在我的开发人员控制台中导航到页面时不是？

我刷新时的示例：

我使用导航时的示例：

标签： next.jsserver-side-rendering

Answer 1

因为在使用服务器端渲染时，当您第一次访问网站内的页面（或刷新当前页面）时提供的初始页面会在服务器上呈现，因此服务器正在为您发出该请求。但是，在初始页面加载后，应用程序的行为就像一个普通的 SPA，因此该页面的导航和呈现（包括向 API 发出请求）是在客户端上完成的。