4

Hi I'm using NextJs and I am having an issue that when my app is hosted on my local server the pages that are pre loaded with getStaticProps are loading in a few ms but when hosted on Vercel it is taking 300ms to load. Does anyone have any suggestions on how I can get my pages to load quicker on Vercel?

My app is currently hosted at https://next-movie-delta.vercel.app/

and my github repo is https://github.com/lewisRotchell/next-movie

My getStaticPaths code looks like:

    export async function getStaticPaths() {
  const movies = await getMovies();

  const bigMovieArray = [
    ...movies[0].results,
    ...movies[1].results,
    ...movies[2].results,
  ];

  const paths = bigMovieArray.map((movie) => ({
    params: { movieId: movie.id.toString() },
  }));

  return {
    paths,
    fallback: "blocking",
  };
}

and the getMovies code looks like :

export async function getMovies() {
  const urls = [newReleasesUrl, popularMoviesUrl, topRatedMoviesUrl];

  try {
    let data = await Promise.all(
      urls.map((url) => fetch(url).then((response) => response.json()))
    ).catch((error) => console.log(error));
    return data;
  } catch (error) {
    console.log(error);
  }
}

Thanks :)

lewisr
  • 51
  • 2
  • Correct my if I'm wrong, but you seem to only statically pre-render the first 3 movies you get from `getMovies` in `getStaticPaths`. This means that for any other movie Next.js will generate the page on-demand the first time it's accessed, and having `fallback: "blocking"` means that the user will have to wait for the HTML to be generated (like in SSR), hence the 300ms load time the first time a page is accessed. – juliomalves Jul 10 '21 at 11:49
  • Hi, no the original movies constant is an array containing 3 objects and each of those 3 objects have a results property containing the movie data. If I use fallback: false, the app still works but is still slow whilst hosted on Vercel. On my local server after running "build", it is really quick. Thank you for your comment, it has made me realize that I need to write my logic a little bit neater! – lewisr Jul 11 '21 at 15:35

1 Answers1

1

I've managed to fix the problem! I changed the linking from withRouter to a tag from next/link and it has fixed my issue!

lewisr
  • 51
  • 2