I love making videos like these. I know y'all love them too. Sadly, this is by FAR my worst performing video in like 3 months. So if you can, maybe share it with some people who should see it?
Tbh I dont think its performing badly, its not something you click on for news, its a video which will perform over time. Keep it up brother, love your work.
Sharing it rn, keep it up Theo, this is gold content, unfortunately it might not be broadly appreciated because of the "short format" popular standard. But there are lots of professor's classes that are referenced when people want to explain something to one another and I know for a fact I'll be referencing this one.
This is the stuff you will never ever learn at any school, college or university and yet you will definitely use that knowledge in a real word scenario or at work. The fact that we have this type of quality content for free is what makes the internet the internet.
This is a really great video. I had a general understanding of all of the concepts covered (although less so for islands), but it was really nice having it all laid out to compare each modal. I think these sorts of videos are my favorite.
No joke, the MPA-influenced split-execution model concept has been around for a long time. I was literally working with a decades old (yes multiple) classic asp page today that does basically this. Server generates all the static html it can. There are little islands that need more data for the specific user which JavaScript handles the requests for and building out the page. All this is cacheable and once that cache is there everything loads really fast (for what it is). Classic ASP though, is way less pleasant to deal with and had squat for tooling compared with the modern version of the same paradigm.
Isn't that what the JS guys are always doing? Trying to reinventing the wheel in their own way, realizing their stuff doesn't work super well and finding a solution that was invented for another lenguage/technology/stack years ago...
@JorgeMarquezIO actually, we (backend first, mpa) failed imho. we didn't deliver streaming + preserving of client state when rerendering (going to a new route). that's why we have to suffer from "them/client first guys" reinventing the wheel. because we didn't move forward enough. (there were solutions from 2014 like markojs from ebay), but we didn't care, this is our fault in my opinion.
Been working on Svelte Kit app and been having a hard time getting used to non-SPA design coming from React. Literally wanted to login to the t3 discord and ask for a video like this thank you so much!
SvelteKit is also SPA. Also he forgot to mention that most browsers will request the JS the moment it sees the tag, not after the entire document is sent - and you can leverage preload tags and headers to explicitly inform the browser about a resource. Thirdly, most frameworks including SvelteKit give you ways to include dynamic data on initial request so that you don't actually need the JS to make the api data request after.
@@laztheripper while I agree that he could've mentioned preloading, I don't think he implied that you need to wait for the whole document to fetch the scripts, what Theo was probably implying is that you need to wait for the whole document before you can do hydration, so you can load/preload them as you wish, but you still have to wait for the whole html to be parsed before proceeding with parsing the loaded/preloaded scripts and attaching event listeners (hydration)
21:32 - 23:56 I think the double data drawback from SSR'd SPA is what Qwik is trying to solve - from my understanding - instead of sending JS that re-renders in the client to bind the button onclick event, Qwik embeds small JS code that imports the actual code that runs inside the button elementl
In general we need more deep dive videos into browser rendering (not react rendering), how browser works in general, how to measure browser rendering performance. Recently I tried to research the subject and videos on this are 10 years old and even people in thoes videos say that it constantly changes and things they say may very soon not apply.
This is a great extremely informative video that I’ve been digesting slowly to really understand what’s going on. Sorry it’s been underperforming, but it’s definitely an extremely valuable resource. Hopefully it picks up after giving it a share
This has already been the model that Deno's Fresh framework has worked for ages. It's one of the best DX's I've had the pleasure of using. Also, it's **so** much lighter than any React based frameworks, because of Preact.
these are the videos i really like. the videos where you just read articles and blog posts are really boring. please make more of these videos in the future where you explain something
how does clerk do google or other social media auth as you need the key from these platform and if clerk user their own doesnt they literally have also access to your users or if its not then why other auth platform makes you create google or other dev accounts and get the key from there then put it in that auth platform
Im using Astro SSR with Fastly CDN tag purging, its pretty great for content centric sites connected to a CMS. I hope vercel make their data cache framework agnostic
back in the late ‘90s and early 00’s Akamai (and others) came out with “Edge Side Includes”. It always kind of sucked but the idea was pretty great. Islands is like that, for the 2020s
In htmx's case it depends on the implementation, for me I use go on the server, so every request generates the HTML via golang and then is sent to the user. It's basically like the server rendered diagram, but take ALL the js stuff out it allows you to be a single page application by only replacing chunks of HTML at a time that are rendered on the server.
.... or instead of all this madness we just have server rendered HTML and supplement that with sending HTML over the wire for reactivity a la Turbo or Live View and regain our sanity.
You meant live wire? To my understanding it works similarly to astro, so it is part of this madness. Tbh i don't think there is any other method that isn't part of this madness, maybe some methods sound less mad to you, but not to someone else.
As a beginner Nextjs developer I would like to request, for the two best solutions, SPA-influenced isomorphic and MPA-influenced split-execution (islands/server components), best practice code implementations with GitHub links
9:00 I would think anyone watching this video would know this stuff already. Maybe start a little further down the knowledge chain next time. I find myself skipping most of this. Whatdo I know tho
yeah, livewire is a good example of a "server-first guys (old time backenders)" solution to the "preserving client state on changes". but even when nice technology, nowaday, the market is full of js people, knowing react. how can you build a big projects on livewire without skilled developers :( if you are solo, great
I love making videos like these. I know y'all love them too. Sadly, this is by FAR my worst performing video in like 3 months. So if you can, maybe share it with some people who should see it?
Thats a real bummer, genuinely felt like I should have paid for this one so useful to me😃
Tbh I dont think its performing badly, its not something you click on for news, its a video which will perform over time. Keep it up brother, love your work.
I left a like if that helps
It's sad but you probably need a more clickbaity title
Sharing it rn, keep it up Theo, this is gold content, unfortunately it might not be broadly appreciated because of the "short format" popular standard. But there are lots of professor's classes that are referenced when people want to explain something to one another and I know for a fact I'll be referencing this one.
This is the stuff you will never ever learn at any school, college or university and yet you will definitely use that knowledge in a real word scenario or at work. The fact that we have this type of quality content for free is what makes the internet the internet.
Yes, actually crazy good video
I found the video extremely informative and easy to understand even as someone who's a newbie to frontend. Amazing work, Theo!
This is a really great video. I had a general understanding of all of the concepts covered (although less so for islands), but it was really nice having it all laid out to compare each modal. I think these sorts of videos are my favorite.
No joke, the MPA-influenced split-execution model concept has been around for a long time. I was literally working with a decades old (yes multiple) classic asp page today that does basically this.
Server generates all the static html it can. There are little islands that need more data for the specific user which JavaScript handles the requests for and building out the page. All this is cacheable and once that cache is there everything loads really fast (for what it is).
Classic ASP though, is way less pleasant to deal with and had squat for tooling compared with the modern version of the same paradigm.
Isn't that what the JS guys are always doing? Trying to reinventing the wheel in their own way, realizing their stuff doesn't work super well and finding a solution that was invented for another lenguage/technology/stack years ago...
@JorgeMarquezIO actually, we (backend first, mpa) failed imho. we didn't deliver streaming + preserving of client state when rerendering (going to a new route). that's why we have to suffer from "them/client first guys" reinventing the wheel. because we didn't move forward enough. (there were solutions from 2014 like markojs from ebay), but we didn't care, this is our fault in my opinion.
Ill comeback when there is more comments
influencer telling you what to think < comments telling you what to think
Haha same here
@@PraiseYeezusreal
Been working on Svelte Kit app and been having a hard time getting used to non-SPA design coming from React. Literally wanted to login to the t3 discord and ask for a video like this thank you so much!
SvelteKit is also SPA. Also he forgot to mention that most browsers will request the JS the moment it sees the tag, not after the entire document is sent - and you can leverage preload tags and headers to explicitly inform the browser about a resource.
Thirdly, most frameworks including SvelteKit give you ways to include dynamic data on initial request so that you don't actually need the JS to make the api data request after.
@@laztheripper while I agree that he could've mentioned preloading, I don't think he implied that you need to wait for the whole document to fetch the scripts, what Theo was probably implying is that you need to wait for the whole document before you can do hydration, so you can load/preload them as you wish, but you still have to wait for the whole html to be parsed before proceeding with parsing the loaded/preloaded scripts and attaching event listeners (hydration)
The brain is satisfied at learning new stuff I 'kinda knew' but didn't really know. Thanks again.
These types of videos are what you do best. Awesome work 🙏
omg, I really need this. Thanks for this vid, Theo
@Theo Can you share the excalidraw link. It's so nice
Wow, I'm in awe of theo's diagrams. They are the best. Makes me able to undestand the concepts very clearly ❤
Worth the 50 minute binge watch
incredible explainer that demystifies a lot! thanks theo!!
12:20 i feel like this is such a good example of what happens when building an app as you reflect retrospectively
21:32 - 23:56 I think the double data drawback from SSR'd SPA is what Qwik is trying to solve - from my understanding - instead of sending JS that re-renders in the client to bind the button onclick event, Qwik embeds small JS code that imports the actual code that runs inside the button elementl
HTMX solves all your problems, as long as you implement a caching mechanism for your initial page load on the server.
I needed this, thanks Theo !!
In general we need more deep dive videos into browser rendering (not react rendering), how browser works in general, how to measure browser rendering performance. Recently I tried to research the subject and videos on this are 10 years old and even people in thoes videos say that it constantly changes and things they say may very soon not apply.
Very interesting and informative. Working on a project that uses React front end and just a simple backend for api
SPA model is fine as long as you batch requests well and have decent loading states
Downloaded the vid and I have a copy on flash drive thank u it’s been amazing.
This is a great extremely informative video that I’ve been digesting slowly to really understand what’s going on. Sorry it’s been underperforming, but it’s definitely an extremely valuable resource. Hopefully it picks up after giving it a share
I love videos that are so explicative. Thanks, Theo
09:41 are "GraphQL Edge" and "Server" two different computers with different ip addresses?
This has already been the model that Deno's Fresh framework has worked for ages.
It's one of the best DX's I've had the pleasure of using. Also, it's **so** much lighter than any React based frameworks, because of Preact.
these are the videos i really like. the videos where you just read articles and blog posts are really boring. please make more of these videos in the future where you explain something
Would you maybe consider making a video on where to find all the great programming related articles? Like a top list of websites.
Great video. So easy to understand. I'll definitely share
As an astro svelte fanboy this video reassures me
That is great! Thanks for share!
Is it somehow possible to grab this amazing excalidraw file?
how does clerk do google or other social media auth as you need the key from these platform and if clerk user their own doesnt they literally have also access to your users or if its not then why other auth platform makes you create google or other dev accounts and get the key from there then put it in that auth platform
Im using Astro SSR with Fastly CDN tag purging, its pretty great for content centric sites connected to a CMS. I hope vercel make their data cache framework agnostic
Will "local first" get us over line into the dream web app that you described at the end?
Thank you, these videos are awesome and helpful. You're a great teacher.
Please make this same type of video diving into graphql or trpc
for Next 15 server islands are those server actions + server components (those need data to be fetched from db or other server) ?
server islands is astro´s version of PPR
Nuxt is incredible with their Universal Rendering
This is Indeed, one of the best videos!
what app he was using to draw that? is it Eraser? my bad if i missed the most basic thing or didn't watch it entirely
I thought this was about browser internals. Skipped.
I’m going to be honest, twitch doesn’t load that slow on first load
I was searching for this livestream 😅
So, Astro WINS ?????
yes i also believe Astro should win it !
For heavily dynamic content, perhaps not?
Otherwise it provides more flexibility with deployment infrastructure & good performance, so maybe..
@@everyhandletaken for heavily dynamic content why not you can use SPA at that point or SSR fully in ASTRO just fine with so much benefits
@ I haven't used Astro & wasn't sure, thanks for info! I feel a new side project coming on..
I wish theo teaches all full-stack topics this way 😘
back in the late ‘90s and early 00’s Akamai (and others) came out with “Edge Side Includes”. It always kind of sucked but the idea was pretty great. Islands is like that, for the 2020s
what about MPA Via AJAX calls like JQuery / HTMX
In htmx's case it depends on the implementation, for me I use go on the server, so every request generates the HTML via golang and then is sent to the user.
It's basically like the server rendered diagram, but take ALL the js stuff out it allows you to be a single page application by only replacing chunks of HTML at a time that are rendered on the server.
this was great! anyone has the excalidraw file/link?
.... or instead of all this madness we just have server rendered HTML and supplement that with sending HTML over the wire for reactivity a la Turbo or Live View and regain our sanity.
You meant live wire? To my understanding it works similarly to astro, so it is part of this madness. Tbh i don't think there is any other method that isn't part of this madness, maybe some methods sound less mad to you, but not to someone else.
Watch the video then say that
0:31 Oh that's news wow 😒
Woah, never gotten to a video this early before!
As a beginner Nextjs developer I would like to request, for the two best solutions, SPA-influenced isomorphic and MPA-influenced split-execution (islands/server components), best practice code implementations with GitHub links
Waiting for a video on LibreJS compliant websites.
amazingly informative
Prewatched (I watched it on stream 🤫)
This is only a problem if you optimize for first page load
9:00 I would think anyone watching this video would know this stuff already. Maybe start a little further down the knowledge chain next time. I find myself skipping most of this. Whatdo I know tho
video is great as is. a lot of us benefited from the recap.
No it's good to start from start
2026: PRRR and MEOW
God this was so good
I see you're still using arc
On demand revalidation
"Chazim" 15:30
Finally something useful.
Wanted to unsubscribe: tired of your clickbait and sponsored videos.
Jesus molly what a good video
hi theo
Awesome vid
Cool
Never worked in JS land, this sounds exactly how Laravel Livewire works.
livewire uses similar islands to the astro approach as far as I understand
yeah, livewire is a good example of a "server-first guys (old time backenders)" solution to the "preserving client state on changes".
but even when nice technology, nowaday, the market is full of js people, knowing react.
how can you build a big projects on livewire without skilled developers :(
if you are solo, great
there is literally no need for something called or defined as "rendering" in website development... you are part of the problem.
What do you think this platform that you are on right now is doing right now if not rendering.
@rasibn this website is showing videos that have already been rendered.
Please send link to that Excalidraw file :woozy_face: