3

I'm trying to combine pre-rendering with getStaticProps() and client-side rendering with a regular userSwr() data fetch, and running into trouble.

Context:
I have a list of results that can span multiple pages, as well as be filtered by various attributes (like number of bedrooms, rent, etc). A paginated and filtered url might look like /listings?page=2&bedrooms=3

I want to pre-render the first page of unfiltered results by using getStaticProps(), so the initial pageload is fast. From there, I want a user to be able to make data calls from the client, using the useSwr() hook, for additional pages or filtered results.

Question:
What's the best way to combine these data fetching models? Everything I can find suggests pre-rendering every page of results, but I don't want to pre-render every permutation of pages and filters.

Current idea:
My current idea is to

  • Fetch the first page of data in getStaticProps and pass it in as a prop
  • Use a hook to fetch additional pages and filtered results from the client
  • Use something like this answer to keep the hook from running on the initial render.

Is there a better way to do only pre-render the first page, but client-side render after that?

Nimantha
  • 6,405
  • 6
  • 28
  • 69
avaleske
  • 1,793
  • 5
  • 16
  • 26

1 Answers1

0

I do something very similar to this. I don't block the initial run of the hook though. I want to get the SSG version up so users don't wait and it can get easily spidered for SEO. I don't want to encounter scenarios where a file that is on Page 1 of SSG is also on page 2 of queried data so a user hits next page and sees the same content. This is an extreme example, in general SSG on my sites is only 5-10 minutes behind updates to live data.

Darrel O'Pry
  • 1