Next.js 动态生成路由的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

Next.js 是一个基于 React 的 SSR 框架，提供了非常便捷的构建服务端渲染应用的方法，其中之一就是动态生成路由。在这篇文章中，我们将探讨 Next.js 动态生成路由的最佳实践。

为什么使用动态路由

动态路由，顾名思义，是在运行时生成路由。动态路由在实际应用中用途广泛，例如：

个性化页面的生成，例如用户页面
自动生成静态页面
搜索引擎爬虫优化，让爬虫更加友好地抓取页面
等等

相比于静态路由，在动态路由方案下，我们可以避免手动维护每一个路由，特别是在大型项目中这是相当困难的，也能够更快速地开发我们所需要的功能。

动态路由实现

在 Next.js 中，实现动态路由可以使用一个叫做 getStaticProps 的方法。getStaticProps 是 Next.js 提供的一个异步方法，主要用来异步获取组件所需要的数据，这个数据包括组件的 props。

我们可以通过 getStaticProps 中的 database/API 去获取数据，并通过 return 的方式将数据传递到该页面。这样在页面中我们就可以使用这些数据了。这里有一个简单的示例：

// javascriptcn.com 代码示例
// pages/posts/[id].jsx

export default function Post({ postData }) {
  return (
    <div>
      <h1>{postData.title}</h1>
      <p>{postData.content}</p>
    </div>
  )
}

export async function getStaticPaths() {
  const paths = [...Array(10).keys()].map((_, i) => ({
    params: {
      id: i.toString(),
    },
  }))
  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
  const postData = await res.json()

  return {
    props: {
      postData,
    },
  }
}

这个例子中，我们动态地创建了 10 个路由，每个路由都是 /posts/:id，id 是从 0 到 9。在 getStaticPaths 方法中，我们生成了这 10 个路径，然后通过 getStaticProps 提供的上下文中的参数 params，去从远程 API 加载数据，最后将这些数据解析为一个 postData 对象，通过 props 传递到了 Post 组件中，并使用它来进行渲染。

动态路由的最佳实践

要实现优秀的动态路由，需要遵守一些最佳实践。

1. 使用静态生成模式 (Static Generation)

使用静态生成模式可以增加性能，加快页面展示速度。静态生成模式就是在构建应用时生成静态 HTML 文件。一旦构建完成，路由就变得非常快速并且具有可缓存性。这个模式's fallback 是 true' 。添加fallback值来实现可选的启用。如果设置为 false，则与SSR模式等效，并对所有可能的参数对使用SSR来渲染页面。而如果开启这个值，那么在获得预先生成的页面之前，我们将看到一个加载器。

// javascriptcn.com 代码示例
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  return { paths, fallback: true }
}

2. 不要在同一页面上实现多个动态路由

这不仅会混淆代码，还会破坏应用程序的可维护性，并以丑陋的方式显示路由。相反，为每个唯一的路由创建单独的组件，这将使代码的可读性更强。我们应该遵循单一职责原则，保持每个页面的聚焦点。

3. 静态路由生成时间

因为在构建时静态页面被生成了，而每一个动态路由对应的静态文件都会在构建时生成。当路由的数量非常大的时候，这个时间也是巨大的，所以我们应该在这种情况下进行微小的调整。

我们可以使用依赖构建和增量构建功能。依赖构建意味着只有在您的代码中生成的页面上进行了更改时，Next.js 才会重新生成页面，这意味着更快的构建时间。增量构建会查找文件的更改并仅重新生成更改了的路由。这将进一步加快构建时间。

4. 缓存变化不频繁的静态路由

在一个 Next.js 应用程序中，在特定时间只存在一个页面的单个版本。为了缓存不经常更改的静态路由，我们可以使用缓存较高的max-age的请求头，这样就会不再去重新下载该路由页面。在更新该静态路由时，会在下一次请求该路由时进行更新。

// javascriptcn.com 代码示例
const MAX_AGE_SECONDS = 60 * 60 * 24 // 24 hours

export const getStaticProps = async () => {
  // ...
  return {
    props: {
      posts,
    },
    revalidate: MAX_AGE_SECONDS
  }
}

revalidate 是新的方法，用于设置多久页面应在客户端缓存后重新验证。可以使用数字或任意间隔字符串来设置缓存时间。如果我们通过 next/link 导航到缓存的路由，Next.js 将从缓存中快速恢复。

总结

动态路由是 Next.js 极其强大的特性之一，我们可以在运行时生成路由，避免手动维护每一个路由，提高应用程序的可维护性和开发效率。本文分享了 Next.js 中动态路由的实现和一些最佳实践，希望您能在工作中充分利用它们。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6542f4dc7d4982a6ebc9b995