ReactFire with Next.js

[jhuleatt]

Hey there Next developers! We'd love to hear about how you use ReactFire with Next. In particular, we'd like to know:

• What works well?
• What could be improved in ReactFire to make it easier to use with Next.js?
• What doesn't work at all?

In addition, if you have built something with ReactFire + Next.js and are open to sharing a link to your project (the site itself and/or any open source code), we'd like to see that too!

[devth]

I use Next.js, but I ended up fully exporting it as a static site and only relying on client side rendering. Before I switched to pure client-side I was struggling with how to share the same data-fetching code (e.g. useFirestoreCollectionData) between server and client. Looking forward to other answers in this thread!

[jhuleatt]

Thanks @devth! Unfortunately right now the answer is that it isn't really possible to share data-fetching code between client and server 😞

[fabn]

Personally speaking I often use Next.js as replacement of create-react-app also with static sites because I like its routing, its project structure and I deploy lot of stuff on vercel and or docker (where next export is great).

• What could be improved in ReactFire to make it easier to use with Next.js?

I don't think there are blockers in using ReactFire with Next.js, the only issue is with server side Suspense but is a more generic next issue not related to ReactFire. I think that also with plain firebase it's a little bit hard to work on server side.

In my personal app (not sharable sorry since is an admin dashboard) I had to paginate data by myself using startAfter/endBefore + useReducer thus some kind of pagination helpers/hooks would be great, but again is not a Next.js specific issue.

Great library and I like how fast you support people. Thanks.

[jhuleatt]

Thanks for the detailed feedback @fabn!

I think that also with plain firebase it's a little bit hard to work on server side.

Definitely. You can get data with the admin SDK on the server, and then hydrate a ReactFire hook with that data on the client (with initialData). But definitely not ideal, and if you use the admin SDK you lose security rules, etc. It's something we know is a weak spot at the moment.

some kind of pagination helpers/hooks would be great

This sounds like a good feature request. Would you be up for opening an issue about this, and what kind of API you might like?

[fabn]

I'm not so good at api design, but I can share what I did for my project: https://gist.github.com/fabn/cac865a4da6e903d796eb7a13764855f

< UsersList/> is a presentational component that only renders current page and bind pagination actions.

This implementation is working but it has an issue when you get last page and total number of records divides page size, in that case last click on nextPage will load an empty dataset, but I don't know how to solve this issue without having access to total number of records or any kind of hasMore flag.

Hope this will be useful.

[jhuleatt]

Thanks, this is really helpful!

[conrado]

any recent changes that may make reactfire usage on server side easier?

[KaiSpencer]

Ive had some internal setup to make prefetching and passing in server fetched data to reactfire hooks on some of my projects a bit easier.
Ive made it into a library if anybody is interested, its very early and very much "how ive been doing things".

https://github.com/KaiSpencer/reactfire-ssr