数据请求

Next.js中一共有四种常见的请求数据的方法。

• 使用fetch直接在服务端请求数据。
• 使用第三方库在服务端请求数据。
• 使用Route Handler在客户端请求数据。
• 使用第三方库在客户端请求数据。

服务端请求数据

fetch

Next.js扩展了fetch方法，提供了可以对数据进行缓存和重新验证的接口。

一个简单的例子

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

如果需要进行缓存和数据重新验证，可以添加第二个参数。

const res = await fetch('url', { cache: 'force-cache' })
// 3600ms后清除缓存数据，重新请求接口
const revalidate = await fetch('url', { next: { revalidate: 3600 } })

使用第三方工具

通常在使用数据库或者ORM工具的时候会使用。如果数据存储在数据库，则需要在内部进行数据库相关操作。

一个请求用户数据信息的例子：

import { getServerSession } from 'next-auth'

import { authOptions } from '@/pages/api/auth/[...nextauth]'
import prisma from '@/app/libs/prismadb'

export async function getSession() {
	return await getServerSession(authOptions)
}

export default async function getCurrentUser() {
	try {
		const session = await getSession()

		if (!session?.user?.email) {
			return null
		}

		const currentUser = await prisma.user.findUnique({
			where: {
				email: session.user.email as string
			}
		})

		if (!currentUser) return null

		return {
			...currentUser,
			createdAt: currentUser.createdAt.toISOString(),
			updatedAt: currentUser.updatedAt.toISOString(),
			emailVerified: currentUser.emailVerified?.toISOString() || null
		}
	} catch (error: any) {
		return null
	}
}

客户端

Route Handler

在路由章节已经进行过详细的说明。主要就是在api目录下编写route.js文件来进行请求的处理。比如请求/api/item接口，该请求由/app/api/item/route.js来进行处理。route.js内部 可以获取请求体携带的信息，也可以通过ORM（例如Prisma）进行数据的增删改查并反映到数据库中。

更加详细的信息可以查看文档 (opens new window)

使用第三方库

官方文档中主要提到了两个第三方库。SWR (opens new window)和React Query (opens new window)