0

I'm seeing an issue with fetching page data which comprises of 12+ components, each having a separate API endpoint to fetch the data from.

I was using this approach earlier but page performance seems to be taking a hit when making 12 requests like this -

    const [getHeaderRes, getFooterRes] = await Promise.allSettled([
      getHeader(),
      getFooter(),
    ])

Do we continue to make requests like this or there is a better way ?

Maybe take API requests to component itself with good old useEffect ? But doesn't that nullifies the benefits of SSR ?

Mic Scofield
  • 11
  • 3
  • 1
    You've discovered the trade-off of SSR - lots or pre-render work? no way to let user know other than a spinner in the layout component. Alternative, as you recognize, is to show the page skeleton and render components as they have data available. Think of this as a very large image that you must wait to download completely before rendering, vs. a progressively loaded image that shows up gradually over time. Which UX do you want to provide to your end user. – Randy Casburn Mar 09 '23 at 01:26
  • @RandyCasburn Thanks for the response. I wish to have the content being served from the server for web crawlers to access it. I guess the page load time has to take the hit then right ? – Mic Scofield Mar 09 '23 at 01:50
  • yes - if SEO is the driving concern, SSR is the best solution. – Randy Casburn Mar 09 '23 at 03:33

0 Answers0