React Streaming In Depth: NextJS! Remix! DIY!

Code: github.com/jherr/react-streaming
Original React team example code: codesandbox.io/s/kind-sammet-...
👉 Practical Module Federation Book: module-federation.myshopify.c...
👉 No BS TS (The Book): no-bs-ts.myshopify.com/
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono
0:00 Introduction
1:05 Our Example Project
2:43 NextJS 13 Setup
4:26 Non-Streaming Render
6:01 Streaming Render
14:00 Remix Setup
18:22 Streaming Render
23:14 DIY Project Setup
27:06 Adding Client JS
34:06 Streaming Render
37:55 The Big Payoff
41:51 Adding Interactivity
47:24 Outroduction
#react #react18 #nextjs13 #nextjs #remix

[@solidcake2998]

Jack, I cannot stress enough how big of an absolute gem you are to this community!

[@gametroll6311]

100% agree

[@CentMSN]

I'm a huge fan of your videos. Far better content than most of paid courses!

[@mohammedaslam2912]

true

[@cambodianjesuss]

Your channel is the best! Thank you so much for being a huge resource in the community! Definitely helped me out a lot with understanding some topics with react

[@r-i-ch]

As always, great higher-level content well explained. Thank you Jack!

[@Opentheass]

I was following your videos for a long time, appreciate what you are doing to the community! keep it up!

[@t4612310]

Thanks Jack. Really love this video of walking through how nextjs or remix or any ssr framework does to us!!

[@CarlosHonorioBriones]

best video I've seen comparing these features and showing how actually things work wth simple example, congrats

[@loquek]

Really useful video, thanks so much for putting it together

[@1235niki]

Thanks for making this demo and the detailed explanation on this Jack

[@paradroid888]

Brilliant video Jack, really explained a lot about SSR to me. The pace of this video was spot on - fast enough to cover a lot, but enough time taken to follow what's going on.

[@pablomotta___]

Can’t wait to watch this one! Thanks Jack! 🙌

[@shane-porter]

Hi Jack - I’m a new subscriber, having watched a video of yours for the first time a week or so ago. Thank you for making such great content, I hope you have a great Christmas, and a fantastic 2023!

[@jherr]

Thank you. To you and yours as well.

[@govindkarthikeyan]

Jack, you are a rock star man !!! This is mind blowing stuff !!! Still I can't wrap my head around the DIY approach ! Going to do hands on so it will all make sense to me, Thanks for the awesomeness !

[@ogreeni]

I was waiting for this topic! I guess I know what I'll be watching this afternoon.

[@NilanjanSiromani88]

This is a gem of video For anyone who thought streaming is this complicated technology it just goes on to show that its is in essence a very simple thing that's going on Thanks a ton for this Jack !!!!

[@zakir.nuriiev]

Cool! Thanks a lot for the explanation!

[@EddyVinck]

50 minutes! Absolute legend!

[@valentoMundrov]

great stuff, thank you, happy new year, ☕

[@wouter1625]

insanely good video, love it. t hanks jack!

[@DivjotSingh]

This was truly awesome!

[@greendsnow]

Because of this, I was so frustrated with the Framer-Motion today. Just because of the animations were I going to load everything on the client? It was outrageous. Little did I know!

[@mohammedaslam2912]

Thank you, it was easy to follow and learn 🙂

[@christophebert9103]

That squirrel in your backyard in the Outroduction chapter :D But great video, thanks a lot!

[@mortezatourani7772]

That was a lot of information there. Really awesome. I must've been a good boy to receive this present from Santa 😛 Thank you very much and MERRY CHRISTMAS

[@JGBSolutions]

Nice one! I learned a ton today.

[@TheKluVerKamp]

The best framework that handles hydration so far is Qwik.js. They even don't call it rehydration, they name it resumability. In order for react to adopt this, it will need a rewrite for its core (Fiber right?) and then we would get rid of the sending the state of the app from the backend to bootstrap the frontend app. I am sure that react core team have the best minds to find a good solution, but until they do we will need to live with the window.__data trick (which is not that dramatic IMHO) moving to qwik at this stage might be a big ask to do, but what I am seeing with qwik is very compelling to migrate to it to solve the rehydration issue. I am happy to see where those two great libraries (react and qwik) will offer to the web scene in the near future. A really healthy competition. And in closing note, thank you Jack for bringing in those amazing topics, and doing the effort to back it up with a set of a very awesome videos and github repos to clone the code and play with it! keep it up, sir!

[@dkaigorodov]

