Example with Next.js SSR?

[tyteen4a03]

Is there an example of using this package with Next.js's SSR?

[lostpebble]

Hi @tyteen4a03 . I'm happy to put one together. Is there like a Next.js playground somewhere I can put it on? Or should I just make a new github project example?

[tyteen4a03]

Next.js has a sample blog app: https://nextjs.org/learn/basics/create-nextjs-app

[lostpebble]

I've been trying to put together an example today - but Next.js SSR is not the easiest thing to do server customization stuff on.

You need to have some control over the server-side of things, to create the initial store provider and then be able to initialize whatever state you want per route. It seems Next.js allows you to run a getInitialProps on the App, and on each page route - but I don't see any way to actually pass the instance down, so we can't initialize custom state per route.

If you don't have any state to initialize on the server though, then of course its no problem and you can just make use of Pullstate client-side only. But I assume you want to do some per-page state initialization? Or want to make use of Async Actions and resolve the data fetching on the server before rendering?

I might have to look into creating a custom withPullstate() method that you can wrap each page with, but its not ideal. I would be much nicer if they just allowed you to pass state around inside the different getServerSideProps methods, starting from the parent App component.

[gusaiani]

Pullstate looks really great, congrats :)

Has anyone integrated Next.js and Pullstate?

[lostpebble]

Thanks @gusaiani :)

I'll try and take another shot at this soon, seeing how Next.js seems to be rather popular these days. Would be nice to have an easy solution for it.

[gusaiani]

Thank you @lostpebble.

We'll be very inclined to adopting Pullstate at http://www.getcircuit.com with Next!

[mlynch]

I'm using Pullstate with Next.js and it works great, except for Fast Refresh. After a fast refresh the store won't update. Trying to figure out what's going on but I posted a small repro over on a Next.js issue: vercel/next.js#13268 (comment)

[lostpebble]

Hi @mlynch - I've released 1.19.1 with some fixes to make the state selection compatible with the new "concurrent" and StrictMode React stuff. Please check it out, hopefully it solves the Fast Refresh issues.

[mlynch]

@lostpebble you legend! Works great, did not expect to wake up and see this. I love pullstate, thanks so much!

[lostpebble]

Hahah awesome! Glad to hear its all working, and cheers for the kind words! :)

Appreciate your share on Twitter the other day too - it really pumped up the exposure!

[mlynch]

Of course! I expect a lot more people to be using this in time. Also not sure if you saw my dev.to article, let me know if I got anything wrong: https://dev.to/ionic/pullstate-simple-hooks-based-state-management-for-react-5bc4

[lostpebble]

Oh jeeze, can't believe I forgot about the article! Yea, loved it- really nice and concise introduction in a great format. Also nice that you went into some of the gotchas of the mutations, something actually overlooked in the pullstate docs and should be mentioned. Really appreciate you putting it together, and on a personal level its a great feeling to see someone write about your project (especially someone who knows their way around this industry)- so thanks for that :)

[xeoneux]

Hi guys, I'm trying to make pullstate (love the library!) work with Next.js, here's the example PR: vercel/next.js#20078

The only issue is the warning that I'm getting in the console: Pullstate: createPullstate() - Should not be creating the core Pullstate class more than once! In order to re-use pull state, you need to call instantiate() on your already created object.

I'm not sure how to go about solving it. Any ideas?

[lostpebble]

Hi @xeoneux , and thanks glad you're enjoying the library :)

Also, thanks for trying to get an example put together with Next.js!

Are you still having the issues? I tried your PR example in the Next.js repo- and all seemed fine, except for a missing import of:

import { PullstateCore } from '../stores'

in ssg.js

After that, it built and ran without any issue. The dev version worked first time without issue as well. Didn't notice any error messages in the console.

Let me know if this is still an issue and I'll dive into it deeper.