我在我的项目中有多个getServerSideProps，我有一个显示页面的标题，我必须等待一个页面打开，一旦我点击它，因为我需要获取数据。一旦它们被获取，页面将被打开。
我用来向用户显示加载状态的一种方法是使用routeChangeStart，但是我偶然发现了一个问题，所以我不想使用这种情况。
如果我在一个页面上，数据正在获取，我想向用户显示一个旋转器或一些指示器，一旦数据被获取，我想停止指示器/旋转器。
正如您可能发现的那样，getServerSideProps在服务器上运行并且正在阻塞。获取请求需要在HTML发送给用户之前完成(即，页面被更改)。因此，如果你想显示一个加载指示器，你需要将获取请求移动到客户端。
例如，如果您的页面可能具有以下基本结构:
export default function Page({ data }) {
return <div>{data.name}</div>
}
export async function getServerSideProps() {
const response = await fetch('https://example.com/api')
const data = await response.json()
return {
props: { data },
}
}
const fetcher = url => fetch(url).then(res => res.json());
export default function Page() {
const { data } = useSWR('https://example.com/api', fetcher)
if (!data) return <LoadingSpinner />
return <div>{data.name}</div>
}
或者如果你不需要SWR，可以使用一个简单的取回请求:
export default function Page() {
const [data, setData] = useState()
useEffect(() => {
fetch('https://example.com/api')
.then(async(response) => {
const json = await response.json()
setData(json)
})
})
if (!data) return <LoadingSpinner />
return <div>{data.name}</div>
}
注:如果getServerSideProps中的初始获取请求使用了敏感信息(例如，API秘密凭据)，那么继续设置Next.js API路由来处理敏感部分，然后获取新的路由。
我刚才用的是routeChangeStart。
我不想使用它，因为router.push('/map')在pages/index中不起作用。但我通过创建一个新的组件放置路由器来解决这个问题。Push in useeffect and rendering a loader.
routeChangeStart在_app.js中，因为在index.js中router.push()不起作用-我测试了它
routechangstart -它是如何工作的?
当我们点击一个页面时，数据正在服务器上被获取，只有当数据被获取时，这个页面才会显示给我们。所以我们可以做下一件事，我们可以拦截路由变化。
当我们点击链接时(我们等待数据获取)，我们将routeChangeStart中的加载状态设置为true，如果我们移动到另一个页面(这意味着我们获取了数据)，我们调用routeChangeComplete，一旦我们移动到我们想要的路由，我们将加载状态设置为false。然后通过React Context