Different results for server and client pages with dynamic data

[corrideat]

❓Question

I'm developing a new application, and have been evaluating Razzle. Everything looks so far, but I'm trying to get around my head about the best way to do static rendering.

Let's say that I'm implementing an app for the Swagger Petstore.

In regular client-side React, I could have a component (let's call it Inventory) that makes a client side request (fetch / XmlHttpRequest) to /pet/inventory and render that.

However, I'd like to do static rendering, so that when a user visits /app/pet/inventory either of these happen:

1. If the user came through direct navigation (i.e., fresh page load), the server retrieves the appropriate list and servers a pre-rendered list to the user as HTML (inside the Inventory component).
2. If the user came through an already loaded page, retrieve the list client side through an API call and render that (inside the Inventory component).

With next.js, one could do this with getServerSideProps, as explained in https://nextjs.org/docs/basic-features/data-fetching.

I realise that Razzle is more barebones in this sense as it's not tied to any one framework (which I like very much). However, I struggle to see a good and clean solution. I've considered React Context (width two contexts for SSR and CSR) and writing a Webpack plugin.

Thanks,

[fivethreeo]

The best way of doing this is to have some kind of server-side cache in a provider that stores any results from the fetches you do server-side. Then put the cached data in a script-tag. i.e window.SSRCACHE. Then have client-side cache in a provider that reads that window variable. If there is no cache value do a client-side fetch. If there is a value, use the cached data and invalidate the cache.

Now, implementering this is non-trivial. There is react-query and if you use graphql there is urql that has a normalized cache exchange.

I am working on a example of using prisma, graphql-codegen and apollo-server that uses urql.

[fivethreeo]

https://github.com/fivethreeo/razzle-prisma-graphqlcodegen-urql-formik-jwt