如何解决为什么我的页面加载时间超过 1.5 秒,而 next.js 中的数据很少?
上下文:
我现在正在构建一个 reddit 克隆。我正在获取 getServerSideProps
中 subreddit 帖子的列表。此函数对我的 Prisma 数据库(托管在 Amazon AWS - PostgreSQL 上)进行 api 调用。
这是工作的现场示例(只需在下拉列表中选择一个 subreddit)。 Next.js 有一些帖子,learnprogramming 还没有:https://reddit-clone-teal.vercel.app/
这里是api:
const handler = async (req: NextApiRequest,res: NextApiResponse) => {
try {
const sub = await prisma.subreddit.findUnique({
where: { name: String(req.query.name) },include: {
posts: {
include: { subreddit: true,user: true },},joinedUsers: true
},});
console.log("here is the sub",sub);
if (!sub) {
return res.status(500).json({ error: "No sub was found with this name" });
}
res.json(sub);
} catch (e) {
res.json(e);
}
};
所以没什么太疯狂的吧(总共 3 个帖子)?还是我在通话中包含了太多内容? 无论如何,当我转换到 subreddit 并且此功能运行时(数据库中目前有 3 个虚拟帖子),页面加载后有时需要 1.5 - 2 秒。 有了这么少的数据,加载时间应该会少得多,对吗?
我正在使用 swr
,这是 subreddit 页面的样子:
首先是 getServerSideProps
函数:
export async function getServerSideProps(ctx) {
const url = `${process.env.NEXTAUTH_URL}/api/subreddit/findSubreddit?name=${ctx.query.sub}`;
const fullSub = await fetchData(url);
return {
props: {
fullSub,};
}
然后在页面上:
const { data: fullSub,error } = useSWR(
`/api/subreddit/findSubreddit?name=${sub}`,fetchData,{
initialData: props.fullSub,}
);
这是 Vercel Analytics 的屏幕截图:
它每次也有点加载它(从一个 subreddit 到另一个),尽管我用 swr
缓存它。我想我做错了什么。它比从 subreddit A 到 subreddit B 的第一次转换要快一些,但是当没有任何变化时,它不应该是即时的吗?这不是使用 swr
的优势还是我又错过了什么? ?
你能看出来吗?任何想法为什么这可能会长时间加载而不是缓存?
到我的存储库的完整链接:https://github.com/SelfDevTV/reddit-clone
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。