Post

With @next/playwright update, will there be more guidance around testing instant and server components, especially leveraging vitest browser mode

what kind of guidance is missing? what questions are you running into

I do not know a good way to test server components or async components in vitest browser mode (a very nice wrapper for Playwright). The next docs show JSDOM testing with Vitest nextjs.org/docs/app/gui...

This entire premise is flawed.

in what way?

the premise is either "nothing happens" or "show the next page's loading shell" - but there exist other ways to solve the problem without either of those (imo) flawed approaches. this is one core motivation of my upcoming rsc framework.

Instant Insights gives you options for how to make a navigation instant: • Stream the data behind a <𝚂𝚞𝚜𝚙𝚎𝚗𝚜𝚎> boundary • Cache the data with '𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎' Or allow the navigation to Block with 𝚎𝚡𝚙𝚘𝚛𝚝 𝚌𝚘𝚗𝚜𝚝 𝚒𝚗𝚜𝚝𝚊𝚗𝚝 = 𝚏𝚊𝚕𝚜𝚎.

To guarantee instant navigations, the client must immediately render something when a link is clicked. Previously, Next.js tried to solve this by prefetching every link, a flurry of requests as you scrolled. Many of you told us this looked ridiculous, and frankly, we agree.

So, we're borrowing a trick from single-page apps. Next.js now prefetches one reusable shell per route and caches it on the client, instead of a separate request per link. A click renders the prefetched shell instantly while the rest of the page streams in from the server.