aribouius
commented
4 years ago Hi @etiennecl,
I haven't used Next.js in a few years but I'm vaguely familiar with it. It doesn't look like this library is fully compatible with Next at the moment, but a few tweaks could get it there.
Per their docs, we would need to execute a request inside a getServerSideProps function .
import { ApiClient } from 'jsonapi-react'
export async function getServerSideProps(context) {
const client = new ApiClient({ ... })
const result = await client.fetch('todos')
return {
props: { result },
}
}From what I can tell you can't inject custom values into the context param, which means you'll need to create a new client instance for each getServerSideProps invocation. This is because the client instance currently stores each API response in its cache (regardless of cacheTime) to support client hydration, so creating an instance outside the method could result in a memory leak if you execute a large number of unique queries. This is an annoying limitation, but something I can probably provide a better solution for in the future (e.g. allowing the cache to be disabled when hydration is handled by a different library).
The next step would be setting up the component to handle the server-fetched data. This is actually where this library is currently missing a feature required for this to work.
import { useQuery } from 'jsonapi-react'
function Todos(props) {
const { data } = useQuery('todos', { initialData: props.result })
}The above example receives the server-fetched data as a prop, and passes it as initial data to the hook...the problem is useQuery doesn't currently recognize a initialData option. However it would be very easy to add :)
Let me know if this approach would work for you, I'd be happy to implement.
I can't say how many sites use this library in production, probably not many at this point. I started creating it for my company ~7 months ago as part of a big rewrite spanning 4 large apps. We are still a few weeks away from deploying them to prod, but so far it has endured a couple months of rigorous QA without problem. It is technically still in beta, but I don't foresee any major changes before we release the first major version.
etiennecl
Steffi3rd
farouk46015
This looks really great and I will definitely look a bit more into this. I was just wondering if you guys could provide an example using SSR with Next.js and if this library has been used in production?