How streaming impacts React and Next.js applications

Streaming is the key to fast and dynamic web applications. Learn more about how it can help you improve the user experience of your site.

#vercel

[ndrs_dev]

just this morning i used suspense in some routes with loading skeletons, really love how easy it is to set up and how fluid it feels with next.js

[DS-owge]

damn lee you're on a you work so hard

[aralroca]

The rerendering of actions are using streaming virtual DOM? how it works to apply the diffing algorithm with streaming?

how does partial prerendering play with SEO? are the dynamic parts seen by the search engine crawlers?

[thomasbouillon]

I recently faced a drawback with that. Having component streaming also means having JS executing when these are loaded to update the DOM.
This caused me a bad web viral in performance for having JS running for too long.
I went back to ISR to fix it.

[redenvalerio]

The problem I encounter is that loading.tsx returns 200 even after I send a notFound response meaning it will be treated badly by search engine. There's a bug report already and I'm still waiting for it to be resolved.

[kasper]

I have a big CSS file how do I load CSS in stream way using shadcn

[martinumueller]

I would like to see an example of authentication with Azure AD. Using msal.js directly or through next-auth. I am struggling with this and I think quite a few others are too.

[griffadev]

It's a shame the AI SDK streaming helpers are tied to AI would be nice primitives in next or a standalone library. Took a look at the code and it's widely complex though so maybe it's not worth it

[swimmyJones]

I just posted about this on the discord but the Suspense and loading.tsx file stuff seems to work great on desktop but not at all on mobile and tablet devices. Idk if anybody else is experiencing that or if there’s something different I have to do for those devices, but hopefully it’s just a dumb mistake I’m making lol

[no_handle_no_problem]

Here i thought you've done something with SSE

[NitinSharma]

Hey @leerob, I'm facing issues while setting environment variables for my client side(browser) application part as some of apis need to be called from client side only. The problem is during build time (Azure Devops pipeline), I don't know any environment variables, I just know those variables on app settings of server. I'm dockering my nextjs app so that I can stream my app for different environments (dev, stage, prod). I'm facing this issue for all NEXT_PUBLIC_ prefix variables as these got inlined (hardcoded) during build time. Can someone suggest any workaround or solution for this?