Obviously this question has been asked before but the answers fail to help me.
My problem is server side rendering takes way too long, Navigating from page to page takes like 2.5-4 and sometimes 10 seconds. All I do is 2 queries to the database using prisma and few simple necessary functions.
Im aware that images are a big factor in performance, but despite using a cdn and optimizing images to the maximum it still isn't enough.
My question is how will nextjs handle heavy requests and lots of data in a real big website if it can't handle my pathetic website?.
Please keep in mind that this is my first app using nextjs and im certain that im missing something out.
Here's the link to the site, navigate around and see for yourself, I've added a progress bar in hopes of making it less painful but still the old "smooth react navigation" isn't there.
https://elvito-property.netlify.app/
Link to the repo
https://github.com/VitoMedlej/elvito-property
And ofcourse here is the full code I use to fetch the data using getServerSideProps
` const isCategoryValid = (categoryQuery : string) => { let categories = ["apartment", "villa", "comercial", "land", "chalet"]
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, purpose?: 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()
}
} `