DYI is great, thank you!

[@luizpaulonascimento9162]

awesome video thanks

[@heguer87]

Mr react Mentor in action! thanks man, highly appreciated

[@rafaelreisramos]

Mind blowing... Jack rocks 🤙

[@tjalferes]

Thanks Jack!

[@eleah2665]

Thanks as always. I'm interested in Remix if you want to do more on that.

[@heguer87]

Same here, liking remix a bit more tha next js

[@parkerAmv]

Try sveltekit bro you will like it

[@musagillani5399]

Love the content Jack I'm new to full stack with React n express but know them separately It'd be great if you could post a video on how to setup an app with express and react like you did in this DIY version as I'd really like to understand the barebones

[@nazarshvets7501]

thx for video, it was really usefull. Now I have reasons to drop nextjs in favor of custom ssr

[@jherr]

Or not... If you're not joking, then I would advise against that.

[@skl9942]

Amazing!

[@UGMurthy]

Excellent video Jack. Thanks very much for doing this. One question. I am curious to know how you have that stylistic terminal prompt. Looks very good. Does it even track git status etc?

[@pedroferrari6899]

Thank you again

[@mat_0684]

Thanks for the great content. Following a Nextjs 12 /React 17 upgrade to nextjs13/react18, is it possible to use Streaming SSR on a component used in a page from the /pages folder?

[@jherr]

No. That’s an App Router feature.

[@RisingJ]

Great video, thanks a ton! Couldn't you just skip hydration if window.__data is defined since the server already rendered everything?

[@jherr]

Nope. Because the client is going to render all those components again and it needs the data to do that. This is the "Hydration problem" that has plagued React since the advent of SSR and is the reason why we now have React Server Components which are trying to address this issue, as well as new frameworks like Qwik which are trying a different approach to this problem.

[@johnychinese]

Hey Jack can't we just JSON stringify the comments and parse them later instead of using the defer keyword Great vid as always, such a gem in this space and Happy New Year

[@jherr]

Because you'd block on the request to get the data so that you could JSON'ify it. Thanks!

[@thalibmuhammad9519]

hi jack, i looking for vscode extension that can show node js version, what is it called?

[@berkaycirak]

Does the html parser on the browser wait for the stream? I mean, 39:10, we first rendered some part of the html and our browser paints it, then new html is come with new script and our browser will re-paint and reflow again from scratch?

[@jherr]

AFAIK the HTML in the stream is there only for bots. The client isn't going to execute that. It's going to injects the RSC stream into the VDOM and then render that on the client.

[@mdmathewdc]

How would I know whether a file is a client component or not without opening it?

[@StoilRadkov]

Hi Jack, where do learn this kind of stuff from? Is it just experience and digging down in the documentation?

[@jherr]

I read the docs. And in the case of Remix I talk to the core team.

[@raygan3]

How did you change your Mac OS app switch animation?

[@jherr]

That's Stage Manager.

[@pb8655]

7:41 maybe I need to just continue watching but will there ever be a more prod ready way to deal with this? Feels a bit hacky

[@electrolyteorb]

Hey all, Can you please explain the difference between ./Loading.tsx vs Suspense API?

[@jimshtepa5423]

7:48 why are we not seeing the 2 second delay before you introduced Suspense? is it because response is being served from cache?

[@jherr]

I think what it actually was, was Chrome keeping the current page visible during the refresh until the page fetch completed. IRL, what actually happened was what happens so often. I hit refresh, got the two seconds, started talking about it, screwed up what I was going to say, and and went back to do it again, only to get this behavior where it was taking the time but it wasn't visible and I kept on going with it. Try it out for yourself, if you block for two seconds in the component you'll block the server for two seconds.

[@Dev-Siri]

Is it possible to stream in & append more data in Next.js? Like if in the query params the value of page is 1 We get the initial data, and then as the user scrolls down and the query params increase new content streams in and adds to the existing data shown on the page. Its the same as fetching more from the client and setting it as state, but instead a server-side equivalent?

[@jherr]

I think you'd have to handle streaming yourself to handle that. What streaming is designed for is for loading an initial page and then streaming requests, that are started at the beginning of the render, later to the page. What you are talking about is an optional interaction later. Some users will scroll, some users won't, and we don't know who is going to be doing any scrolling on the server side at the time of the render.

[@Dev-Siri]

​@@jherr oh ok. I was actually looking for a simple server-side solution because my current implementation causes some server-components to be hydrated because they were being imported in a client-component. But I guess I have to look for some other way.

