显然,这个问题以前被问过,但答案对我没有帮助。
我的问题是服务器端渲染的时间太长了,从一个页面导航到另一个页面需要2.5-4秒,有时需要10秒。所有我做的是2查询数据库使用棱镜和一些简单的必要的功能。
我知道图像是影响性能的一个重要因素,但尽管使用了cdn并最大限度地优化了图像,这仍然不够。
我的问题是,在一个真实的大网站中,如果nextjs不能处理我可怜的网站,它将如何处理繁重的请求和大量的数据?.
请记住,这是我第一个使用nextjs的应用程序,我肯定我错过了一些东西。
这是网站的链接,你可以自己浏览一下,我添加了一个进度条,希望能让它不那么痛苦,但旧的“平滑React导航”仍然没有出现。
https://elvito-property.netlify.app/
链接到repo
https://github.com/VitoMedlej/elvito-property
当然,这里是我使用getServerSideProps获取数据的完整代码
` const isCategoryValid =(categoryQuery:string)=> { let categories = [“公寓”,“别墅”,“商业”,“土地”,“小屋”]
if (categories.includes(categoryQuery)) {
return categoryQuery
}
return undefined
}const isPurposeValid = (purposeQuery : string) => { if (purposeQuery === 'for-sale' || purposeQuery === 'for-rent') { return purposeQuery } return undefined }
const GetTotalCount = cnc(type?:string,purpose?:string)=> { const prisma = new PrismaClient()
const totalCount = await prisma
.properties
.count({
where: {
type,
purpose
}
})
return totalCount || 0
}exportforc函数getServerSideProps({query}:任何){
const select = {
id: true,
type: true,
bathrooms: true,
rooms: true,
price: true,
propertySize: true,
images: true,
title: true,
location: true,
purpose: true,
currency: true,
description: true
}
const itemsPerPage = 9
const prisma = new PrismaClient()
const purpose = isPurposeValid(`${query.purpose}`)
const type = isCategoryValid(`${query.category}`)
try {
const currentPage = query.page || 0;
const totalCount = await GetTotalCount(type, purpose) || 0
const totalPages = Math.round(totalCount / itemsPerPage)
let skip = (currentPage * itemsPerPage) || undefined
if (currentPage > totalPages || currentPage < 0)
skip = 0
let data : any = await prisma
.properties
.findMany({
skip,
take: itemsPerPage,
where: {
purpose,
type
},
select
})
// just returning the first image because that's all I need, wish prisma provided
// an easier way to do this but oh well
data.forEach((item : any) => {
item.images
? item.images = item.images[0]
: ''
})
// just a way to deal with bigints
bigInt_To_Number(data)
return {
props: {
results: data,
totalCount
}
}
} catch (err) {
console.log('err 1.4: ', err);
return {props: {}}
} finally {
await prisma.$disconnect()
}
{\fnSimHei\bord1\shad1\pos(200,288)}
2条答案
按热度按时间izkcnapc1#
我唯一能建议的是找到一种方法来切换到获取静态props或获取静态路径
我也希望这次讨论能帮助你找到你的首选解决方案
https://github.com/vercel/next.js/discussions/32243
umuewwlo2#
在Next.js中,使用服务器端渲染(SSR)在应用程序中导航有时会很慢,即使在版本12中也是如此。不过,这个问题似乎已经在Next.js版本13中得到了解决和改进。
如果您在Next.js 12或更早版本中遇到缓慢的SSR导航,请考虑尝试以下方法以潜在地提高性能:
您可以使用
getInitialProps
来代替getServerSideProps
来满足数据获取需求。这一变化可能会导致导航速度的显着提高。下面是一个如何使用
getInitialProps
的示例:通过进行此切换,您可能会注意到导航性能的显著提升,特别是在Next.js中处理SSR时。但是,请记住,确切的影响可能会因您的特定用例和应用程序要求而异。
请确保您使用的是Next.js版本13或更高版本,以充分利用这些版本中的任何性能改进和增强。