Next.js Discord

Discord Forum

Next js app router loads page after 2-3 seconds of clicking

Unanswered
wWHYSOSERIOUSs posted this in #help-forum
Open in Discord
wWHYSOSERIOUSsOP
I'm using next js app router
Where my page is async 
export default async Page() {
  const data = await fetchMyPageData()
}


Here at the top the the page I'm making some request 2-3 request that give me some dafa and I pass it down the server components

Some of the components require same data

20 Replies

Jboncz
Are you in dev mode? Its probably just taking a second to build the page.
If you navigate away and back to the page is it quick then?
Cimarrón Uruguayo
yeah its dev mode
surely
@wWHYSOSERIOUSs try doing the same thing after you run npm build or yarn build or pnpm build
whatever you use to run ur project
@Cimarrón Uruguayo yeah its dev mode
wWHYSOSERIOUSsOP
Nono it's production
Maybe I'm fetching like 3 request at the starting of the page
Jboncz
Are you available to troubleshoot now? I don’t wanna start trying to help and not get responses lol no shade serious question
wWHYSOSERIOUSsOP
It's off today here, I'll troubleshooting it in a while

Will post if I find anything, got a reddit post regarding this

There the post author did something with revalidate
Jboncz
You should had a suspense boundary to see if it’s legit just taking that long to load the data
Errr loading.tsx
wWHYSOSERIOUSsOP
Yes correct
Will add them
wWHYSOSERIOUSsOP
ok so i shifted the request that i had at the beginning of the page tp thier individual component
all these components are async rsc
i attached suspense also outside these rsc

and a loading.tsx right next to this page


i open some other page in new tab and then i use Link to navigate to this page where the slow loading issue is than

i still see 3-4 seconds loading page then my suspense loadings

what i was expecting was a my suspense boundary to trigger (it should send a shell aka teh fallback)

and everyuthing should be very quick but it was not
wWHYSOSERIOUSsOP
the main issue is

navigating to this page takes 4-5 seconds
even after the above changes
wWHYSOSERIOUSsOP
export default async function Portfolio() {
  const {
    allClosedTrades,
    totalTradeCount,
    openOrders,
    liveTrade,
    fundBalance,
  } = await fetchPortfolioData();
  ....
  ....

  down i have some server and some client componenrs consuming this data that i fetch up above
the problem is even if i shift data fetching to each server component itself
the page still takes time to load