Nextjs导航太慢，特别是SSR

Question

显然这个问题以前有人问过，但答案对我没有帮助。

我的问题是服务器端渲染需要太长时间，从一个页面导航到另一个页面需要2.5-4秒，有时甚至需要10秒。我所做的只是使用prism和一些简单的必要函数对数据库进行2次查询。

我知道图像是性能的一个重要因素，但是尽管使用cdn并最大限度地优化图像，这仍然是不够的。

我的问题是，如果nextjs不能处理我可怜的网站，它将如何处理一个真正的大网站中的繁重请求和大量数据?

请记住，这是我使用nextjs的第一个应用程序，我确定我错过了一些东西。

这是网站的链接，你可以自己浏览一下，我添加了一个进度条，希望能让它不那么痛苦，但仍然是旧的"流畅的反应导航"。没有。

https://elvito-property.netlify.app/

链接到repo

https://github.com/VitoMedlej/elvito-property

当然这里是我使用getServerSideProps获取数据的完整代码

'const isCategoryValid = (categoryQuery: string) =>｛出租类别=[公寓";别墅";商业";土地";庄园"]

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 = async(type) ?字符串，目的?: string) =>｛const prisma = new PrismaClient()

const totalCount = await prisma
.properties
.count({
where: {
type,
purpose
}
})
return totalCount || 0

} '

' export async function getServerSideProps({query}: any) {

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()
}

}'

Answer 1

我唯一能建议的是找到一种方法来切换到获取静态道具或获取静态路径

我也希望这次讨论也能帮助你找到适合你的首选解决方案

https://github.com/vercel/next.js/discussions/32243