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.
◆ Blog: vercel.com/blog/how-streaming...
◆ PPR: • Next.js Visually Expla...
◆ Core Web Vitals: • How Core Web Vitals af...
◆ Demo: partialprerendering.com
#vercel

[@4ndrs_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

[@thomasbouillon9478]

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.

[@kasper369]

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

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

[@DS-ow2ge]

damn lee you're on a tear..... you work so hard

[@DS-ow2ge]

can you make a video about the partial pre rendering experimental features? I don't understand what that is, how its different from the ISR on pages router

[@matt_hart]

they did make a video on PPR. he mentioned it at the end of this video and it's in the description.
but to quickly answer you, ISR lets you generate a fully static page to serve to users from a cdn anytime the previously generated static page gets out of date (you specify when the page becomes out of date). SSR means you render the entire page on a server for every request. PPR is like in between the two. you basically say what on your page should be static and that will be generated and served from a CDN for fast initial response, and then you can put elements in that same page that should be SSRed on every request for dynamic content, and they'll stream in and get inserted into your static page as the rendering finishes

[@shekareditzz]

​@@DS-ow2ge😊😊😊😊😊😊😊😊😊

[@shekareditzz]

​@@DS-ow2ge😊😊😊

[@shekareditzz]

​@@DS-ow2ge😊😊

[@martinumueller1]

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.

[@A03L]

Code with antonio has a free masterclass of 8 hours about next auth v5
Check it out (it's not and ad, I really like the course )

[@franknguyen8396]

Lee does it again

[@redenvalerio601]

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.

[@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

[@leerob]

Should work the same! If you can pin down an issue, want to open it on the Next.js repo?

[@swimmyJones]

@@leerob I did a post in the Next.js discord but the only response I’ve gotten was from someone not liking how I asked my question, so I’ll try posting in the repo as well.

[@no_handle_no_problem]

Here i thought you've done something with SSE

[@Nab_001]

I love Vercel,

[@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

[@NitinSharma00001]

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?

[@francopoffo]

i had a similar problem recently, my workaround was declaring the variable on my Dockerfile with: ARG NEXT_PUBLIC_VARIABLE, and then - docker build --build-arg NEXT_PUBLIC_VARIABLE=${VARIABLE THAT YOU NORMALLY SET ON GITHUB/GITLAB}

[@paramaggarwal]

Gave it the 100th like

[@aralroca]

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