让你不再迷失的 Next.js 路由守卫指南

2024-02-11 06:39:11

导言

在当今快节奏的网络世界中，用户期望网站响应迅速且无缝。然而，路由切换时的页面加载延迟可能会破坏这种体验，导致沮丧和跳出率增加。Next.js 路由守卫提供了解决此问题的强大机制。在本指南中，我们将深入探讨路由守卫，了解如何使用它们在 Next.js 中实现全局加载效果。

认识路由守卫

路由守卫本质上是函数，它们允许我们在路由切换时执行自定义逻辑。Next.js 提供了两种类型的路由守卫：

getServerSideProps()： 在服务器端运行，用于数据获取和重定向。
getInitialProps()： 在客户端和服务器端都运行，用于加载组件数据。

全局加载效果

让我们专注于使用 getServerSideProps() 实现全局加载效果。在该函数中，我们可以返回一个特殊的 prop getServerSideProps：{ props: { isLoading: true } }。这将指示 Next.js 在目标路由加载完成之前显示加载状态。

实施示例

// pages/global-loading.js
export async function getServerSideProps() {
  // 假设我们正在从 API 获取数据
  const data = await fetch('/api/data').then(res => res.json());

  if (!data) {
    return { props: { isLoading: true } };
  }

  return {
    props: {
      isLoading: false,
      data
    }
  };
}

// 页面组件
export default function GlobalLoading({ isLoading, data }) {
  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>{data}</div>;
}