How to optimize data loading for ElectricCollection in Next.js SSR

[sudoskys]

record3.webm

I observed that if I perform an optimistic update and then refresh the page, the UI will experience some mutations. Is this normal?

---

In the picture, I updated all the conversations one by one. Since the UI is sorted by update time, they are sorted by the last modified time.

My question is that after I perform the operation, the updated shape does not seem to be cached on the browser in time.

---

(The loading delay in the video is because Collection will report a 500 error on Next.js Server, so I disabled its SSR)

[gruckion]

You will need to provide code if you want help with this, a github repo that allows us to reproduce the issue.

[sudoskys]

This is simple. Since createCollection doesn't have client-side stored information, it will interrupt Next.js server-side rendering.
So I put all components using tanstack/db on the client and call them dynamically.