Next.js 13/14(应用路由器)-在动态路由内缓存从服务器组件中获取的数据
我目前拥有的功能:
一个服务器组件,我可以从中获取一些数据,然后将其传递到客户端组件中。这两项操作都是在动态路由 (app/.../[username]) 中完成的,用户名也是获取数据的 POST 请求的一部分。
因此,基本上,用户输入用户名 ---> 为用户创建动态路由 ---> 在那里获取数据 --->组件根据数据使用 JSX 加载。
我想要的功能:
只需将获取的数据在用户的浏览器中缓存一段时间,这样,如果同一个用户请求与他们相关的数据,它将立即可用。
为什么这是一个问题:
根据 Next.js 文档:
Whether a route is cached or not at build time depends on whether it's statically or dynamically rendered. Static routes are cached by default, whereas dynamic routes are rendered at request time, and not cached.
所以据我所知,动态路由默认不会被缓存,而且我找不到让 Next.js 缓存它们的方法。另一方面,sessionStorage 在服务器组件中不可用。
有什么方法可以解决这个问题,或者我唯一的选择基本上是在客户端组件或后端缓存中进行获取?无论如何,在这种情况下使用前者真的没问题吗?我对 Next.js 很陌生,这是我的第一个项目,所以我完全基于文档,文档中说应该使用服务器组件进行获取。
动态路由默认不缓存。对于动态路由,使用 generate-static-params :
The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.
它类似于之前的
getStaticPaths
和
getStaticProps
。如果您要更新此路由,为了查看更新,您必须调用
import { revalidatePath } from "next/cache";
在函数或服务器操作中调用此方法
revalidatePath(`/user/${slug}`));