[@jherr]

@@Dev-Siri I don't think you should worry about RSCs too much. Certainly not so much that you bend over backwards to try and force stuff like this with streaming.

[@Dev-Siri]

​@@jherr I actually didn't care about RSCs until they became a problem. When I tried to use something that should be rendered ones (it will cause hydration error) or a child of the RSC that uses something that changes every second (eg date/time). Those started causing hydration errors & I had to switch to client rendering for those. But this also made the app very slow with so many 'Loading...' texts & spinners. (sometimes even loading for as long as 3-4s). Which kinda felt unneccesary since it could be just rendered on the server. And I have actually figured out a solution myself now but it took a lot of work.

[@oskrm]

Jack, Did you try preact's signals? What are your thoughts on them? (They have signals for react)

[@jherr]

Great idea, but I found the implementation a bit kludgy. As I recall it was only for replacement of atomic values as innerText or props. Which is nowhere near as powerful as Solid. I think if you want signals you should do something like Solid and get proper signals.

[@oskrm]

@@jherr But if I don't(/can't) use Solid? Is it good enough?

[@jherr]

@@oskrm My honest opinion? No. I love preact and I love what that team has done for the community. But the signals stuff feels like a hack. And its limitations make it borderline unusable.

[@oskrm]

@@jherr Okay, thanks for your reply tho!

[@oskrm]

@@jherr Another question, how would you handle i18n in next13?

[@JoonasKarp]

What do you think of ChatGPT ? And how does it compare to github copilot?

[@gametroll6311]

Is this possible in any of the other frameworks by any chance? Vue, Nuxt, Angular, Svelte?

[@jherr]

That's a great question. I honestly don't know. I'll take a look around at some point.

[@phattruong7086]

Hi Jack, nice work so far. I learn a lot from you. BTW, I'm learning Remix and I see you are using "remix@deferred". I tried googling but I did not see any documents talk about Remix deferred and React 18 streaming SSR with remix. Could you share to us the document or any article talk about it. Waiting for your reply :D

[@jherr]

This branch was introduced to me by Jacob ebey (a member of the remix team) as the soon to be released alternative to the nextjs solution to streaming.

[@phattruong7086]

@@jherr Many thanks ^^ I'm looking to the next release of Remix. So nice

[@WhiteSponge]

Holy mama sounds like NextJS 13 made it really easy to use React Server Components + SSR as compared to the DIY way of doing it lol

[@tedogirma]

that's cool 👍👍👍👍 Hydration is the problem on remix

[@jherr]

Hydration is a problem on all the non-Qwik isomorphic frameworks.

[@tedogirma]

@@jherr so what will happen if hydration issue happens on production?

[@jherr]

@@tedogirma Flicker, poor performance, and possible SEO issues.

[@tedogirma]

🙏🙏🙏 Best teacher ever ❤️❤️ Thanks again

[@abdessittirharkati7603]

Hi Jack, Thanks for the geat content Can you please do a video about Qwik.js

[@itsmyfetish3266]

Hi, having issues in Safari, Suspense is working great with Chrome, but Safari just waits for a fully loaded page.. Frustrating

[@jherr]

You need a larger page. Safari has a weird issue with streaming on small pages.

[@itsmyfetish3266]

@@jherr wierd, but thanks for the explanation! Really appreciate that. Nice content.

[@hakuna_matata_hakuna]

rakkas is a small but up and coming reactr meta framework that uses vite and also has it's own implementation of streaming components and server only useQuery replica without server side components

[@WilliamShrek]

32:53 Suddenly you turn into a rapper. 🥳

[@gabrielfono844]

sir , since I have discovered your channel, it helps me grow a lot on my current job because I trully understand how things trully works. I have niche website I have built with many blogs, tutorials, forum , and many others service completely built with ReactJs and springboot backend. now I want to upgrade the site to NextJs for SEO purposes because of the advice I got from many experienced engineers advice me to upgrade the frontend to nextJs for better SEO. 1) is it even necessary to upgrade the site to nextJs for SEO purposes, if so how do you approach upgrading site to nextJs from ReactJs ? 2) is it anyway we could have a better SEO with ReactJs ? I would love to hear from you sir thanks

[@jherr]

SEO has nothing to do with SSR. It comes down to the content on the page, the title and the meta tagging. Google has been able to run the JS on CSR sites for years. So I would start by addressing your SEO issues first, and then see if, for performance reasons, you might want to go to SSR or SSG.

[@gabrielfono844]

