search

andyrichardson / tipple

A lightweight dependency-free library for fetching data over REST with React.
https://www.npmjs.com/package/tipple
MIT License
131 stars 5 forks source link

Add support for SSR #21

Open andyrichardson opened 5 years ago

swolidity commented 4 years ago

Hey Andy, thanks for this really cool library! Do you have any idea how you're thinking about implementing SSR support for Tipple right now? I've read Suspense will eventually allow for SSR hooks but I was wondering if there might be a workaround for now. Specifically, I would like to use this with Next.js. I was thinking it might be possible to inject Tipple with initial data fetched in Next's getInitialProps()? It would be great to know what you think of that idea!

andyrichardson commented 4 years ago

Hey @andyk2177!

The way we've currently been doing things in urql has been through the use of state mutation on the server-side render. I'm happy to take this approach or an alternate one if you have suggestions.

If you're able to create a PR / example with a getInitialProps implementation, I'll take a look some time this week :+1:

swolidity commented 4 years ago

Oh wow useImmediateState looks interesting! So we still need to await the fetch requests somewhere though right?

andyrichardson commented 4 years ago

@andyk2177 yup! There's two ways I'm thinking we can approach this:

With suspense

With persistence caching

Any objections to either?

swolidity commented 4 years ago

@andyk2177 no objections from me on either one. Does next.js really support SSR suspense right now though or is that in the pipeline?

andyrichardson commented 4 years ago

@andyk2177 v0.6.0 has just been pushed with support for persistence/initial cache.

Let me know how you get along with SSR!

swolidity commented 4 years ago

@andyrichardson so I'm trying to think of the best way to do this with Next.js. I think I would have to create the<TippleProvider> on each page and fetch any data I want in getInitialProps and pass the fetched data into the initialCache? Does that sound about right or am I way off here? Would be nice if we only had to create <TippleProvider> in one location like pages/_app.js.

swolidity commented 4 years ago

I'm starting to think what I want is basically Apollo's getDataFromTree to walk the component tree, await all fetch requests generated by Tipple, and then initialize the cache with the fetched data server side. I wonder how hard that would be to implement or if there is an easier way...

andyrichardson commented 4 years ago

@andyk2177 No worries, I'll spend some time over the weekend getting a next.js implementation set up.

swolidity commented 4 years ago

@andyrichardson you're amazing! Sorry I'm making more work for you here. Am I just thinking about this all wrong? I feel like I might be missing something...

andyrichardson commented 4 years ago

@andyk2177 nope what you're asking for makes total sense!

The 0.6.0 addition allows for SSR via injection but I'm unsure if the client fetching data will work with next.js. Once I get around to adding suspense support it should be much easier.

swolidity commented 4 years ago

Ok great! Yeah, I'm really excited about Suspense! Seems like it will make things much easier.