For the e2e locators specifically, can you use something like playwright's getByRole? Those automatically filter by visibility (and therefore are also robust to other UI patterns like tabbed navs or disclosures/accordions).
We're discussing an opt-out since especially for existing code it can cause quite a few issues. I wrote more about the reason behind the change here if you're interested: github.com/vercel/next....
Same, but a few years ago I moved to either trap bar (which doesn't go as far down) or rack pulls, and haven't had issues since. Have you tried either?
Oh man Jon Hopkins, what a throwback. Did you ever get into Trifonic? www.youtube.com/watch?v=UA3W...
i wrote about my new hobby project overreacted.io/introducing-...
Been working on a new microsite to teach Next.js patterns, and I just published a new one:
"Sharing data with Client Components"
See how to use promises to keep your page unblocked so it can be rendered (or prerendered) as early as possible.
Enjoy!
next-16-recipes.vercel.app/sharing-data...
Absolutely. Already had an idea that seb showed me, using a server component for saved messages and a client component for an optimistic message. The optimistic state is not just data itβs a whole component. Would be so cool to see it in this playground.
Basically I've seen a lot of people not understand that you can write your own client functions when using the action prop. Think it'd be good to show it off more.
action={async (formData) => {
const message = await greet(formData.get('name'))
setMessage(message)
})
Btw, I really hate that uAS's reducer shape contaminates server actions with prevState first arg. I kinda think examples like this should show an inline client function that calls setState with the response, before jumping to uAS. Similar to how you'd useState before useReducer. Wdyt?
"Ahh... look at that. The response is <Timer>. So <ColorTimer> gets rendered, the RSC tree melts away, and we return <Timer> with a new prop. Makes perfect sense."
This is so good man. Could do a lot to demystify RSCs and Server Actions.
I love this one. "Ok so I'm calling a server action that returns <ColorTimer>... wtf is happening?"
Agree with you that flashing skeletons can be a very annoying UX, but the alternative is not being able to cache the initial UI, and Next evaluates the tradeoff in favor of speed here by default.
Totally fine to wrap body in Suspense and generate the full response at request time though.
Added some thoughts to your issue.
For this one, it's less about it being async and more about it being IO. IO isn't cachable. That's why even sync APIs like Math.random or new Date() trigger the warning. The model wants you to keep your IO separate so that it knows what can be cached.
revalidateTag (the new form, with the second arg) allows the next read to be stale, then triggers a background rerender.
But the way the team intends it to be thought of is as "updating the UI". It's a "pull" of the freshest data in the context of a mutation that the current session kicked off. So I read it more like, "update the UI for this tag".
Right, but updateTag basically triggers a read. So in a Server Action, you get the mutation + fresh RSC render in the same round trip.
The name updateTag was a bit strange to me at first, because as you say it's not really "updating the tag"...
Basically refresh() is as if you hit ο£Ώ+R, but we can send the updated payload in the same round-trip as your mutation. In the past folks used revalidatePath('/') for this but that was overloaded & had the additional behavior of expiring caches.
Yes exactly π updateTag is for updating "tagged cached data" (i.e. data that's been "use cache"'d as well as cacheTag'd).
refresh() is for rerendering the RSC tree. So any dynamic data will be refetched (but any cached data that isn't expired won't be).
updateTag is for updating cached data, but if you're just mutating and want the dynamic data on the page to update refresh is what you want
Yep understood + agree. Working on a canonical tutorial.
Server-side version of refresh is new, previously folks were using revalidatePath() to accomplish something similar but now that we have it it's the right way to refresh dynamic RSCs. Basically makes your UI look as if you ο£Ώ+R.
The reason I'd enable cacheComponents even if you're not using "use cache" is because it enables other behaviors like dynamic-by-default, which make Next overall easier + more predictable to work with. For new apps I would think of it as the default mode of Next 16.
I would enable cacheComponents in next.config.ts, and just build your app as a dynamic/uncached app to start (i.e. don't worry about "use cache").
Then, after a mutation in a server action, call `refresh()`:
nextjs.org/docs/app/api...
That will send over the updated UI in the same round trip.
Ah looks good now, hadn't checked since earlier π
I think it's CDN, I saw sebbie mention is for the sandboxes on react.dev. They work if you fork them.
The clock example from Dan's talk was great. I feel like there's some contrived example that can communicate that... maybe a "subway network" demo? I feel like that's relatable (at least for me as a new yorker ^_^)
Mic quality? Thatβs the thing Iβm most curious about!
It's so tasteful though, and they always still load fast, don't have layout shift, don't highjack scroll, etc. I think they do a really good job of capturing your taste and personality while being exemplary of a professional. I'd wager they really help with sales!
Fantastic work man! Always love the detail in your landing pages.
It's going to be insanely awesome. Cannot freaking wait
Oh yeahhhh! Nice!
