Pages take exactly 1 minute to load
Answered
Chartreux posted this in #help-forum
ChartreuxOP
If anyone can help with this I'd really appreciate it.
I'm working on a Next.js 13 site hosted on Vercel (hobby plan atm), and it seems to have an issue. I can't easily share the code or staging link as it's confidential for a client, but will try to explain the issue.
Issue: First load of any page is very fast, ie: home or /things/thing, or /things/otherThing, but initially loading one of these, and then going to another page, takes exactly 1 minute to load. It seems like everything works fine, but sometimes loading fails on first try, and it waits 1 minute to try again.
simplified files:
simplified page.tsx code (similar for both)
util code
I'm working on a Next.js 13 site hosted on Vercel (hobby plan atm), and it seems to have an issue. I can't easily share the code or staging link as it's confidential for a client, but will try to explain the issue.
Issue: First load of any page is very fast, ie: home or /things/thing, or /things/otherThing, but initially loading one of these, and then going to another page, takes exactly 1 minute to load. It seems like everything works fine, but sometimes loading fails on first try, and it waits 1 minute to try again.
simplified files:
src
--app
----things
------[thing]
--------page.tsx (thing page)
--loading.tsx
--page.tsx (home page)simplified page.tsx code (similar for both)
export default async function Page() {
const filePath = '...' // assume real path
const contentData = await getContentData(filePath) // this works
return (
<div>
Things
</div>
)
}util code
export async function getContentData(filePath:string) {
try {
const jsonData = await fs.readFile(filePath, 'utf-8')
const data = JSON.parse(jsonData)
return data
} catch (error) {
console.error('Error reading JSON file:', error)
return error
}
}Answered by Chartreux
Yes this was almost certainly the issue. If it helps anyone else in future, there is a rate limit of 100 "Artifacts requests per minute (Free). … Duration: 60 seconds"
from this page:
https://vercel.com/docs/limits/overview#rate-limits
from this page:
https://vercel.com/docs/limits/overview#rate-limits
24 Replies
to naile donw the culprit, try to comment out the line below, see how it goes. (i mean i doubt the lines)
const jsonData = await fs.readFile(filePath, 'utf-8')
const data = JSON.parse(jsonData)ChartreuxOP
Thanks I will give it a go, but I assume that this is definitely the culprit.
The point is that these page files are server components, whatever the default kind is. The way it currently works is to get JSON data for the page contents from the file system, so the user is receiving these server side rendered pages with the content. So it will contain static content from the file system, with the ability to scale up to something else in future potentially.
I am new to Next.js and not currently aware of any other way to fetch my JSON data from the filesystem to pass down to the components in the page
The point is that these page files are server components, whatever the default kind is. The way it currently works is to get JSON data for the page contents from the file system, so the user is receiving these server side rendered pages with the content. So it will contain static content from the file system, with the ability to scale up to something else in future potentially.
I am new to Next.js and not currently aware of any other way to fetch my JSON data from the filesystem to pass down to the components in the page
I question whether it even needs to get this data from the file system asynchronously. I think I settled on that as it seemed to be the required approach. This decision may be affected by the fact that I am using dynamic routing to discern which JSON file to use.
ie. If the user goes to /things/thing1, the /public/contentData/page_thing1.json file is used
ie. If the user goes to /things/thing1, the /public/contentData/page_thing1.json file is used
tbh, I don't know why the time required to read the files is longer than expected in production.
As I know, the path of files will be different after the build, this may cause a problem after deploying your app to Vercel.
Platforms like Vercel ship your build to their servers and those files get distributed everywhere, I am not sure if they have a limit on reading files or something else.
To avoid unexpected behaviors, I currently recommend statically importing your JSON files, or statically building the pages with
Therefore, the files will only be read during the build. For complex usages, just go with a CMS like Sanity.
As I know, the path of files will be different after the build, this may cause a problem after deploying your app to Vercel.
Platforms like Vercel ship your build to their servers and those files get distributed everywhere, I am not sure if they have a limit on reading files or something else.
To avoid unexpected behaviors, I currently recommend statically importing your JSON files, or statically building the pages with
generateStaticParams.Therefore, the files will only be read during the build. For complex usages, just go with a CMS like Sanity.
ChartreuxOP
Thanks very much 😄 I will investigate these things
in general linux file system is sync so Node.js uses libuv thread pool to avoid main thread from choking. hobby plan has wall time cap 10 seconds so it is weird to run one minute.
as fuma says headless cms could be better
ChartreuxOP
It's really weird. I have made massive changes and it continues to take exactly 1 minute to load pages.
updated simplified files:
page.tsx code (home page:
updated simplified files:
src
--app
----contentData
------page_1960s.json
------page_1970s.json
------page_1980s.json
------page_1990s.json
------page_2000s.json
------page_2010s.json
------page_2020s.json
------page_home.json
----decades
------[decade]
--------page.tsx (thing page)
--loading.tsx
--page.tsx (home page)page.tsx code (home page:
import type { Metadata } from 'next'
import { siteData } from './siteData/siteData'
import contentData from './contentData/page_home.json'
import PageWrapper from './components/page/page.component'
import Banner from './components/banner/banner.component'
import ContentArea from './components/contentArea/contentArea.component'
import './home.scss';
const title = 'Home';
export const metadata: Metadata = {
title: ${title} | ${siteData.title}
}
export default function Home() {
const contentPieceData = contentData.contentPieces
return (
<PageWrapper title={title}>
<Banner
type='home'
h1MD='Title'
/>
{ contentPieceData ?
<ContentArea contentPieceData={contentPieceData} />
: null
}
</PageWrapper>
)
}Simplified decade page code:
import PageWrapper from '../../components/page/page.component'
import Banner from '../../components/banner/banner.component'
import ContentArea from '../../components/contentArea/contentArea.component'
import PagerNav from '../../components/pagerNav/pagerNav.component'
import contentData_1960s from '../../contentData/page_1960s.json'
import contentData_1970s from '../../contentData/page_1970s.json'
import contentData_1980s from '../../contentData/page_1980s.json'
import contentData_1990s from '../../contentData/page_1990s.json'
import contentData_2000s from '../../contentData/page_2000s.json'
import contentData_2010s from '../../contentData/page_2010s.json'
import contentData_2020s from '../../contentData/page_2020s.json'
type Params = {
params: {
decade: string
}
}
export default function Page({ params: {decade}}: Params) {
const title = decade
if (isDecadeAllowed( decade)) { // assume true
// GET CONTENT DATA
const contentDataByDecade:any = {
'1960s': contentData_1960s,
'1970s': contentData_1970s,
'1980s': contentData_1980s,
'1990s': contentData_1990s,
'2000s': contentData_2000s,
'2010s': contentData_2010s,
'2020s': contentData_2020s,
};
const dataToUse = contentDataByDecade[decade];
const contentPieceData = dataToUse.contentPieces
return (
<>
{ contentPieceData ?
<ContentArea contentPieceData={contentPieceData} />
: <>Could not load content</>
}
</>
)
} else {
return (
<>Error 404</>
)
}
}Maybe I should seek support from Vercel about hobby plans
Maybe statically render your page with
generateStaticParams?This can improve the speed a lot I believe
ChartreuxOP
I will look into that thanks. It seems that the same thing happens even when I use no JSON and no content. Maybe the problem is the Vercel server
I think I'm hitting a rate limit on artefact requests per minute
you might want to upgrade plan. maybe there would be some limitations that aren’t mentioned publicly.
ChartreuxOP
Yes this was almost certainly the issue. If it helps anyone else in future, there is a rate limit of 100 "Artifacts requests per minute (Free). … Duration: 60 seconds"
from this page:
https://vercel.com/docs/limits/overview#rate-limits
from this page:
https://vercel.com/docs/limits/overview#rate-limits
Answer
year. ur client should spend $20 monthly in the first place. haha.
ChartreuxOP
Ah yeah for sure, but I don't want to invest in that infrastructure in the first place if there is some bigger issue
Vercel hobby isn’t really feasible for business
Besides the fact that you’re violating the terms of service
If you’re using it for businesses
Without the pro plan you’ll find a lot of things you want to do on vercel won’t work due to the 10s runtime
Plus with the lambda cold starts that time is even less
ChartreuxOP
Good to know, thanks. My general plan is to do initial build on the hobby plan for free, before moving to Pro shortly before production. This gives the flexibility to move to other solutions during development if there are issues (first time using Next.js for a production site).
Although, seems like I can use Netlify instead for free (with pay as you go for increased traffic)
Although, seems like I can use Netlify instead for free (with pay as you go for increased traffic)