Fast ecommerce with optimistic UI and Next.js

[lalasmith]

Love your content Lee. Wrote this in another video as well, but i would love to see you make a full project (i've seen your previous lives and the apps you built, the pokemon one and the emojis). I would really love to see you go on about it and see you with all the best practices in action and see them applied, in something bigger than a simple/tutorial-ish app.
As always, love your content and thank you so much!

[aerotheory]

I do enjoy learning from your clips. I was hoping to learn about how optimistic UI works and not the implementation. Thanks for your videos over the years, they have been a great help.

[tomich]

would like to see what happens when the server action fails

[rdmPerson]

Nice video.
Love to see how you handle authorization in sever actions.

[dmyb]

Wow, awesome! Can we expect a video on creating a step-by-step commerce project using NextJS and Shopify pls ? 🙈

[anti-kafir-tr]

Hey @leerob, great demo. I was looking at the book inventory app you have shared in one of the comments. I was reading through the code but I had a small question. Your server functions are located inside lib/db folder but they are not using 'use server' directive anywhere. How does the code differentiate them from normal functions?

[abdallahmohamed]

Thanks alot lee for, would like to see this integrated with authentication and display conditions to user whether item is in his cart or not
Thanks again

[crosscodecross]

how would you handle someone clicking the button multiple times? wouldnt that lead to race conditions? since youre not waiting for the first update to finish

[joostschuur]

You'd still have to come up with your own way to track if the server actions fails and roll back the local optimistic update though, right?

[mohamedelnaggar]

How would the Proceed to Checkout button handle waiting for the actual cart data. Like if I am on Slow connection and I incremented an item in the cart 4 times and pressed the checkout button, how would it wait until the cart is actually updated to redirect.

[dawidwraga]

I've tried to implement it and imo Tanstack query useMutation variables are still way better than use optimistic hook

Why does the react team like to use numbered parameters/ return arrays instead of objects. Tanstack query code is still much easier to read and write imo

Also the ecosystem is so much more mature for Tanstack query. When I spent too long trying to adapt to all the react changes prematurely it damaged my productivity a lot.

So I'm using useQuery and calling server actions in the queryFn, instead of use(promise). If I need performance then I'm fetching in the parent passing initial data as prop.

What are the benefits of using use and useOptimistic? Is there anything wrong with using actions for data fetching in useQuery query fn?

[o_glethorpe]

If something fails after the call to shopfy succeeds, where is the call to shopfy to decrease the quantity?

[dat-ta]

Why session/local storage usage on cart items are not common in e-commerce sites? If it's a security concern, we can validate request at the server side.

[Proximity]

any idea when react 19 will be stable?

[haithammohasin]

What is the name of his vs code theme ‏‪1:45‬‏

[zulfikarahmad]

we can combine this with react query right?

[srenhyer]

@leerob you do realize It's not possible to debounce the increments using useOptimistic, so it's actually a terrible solution for incrementing the quantity... luckily it's not hard to do this manually with usestate and roll back on error.

[kumardeepanshu]

i have create a whole system in my current job to giving user instant feedback, i thought it is industry standard . LOL