Instant Page Navigation

[pooriamo]

I have a next.js project with quite a lot of pages. My homepage fetches some events' json and renders them (~ 10 cards), all fetched client-side.

I have this annoying problem: When I navigate through next/link from homepage to another page, say "profile.js" page, It's almost fast and OK. But when I click on home link, it gets a little stuck and takes some time to render the page.

First it hangs (about 2 seconds), Then it starts showing the loading, then it shows the page.
I can somehow manage this by clearing the state of redux on homepage's unmount. But that's not what I want. Because I really want the "App-like" experience.

How can I achieve this?

[wong2]

Is your homepage fetching those json every time it renders?

[pooriamo]

Yes. In

useEffect(() => {
  dispatch(getCards())
}, [])

[willemliu]

Then it starts showing the loading

What do you mean by this exactly? You mean there is a complete page refresh?

[pooriamo]

No. The loading I've put for the app. which is nprogress.