刷新时获取数据或使用导航转到页面时获取数据有什么区别？

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;

我的问题来了：

为什么当我刷新时，它执行了我的调用，但在网络开发者控制台中却看不到它？

为什么在我的开发人员控制台中导航到该页面时却没有？

我刷新时的例子：

我使用导航时的例子：

Answer 1

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

刷新时获取数据或使用导航转到页面时获取数据有什么区别？

What's the difference between data fetching when I refresh or when going to the page with navigation?

server-side-rendering

next.js