CODEWITHSUNDEEP
next.js
Xodarap
Xodarap

Reputation: 11849

How to deal with slow loading pages in next js

I have a page which requires making an HTTP request to an API which might take more than 10 seconds to respond, and my host limits me to 10 second executions.

Is there a way that I can load a temporary page or something and then asynchronously load the rest of the data? I'm currently doing this:

export async function getServerSideProps({ params }) {
    const res = await fetch(`${process.env.API_USER}name=${params['name']}`)
    const videos = await res.json()
    const tag_res = await fetch(`${process.env.API_TAG}author=${params['name']}`)
    const tags = await tag_res.json()
    const name = params['name']
    return {
      props: { videos, tags, name }, // will be passed to the page component as props
    }
}

Upvotes: 2

Views: 2103

Answers (1)

nghiaht
nghiaht

Reputation: 795

Lets's move your HTTP request from getServerSideProps to client side (your components)

// Functional component
useEffect(() => {
  fetch(...)
}, [])

// Class-based component
componentDidMount() {
  fetch(...) 
}

If you still want to stick with getServerSideProps, maybe you have to upgrade/switch your host, or implement a proxy/wrapper server for handling your HTTP request and return response as fast as it can

Upvotes: 2

Related Questions