@@jherr thanks I also heard from others that google bot can’t index pages from a Reactjs easily since the JavaScript code are still loading and google bot can’t wait therefore , SEO is bad if site is built with ReactJs. This is what I heard. I am still earlier on my career and I heard here and there different things that obviously confused me at some point . Thanks

[@jherr]

@@gabrielfono844 First off, NextJS is built on top of ReactJS. So if you want to stay with React, then your choices are SSR with NextJS, CSR with Create React App or Vite, or SSG with NextJS or Gatsby. (There are other choices, but those are the primary ones.) If "ReactJS is bad for SEO" then all of those options are bad, since they all run ReactJS. In fact, SSR is worse than most because it runs the React app TWICE, once on the server and then again on the client. I'm not an SSR hater, I'm using it right now, but it's because I want to talk to the backend from the server behind the firewall and not from the client. The whole SSR/SEO thing is an old wives tale that has been around for decades now and everyone just takes it as gospel without actually thinking about it. Suffice to say the "NextJS + SSR = SEO because NextJS is not ReactJS" equation makes no sense.

[@gabrielfono844]

@@jherr thanks Will share this comment with my colleagues Thanks a lot

[@Ok9xNirab]

In my case , react suspense ( Loading ....) not working on safari browser . Works fine with Firefox.

[@jherr]

Interesting... I wonder if Safari just isn't keeping the connection open. That's a troubling find though.

[@christopheanfry2425]

I can see that you have Obsidian open also. You mentioned it on twitter hope you like it!! Anyway nice video thanks

[@jherr]

Yeah, it's good. The remote vault setup is a little klunky. But it works now. Better than Quiver.

[@christopheanfry2425]

@@jherr yes I struggled a little bit at the beginning but once you have everything set up it’s impossible to change!!!

[@rainbeturns5537]

hi do you have content on nextjs vs remix

[@jherr]

A few videos. Just do a search on NextJS, I do a lot on it.

[@Staslyu1997]

How to make apple icon inside in terminal like on the video?

[@jherr]

Oh my posh and oh my zsh on tabby with a nerdfont for the special characters like the apple

[@Staslyu1997]

@@jherr Thank you!

[@Stoney_Eagle]

If you control/trust the source then dangerouslySetInnerHTML is not so dangerous. Just never use it for user-generated content or have a vetted input sanitizer.

[@rundtmeg]

I wish you would at least mention, that the same thing is possible with Gatsby.js 🙏🏻

[@omkarkulkarni3644]

this is the exact mid level engineering stuff I am always looking for

[@reactivenyc]

What is that Arc browser?

[@jherr]

Pure awesome :) really enjoying it.

[@reactivenyc]

@@jherr I tried to go to their site but looks like it's not out yet, they put me on waiting list lol

[@jherr]

@@reactivenyc DM me on twitter I’ll send you an invite.

[@reactivenyc]

@@jherr deleted my Twitter :(

[@jherr]

@@reactivenyc ok use the discord server then. :)

[@sreekar_s]

OMG fellow arc mate. How is it?

[@jherr]

I love it. It's f'ing amazing.

[@thisweekinreact]

Looks easier to use a framework than DIY 😆

[@jherr]

Very definitely.

[@abinashshasini577]

No it's great to work in react

[@rubendacostaesilva8442]

That's why frameworks are created, to facilitate the developing process, so that developers can spent more time on things that matters.

[@movrew]

Knowing how things work under the hood make you more efficient

[@nextfangtechlead6239]

Hmmmmmmm...

[@infisspablo8602]

First comment gang B)

[@movrew]

💯

[@kamm3r]

audio was kind of bad, a lot of lisp/ess sounds

[@jherr]

Ok, thanks for the feedback on that. It's a work in progress.

[@sreekar_s]

I am sorry. Who's teaching me here? Jack or Copilot?

[@jherr]

Me. Thanks. It was me who spent hours doing the research and working through all the little gotchas on each platform. Me who spent hours recording the video. Me who spent hours editing the video and putting it all together.

[@sreekar_s]

@@jherr haha good one. I can see your effort in your video. Thanks mate for all the videos you do. Learned a lot. Especially bs ts 😃

[@PhilipAlexanderHassialis]

"That is the hackiest thing ever! i am never gonna watch your channel again!" (proceeds to unsubscribe) :P

[@abinashshasini577]

Sir please create a complete code work through of react SSR we need to understand a little bit more like write everything from scratch BTW great work 🫡

[@abinashshasini577]

Create another video completely about react 18 SSR