Search code examples
reactjsnext.jsserver-side-rendering

Catchall Routes that mix SSG and SSR

So I am working on a project where the base url caters to a few different kind of pages. Most of these pages are static so I have been using getStaticPaths and getStaticProps to generate the static pages and serve them.

There are some pages that are also dynamically queries for which I have been using a simple [base].js file which uses the above getStaticPaths and getStaticProps and on fallback, makes a SWR query to fetch data and render on the client side.

So the basic idea is to

  • check static file exists and render
  • if no static file exists then make a fetch request and see if data is returned and render

I was wondering if there's a way to use getServerSideProps in this mix too so that my dynamic queries can be rendered on server side and then SWR can be used only for incremental purposes.

Right now as I add getServerSideProps to the same base file, I end up with You can not use getStaticProps or getStaticPaths with getServerSideProps. To use SSG, please remove getServerSideProps

Is it impossible in next to use SSG and SWR together, or is there a workaround to this?

Solution

  • Closest thing you can get with Next.js is Incremental Static Regeneration.

    get the benefits of static (always fast, always online, globally replicated), but with excellent support for dynamic data

    Not sure if it entirely fits your requirements.