This is an insanely useful video, it can be super hard to find out information about all of all of these patterns (especially when each framework is trying to push how great and perfect their particular approach is). Everything here is clearly explained alongside benefits and drawbacks, thanks for the amazing video Jeff!
@@perc-ai what is spa when not a rendering pattern? spa's use client side rendering and mpa use server side rendering so you mean CSR/SSR are the rendering patterns or what exactly?
@@perc-ai SPA is a rendering pattern? I remember when I was in college and every site was built with php, and the concept of rendering the templates in the client was ground breaking.
Doing web dev for 15 years but this is quite insane. I think it took less effort to send a human being to the Moon that inventing all of these super cool frameworks and patterns that are solving quite simple task - rendering a content to the end user :) There are certainly a projects that can benefit from these but I think overall it is over engineered AF :) But anyway it is alway interesting to lear something new :)
No one has ever broken the glass dome that God has put above this flat earth. It's about 100 km in distance from the ground. Let alone going to the moon. Moon and sun are plasmas and are same size, those are not solid balls. Of course, moon landing was a Hollywood movie.
I don’t think it’s over engineered, they’re great tools for specific use cases. The problem is, people want to use them for everything, even for simple projects or projects where the simpler solution would solve the issue without the extra complexity. Lots of devs want the best performance and use experience all the time, they need to better assess the prerequisites.
I do think though we don’t have yet a great solution, a simple and elegant one, part of that is JavaScript. Svelte is a a good way, thinking about reactivity and stores, but it’s a JS superset, a workaround. The browsers should have a programming language thought for the modern web.
I've noticed that in fullstack development all complexity shifted from backend to frontend. Back in the days on a backend you had to do a server (cluster) setup, optimization, caching and using Linux; while on a frontend you cared only about fetching and displaying data. Now you can just use serverless and forget about infrastructure, while on a frontend you have to think about how to deliver content to end user as fast as possible: picking a correct rendering pattern, code optimization, lazy loading e.t.c.
the thing with front end is that its more a matter of just finding the right premade components and putting them together. In general coding will become easier and easier as time passes. It will still be just as big of an industry though, if not bigger, so I imagine that the top engineers that are creating the architecture and integration will be in very high demand.
@@ra2enjoyer708 Or you have to redeploy your app and split stacks into nested because AWS doesn't support more than 500 resources and you wouldn't guess that one API method with 2 path params creates 10 resources :D
You have always had to think about how you render a site on the front end client side as long as you weren’t making a static site. And if all your pointing out is people have moved onto dynamic sites more than static sites these days, well then no shit Sherlock. And don’t mistake your little react hobby jobs as the actual industry, because the REAL industry is the people maintaining the servers your “server less” apps are actually running on
And all of them just tend to create user annoyances. Sick of websites where the chrome loads before the actual content looking for, and gd the code minification in even html CSS class names makes user scripts impossible. And Ffs Load optimization is a joke trying to fix bloat that shouldn't be there.
I was lost already at SSG and at resumability I started having migraines 🤣🤣. Thanks for putting these videos, even though by the time you finish watching it, another 2 rendering patterns just emerged on the market.
At this point I absolutely despise web dev but after doing it almost exclusively for the past two years and doing my best to stay up to date with new frameworks and paradigms, I feel like I’m in too deep to quit. JS and front end in general are truly the cigarettes of the software development world.
I'm actually a java developer lol. You'll get the point of OOP and solid principles if you have 10+ enterprise projects. And in one of those project there is like one god class having 2000 lines of code and they are all doing different things. patterns make it easier to modify and decode and understand what they are doing. since they follow the same approach and patterns.
If your website performs like shit, maybe it's because you're bundling your ENTIRE node_modules and shipping that to the client - fancy frameworks can't solve everything, more often than not it's just shitty programming.
From someone that came frome embeded system, robotics, and numerical analysis software. Web dev is an absolute safe heaven. But then again this is a classic example of grass greener on the other sife
This is what I've been thinking about the past month. Thank you. Wish there was a course to teach all of the implementations. Even if its just a very basic app. Just to experience the differences.
Dude you're so goated for this. I knew about most of them but it's always SPA vs MPA, SSR vs SSG, or SSG vs ISR, and all that and I didn't know how they all fit together. ill be coming back to this one for sure
Leave it to programmers to make a thing 10x more complicated in order to squeeze 50% more performance out of an existing design. - Fantastic overview, by the way!
Most of that complication is the root cause of the low performance that then has to fix itself. With the majority of the perf gains on the backend budget and users left wondering why a page with 3 paragraphs takes 10seconds to load.
I'm totally satisfied with my SPA sites. You can speed up the initial page load with lazy loading too. It feels like a lot of this stuff is just fixing a problem I don't even know I have.
Totally agree, i feel like Js bundle size shouldn't feel like a big problem, even if it takes a couple seconds to load it's going to be cached by the browser... The only real problem with spas is SEO
@@ancellery6430 5 second load???? You must've picked the wrong random number for your example, because I don't think you would genuinely be unbothered by a website taking 5 seconds to load. Have you seen that Google statistics show that website traffic drops considerably if the website takes more than 2-3 seconds? I know that if I search for something and the first result doesn't load when I click it, I will click on the next one.
I was instant internet. God bless smart people for making that more feasible. It’s like gaming on 30fps, not impossible but you sure appreciate some sweet 120fps
Hi there's also HDA (Hypermedia Driven Applications) - AJAX requests are issued like in an SPA but instead of JSON, a piece of HTML code rendered from the server is returned like in an MPA and hotswapped on place without reload. HTMX, Livewire (for Laravel), Hotwire, Unpoly are the frameworks fir this.
absolutely.. AJAX - ( Asynchronous Javascript + XML ). But there was a reason to shift from XML to JSON right?. JSON data APIs were reusable for other applications as well right ?
You guys ever watch a video and just KNOW it's gonna save you hundreds of hours of learning and confusion? Yeah, that's how I felt with this one. Thank you Jeff!! As someone with just a budding interest in web dev, this was insanely useful. I also LOVE how you actually explained the tech behind each idea, rather than just doing what seemingly every framework does and just claiming their solution is the be all end all and "blazingly fast" (citation needed) and "paradigm shifting" (citation needed) and seemingly every other buzzword in existence. Seriously can't thank you enough man, this video should be required viewing for every web developer!
@@VivekChandra007 i used a lot of html attribute and local storage to solve that and it work perfectly with incredible performance(the maximum of js performance especially when i avoid variables as possible ⚡⚡⚡).
What I personally like best: static pages, that actually get manually rendered on the client by Javascript. The worst thing: It actually somewhat works. Load times are not horrendous and browser support is OK.
And nothing gets rendered by in an SPA? The different techniques he describes are all forms of rendering. SSG: render with your build tools SSR: render with a server side application SPAs render on the client, and then there are various clever ways to to mix all of the above.
I feel lucky to have started web development back when all you had to learn was jQuery / CSS and some backend framework. If I saw this video today as a beginner, I'd probably just switch to Swift or Kotlin and go native 😂
When the Dumb Twitter ( now X ) Developers Bros follow the Facebook sh!t, no thinking they have Billions and many people to write this nonsense React where HTML, CSS, JS, and Everything else is in one place! 🤮🤮🤮
after going through SPA hell since 2016, tried SSG with nuxtjs, im so glad AstroJS exist Now Im gonna stick to my island and do content website without all the hassle of js-frameworks
this feels like a such fast paced area. in 95% of cases, it’s still completely fine to use classic SSR (MPA in the video) or SPAs. we’ll see if any of those new things will become reliable solutions
at the end of the day, it doesn't matter if you only want to ship static HTML, everything goes up in flames once marketing steps in and they want to load a ton of their scripts.
Tell them they need to budget ab testing it first to validate thier request won't impact performance increasing the sites total bounce rate and lower conversions for every current live marketing effort costing the business money.
So much complexity for interactivity. Just make use of htmx for dynamic content loading without page refreshes and use something like _hyperscript or Alpine.js for interactivity and behavior. Much easier to build and maintain. Also no build toolchain required!
I wrote my first peace of js in 1996/97 and i hated it so much. Hard to imagine it survived for so many years now and still has all that quirks inside.
@@andsheterliak I can't wait for better wasm tooling and actual UI helpers for it. As of now its only use-case has been business logic but I'm starting to see projects like UnoPlatform, Microsoft Blazor, KotlinJS/JetPack for Web, etc... cooking up some real promising things on the side.
@@andsheterliak it is a problem with javascript. Html, CSS, Web assembly, etc all well made standards built on good initial standards and fromative ideas.
Amazing video!! But I kinda confuse between Partial Hydration, Island and Streaming SSR patterns :s They looked very similar... Can someone explain a little bit?
I mean yeah there are a lot of them but it kinds feels like that girl who keeps thousands of dresses in her closet and still keeps screaming "I have nothing good to wear".
Which category do the frameworks like Django, Laravel fall under? They do server side rendering for sure but what they do also seems different than what JS SSR frameworks do.
Your simple code snippet explanations of the concept in some of your other videos could be helpful in this one as well. I found this very helpful too. Thanks for educating us.
I recall being excited about frontend development, now with all the complexity and heavy reliance on bloated open source dependencies I'm just over it and can't wait to delegate it to someone else.
You don't have to learn all this shit and make websites with the latest frameworks, though. You can write perfectly good websites with vanilla JS. Plenty of people do.
Just choose a good framework and stick with it, you don't need the latest technology to save 2ms of Page load... A lot of important websites are still built using php or even older software
There's nothing wrong with using SPAs if the downsides do not affect your application. E.g internal applications which don't need SEO or taking 1-2 sec longer to load means nothing because the user will keep the browser tab open for hours anyway.
Great video. It's insane that this mess exists just to change how websites "feel". Server side rendering solves an actual technical limitation that static pages have, but after that it's all just fluff. A thousand different frameworks and techniques focused on the fluff
@@bigmistqke It's fluff. Single page app, islands, etc do not change what a website can or cannot do. They don't provide additional functionality or remove technical limitations... they just do the same thing in a different way for the sake of presentation.
@@maskettaman1488 you say it yourself best: they change how they feel. Something feeling snappy or something not feeling snappy is a difference. You might find that irrelevant and I might find that an odd statement for a web dev.
@@bigmistqke Imagine OP expressing that UX is fluff in a job interview for a dev position. Or the client and/or user headaches your team would have to deal with with someone like that leading it. Or the nightmare of having to explain why you won’t merge OP’s PRs each time if they were instead your junior.
I just transitioned from a full Django MPA to Django REST API + Vue SPA. I'm kinda lost on SSR. Like how does your frontend fetch data to from backend when it's all on server? I also don't understand why Fireship calls Next a backend framework while other people say it's a frontend framework.
So that's the thing, SSR isn't all on the server. The part that is ran server-side is generating the initial HTML, the rest (state management, dynamically changing content, routing, etc...) is ran on the client-side. In Django words, Nuxt SSR will generate your views just like Jinja templates, the resulting HTML is what is shipped to the visitor when he makes the request but then anything else that is happening after through user-interactions (button clicks, form submissions, etc...) will be executed inside the browser as if it was a piece of jQuery code. The reason why it might be confusing for you is because both the server part and client part are written in Javascript and inside the same file which isn't straight forward. This is why we use Vue's lifecycle hooks: mounted () { // ... } Do you get it ?
And the best part is the moment you choose one, something new comes out and you get to learn that instead!
Just like anything in JS
Tip: don't learn it.
just use next
Thats why developers earn more than other professionals...
Moved to next 13 then 1 week later to solid lol
This is an insanely useful video, it can be super hard to find out information about all of all of these patterns (especially when each framework is trying to push how great and perfect their particular approach is). Everything here is clearly explained alongside benefits and drawbacks, thanks for the amazing video Jeff!
It's so difficult trying to find accurate information about new technologies when the only people talking about them are trying to sell them to you.
100% dude came here to do some research and actually got my questions answered
0:00 Preamble
0:37 Static Website
1:09 Multi Page Apps
1:51 Single page App
2:45 Server-Side Rendering with Hydration
3:23 Static Site Generation with Hydration
3:54 Incremental Static Regeneration
4:46 Partial Hydration
5:12 Islands
5:44 Streaming SSR
6:12 Resumability
coolcool!
The dedication
@michaeljoseph7010 yep
Thank you, man! Play Plants vs Zombies Theme for a good mood! ☺☺☺
I didn’t even know there was 10 rendering patterns possible hahah
there isn't he doesnt even know what hes talking about he confused SPA/MPA being a rendering pattern... wtf
@@perc-ai what is spa when not a rendering pattern? spa's use client side rendering and mpa use server side rendering so you mean CSR/SSR are the rendering patterns or what exactly?
@@perc-ai SPA is a rendering pattern? I remember when I was in college and every site was built with php, and the concept of rendering the templates in the client was ground breaking.
Doing web dev for 15 years but this is quite insane. I think it took less effort to send a human being to the Moon that inventing all of these super cool frameworks and patterns that are solving quite simple task - rendering a content to the end user :) There are certainly a projects that can benefit from these but I think overall it is over engineered AF :) But anyway it is alway interesting to lear something new :)
Seems like creating a problem for the solution
No one has ever broken the glass dome that God has put above this flat earth. It's about 100 km in distance from the ground. Let alone going to the moon. Moon and sun are plasmas and are same size, those are not solid balls. Of course, moon landing was a Hollywood movie.
@@SpaghettiRealm Creating virus to sell anti virus.
I don’t think it’s over engineered, they’re great tools for specific use cases. The problem is, people want to use them for everything, even for simple projects or projects where the simpler solution would solve the issue without the extra complexity. Lots of devs want the best performance and use experience all the time, they need to better assess the prerequisites.
I do think though we don’t have yet a great solution, a simple and elegant one, part of that is JavaScript. Svelte is a a good way, thinking about reactivity and stores, but it’s a JS superset, a workaround. The browsers should have a programming language thought for the modern web.
I've noticed that in fullstack development all complexity shifted from backend to frontend. Back in the days on a backend you had to do a server (cluster) setup, optimization, caching and using Linux; while on a frontend you cared only about fetching and displaying data.
Now you can just use serverless and forget about infrastructure, while on a frontend you have to think about how to deliver content to end user as fast as possible: picking a correct rendering pattern, code optimization, lazy loading e.t.c.
the thing with front end is that its more a matter of just finding the right premade components and putting them together. In general coding will become easier and easier as time passes. It will still be just as big of an industry though, if not bigger, so I imagine that the top engineers that are creating the architecture and integration will be in very high demand.
Serverless is all fine and dandy until you have to write imperative caching procedures inside a yaml config.
@@ra2enjoyer708 Or you have to redeploy your app and split stacks into nested because AWS doesn't support more than 500 resources and you wouldn't guess that one API method with 2 path params creates 10 resources :D
You have always had to think about how you render a site on the front end client side as long as you weren’t making a static site. And if all your pointing out is people have moved onto dynamic sites more than static sites these days, well then no shit Sherlock. And don’t mistake your little react hobby jobs as the actual industry, because the REAL industry is the people maintaining the servers your “server less” apps are actually running on
And all of them just tend to create user annoyances.
Sick of websites where the chrome loads before the actual content looking for, and gd the code minification in even html CSS class names makes user scripts impossible. And Ffs Load optimization is a joke trying to fix bloat that shouldn't be there.
I was lost already at SSG and at resumability I started having migraines 🤣🤣. Thanks for putting these videos, even though by the time you finish watching it, another 2 rendering patterns just emerged on the market.
This is the video I have wanted for so long!
At this point I absolutely despise web dev but after doing it almost exclusively for the past two years and doing my best to stay up to date with new frameworks and paradigms, I feel like I’m in too deep to quit. JS and front end in general are truly the cigarettes of the software development world.
yeah same thoughts. 4 yrs and i just stay for the money. hate the ever evolving technology.
Let me tell you, it beats having to write OOP Java or Python code, LMAO
I'm actually a java developer lol. You'll get the point of OOP and solid principles if you have 10+ enterprise projects. And in one of those project there is like one god class having 2000 lines of code and they are all doing different things. patterns make it easier to modify and decode and understand what they are doing. since they follow the same approach and patterns.
If your website performs like shit, maybe it's because you're bundling your ENTIRE node_modules and shipping that to the client - fancy frameworks can't solve everything, more often than not it's just shitty programming.
From someone that came frome embeded system, robotics, and numerical analysis software. Web dev is an absolute safe heaven. But then again this is a classic example of grass greener on the other sife
Wooow, I just loved the way you summarized and explain it even though was so short!
great! i really needed a revision of all these things that've been popping out over the last few years
Finally a video that has streamlined the arrival and need all the rendering patterns.
This is what I've been thinking about the past month. Thank you. Wish there was a course to teach all of the implementations. Even if its just a very basic app. Just to experience the differences.
Couldn't have come out at a better time. Thank you as usual :)
thank you so much for this awesome overview, i've been waiting for years to have it all structured
should be on the main channel so more people see it
Dude you're so goated for this. I knew about most of them but it's always SPA vs MPA, SSR vs SSG, or SSG vs ISR, and all that and I didn't know how they all fit together. ill be coming back to this one for sure
did you?
oops not really i quit formally tryina understand webdev i just go by vibes . building my site in hugo just statically, fuck dynamism@@vigneshwarrv
Leave it to programmers to make a thing 10x more complicated in order to squeeze 50% more performance out of an existing design.
- Fantastic overview, by the way!
Most of that complication is the root cause of the low performance that then has to fix itself. With the majority of the perf gains on the backend budget and users left wondering why a page with 3 paragraphs takes 10seconds to load.
50%? You mean 1.3% with 50 times the complexity.
Says the junior dev :)
I love qwik. The idea is just awesome.
I'm totally satisfied with my SPA sites. You can speed up the initial page load with lazy loading too.
It feels like a lot of this stuff is just fixing a problem I don't even know I have.
i agree, i dont think anyone is complaining with at most a 5 second page load
Totally agree, i feel like Js bundle size shouldn't feel like a big problem, even if it takes a couple seconds to load it's going to be cached by the browser... The only real problem with spas is SEO
@@ancellery6430 5 second load???? You must've picked the wrong random number for your example, because I don't think you would genuinely be unbothered by a website taking 5 seconds to load.
Have you seen that Google statistics show that website traffic drops considerably if the website takes more than 2-3 seconds?
I know that if I search for something and the first result doesn't load when I click it, I will click on the next one.
@@MrMudbill if the html loads then data loads in a few seconds I have no problem with that. 5 seconds would be the absolute max
I was instant internet. God bless smart people for making that more feasible. It’s like gaming on 30fps, not impossible but you sure appreciate some sweet 120fps
As usual, a great video! As much as I wanted to learn a new one, it's more satisfying to have it confirmed in a very structured, confined manner.
I would love to see more content on Qwik, the concept is just so cool !
what happened to the "offline first SPA approach" JS frameworks were created to be ?
This is a good video. I never even knew this existed. Thank U
This is the video we all needed, thanks!
Rendering patterns. Brutal.
Love your content so we'll made keep it up man
This is what I needed 🤩
Hi there's also HDA (Hypermedia Driven Applications) - AJAX requests are issued like in an SPA but instead of JSON, a piece of HTML code rendered from the server is returned like in an MPA and hotswapped on place without reload.
HTMX, Livewire (for Laravel), Hotwire, Unpoly are the frameworks fir this.
absolutely.. AJAX - ( Asynchronous Javascript + XML ). But there was a reason to shift from XML to JSON right?. JSON data APIs were reusable for other applications as well right ?
Really great summary!
This was a great video!
really really informative, never knew aout this
You forgot about “html over the wire” thingy, like Rails Hotwire, Phoenix LiveView, Laravel LiveWire. Long gone are the days of php echo 😂
You guys ever watch a video and just KNOW it's gonna save you hundreds of hours of learning and confusion? Yeah, that's how I felt with this one.
Thank you Jeff!! As someone with just a budding interest in web dev, this was insanely useful. I also LOVE how you actually explained the tech behind each idea, rather than just doing what seemingly every framework does and just claiming their solution is the be all end all and "blazingly fast" (citation needed) and "paradigm shifting" (citation needed) and seemingly every other buzzword in existence.
Seriously can't thank you enough man, this video should be required viewing for every web developer!
I love how representative the background memes are
That old McDonalds website completely cracked me up
Very informative!!
Happy new year 🥴😂 - thanks, awsome video as always
Cant wait to spend time to learn new technologies and ways to render to improve performance by 0.2% !
"As the CTO of your project".
I feel personally attacked.
in static web page we can use fetch api or xhr to make changes without refresh , it's possible to make entire spa after loading a static home page
but interactivity and data binding is a problem
@@VivekChandra007 i used a lot of html attribute and local storage to solve that and it work perfectly with incredible performance(the maximum of js performance especially when i avoid variables as possible ⚡⚡⚡).
What I personally like best: static pages, that actually get manually rendered on the client by Javascript. The worst thing: It actually somewhat works. Load times are not horrendous and browser support is OK.
CONTENT first!
absolute legend
SPA / MPA = frontend architecture
SSR / SSG = rendering pattern
Yes, I noticed that too
Fireship is not even a sr developer lol... how can he get basic things like this wrong
And nothing gets rendered by in an SPA?
The different techniques he describes are all forms of rendering.
SSG: render with your build tools
SSR: render with a server side application
SPAs render on the client, and then there are various clever ways to to mix all of the above.
@@asdqwe4427 SPA is not a rendering pattern... its a type of architecture used by frameworks like React...
@@perc-ai React applications are not inherently SPAs. What he was referring to was CSR which SPAs inevitably employ.
I feel lucky to have started web development back when all you had to learn was jQuery / CSS and some backend framework. If I saw this video today as a beginner, I'd probably just switch to Swift or Kotlin and go native 😂
I considered going back to the woods😅
Man I wish my university taught a course on this
It’ll be outdated by the time first semester ends
@@alexinflux lmfao
probably half of these didn't even exist yet lol
@@memeproductions4182 Fourth year comp sci right now is still teaching jQuery as cutting edge so
@@C1maCat jQuery is still an abs W tho
Thank you, that was a great TL:DR; 😮👍🏻
Thank you for this video
to be honest I always felt like web development is easy thats why I took it as a major and didnt regret it :)
Thank you!
When did html+js+css become this monstrosity
When the Dumb Twitter ( now X ) Developers Bros follow the Facebook sh!t, no thinking they have Billions and many people to write this nonsense React where HTML, CSS, JS, and Everything else is in one place! 🤮🤮🤮
I tend to ask myself it
Very well explained.
Literally doing Islands with old school WordPress + SolidJS. Didn't even know what it was called.
Informative.
after going through SPA hell since 2016, tried SSG with nuxtjs, im so glad AstroJS exist
Now Im gonna stick to my island and do content website without all the hassle of js-frameworks
this feels like a such fast paced area. in 95% of cases, it’s still completely fine to use classic SSR (MPA in the video) or SPAs. we’ll see if any of those new things will become reliable solutions
You’ve missed Phoenix LiveView, which uses socket connection to bring real-time UX with very little JS
and Hotwire in RoR, and HTMX in others
Thank you - my indecisiveness has now turned into psychosis.
I like how we created hydration & now we are trying to avoid hydration so that interactive components can do hydration faster.
That's a lot of water.
When talking bout streaming SSR, you should also mention Marko, veteran among the kids.
Very cool to see all these different patterns. Which one is htmx?
We need a "Scala in 100 seconds" video
Thank God!!!!!!
not gonna lie, Danny's homepage is wild
at the end of the day, it doesn't matter if you only want to ship static HTML, everything goes up in flames once marketing steps in and they want to load a ton of their scripts.
Tell them they need to budget ab testing it first to validate thier request won't impact performance increasing the sites total bounce rate and lower conversions for every current live marketing effort costing the business money.
So much complexity for interactivity. Just make use of htmx for dynamic content loading without page refreshes and use something like _hyperscript or Alpine.js for interactivity and behavior. Much easier to build and maintain. Also no build toolchain required!
can we represent rendering in a diagram in the design phase before implementation?
amazing
im waiting for the time when web forms will rise to popularity again.
PHP rocks!
I agree, that hydration is rly stupid. (I am looking at you mismatch errors). The Qwik approach looks nice.
I wrote my first peace of js in 1996/97 and i hated it so much. Hard to imagine it survived for so many years now and still has all that quirks inside.
This is not a problem with Javascript, but with web architecture in general.
If browser engines could natively work with other programming languages, we would still use all these patterns.
@@andsheterliak Good point
@@andsheterliak I can't wait for better wasm tooling and actual UI helpers for it. As of now its only use-case has been business logic but I'm starting to see projects like UnoPlatform, Microsoft Blazor, KotlinJS/JetPack for Web, etc... cooking up some real promising things on the side.
@@andsheterliak it is a problem with javascript. Html, CSS, Web assembly, etc all well made standards built on good initial standards and fromative ideas.
Amazing video!! But I kinda confuse between Partial Hydration, Island and Streaming SSR patterns :s They looked very similar... Can someone explain a little bit?
nice video
I wish that you talk about frameworks like AlpineJS and HTMX as they are giving a new alternative approach for multipage webapps.
They're really just prettier jquery. Not that new.
Very Heavy 🤯
I mean yeah there are a lot of them but it kinds feels like that girl who keeps thousands of dresses in her closet and still keeps screaming "I have nothing good to wear".
All frameworks are garbage :D
At 5:06 Did anyone else hear cat crying in the background when he was talking about code splitting?
In the time it took me to watch this video 3 new JS Frameworks have been introduced.
This is a design pattern that emphasizes core web technologies and allows for graceful degradation of features to ensure an optimal user experience.
Which category do the frameworks like Django, Laravel fall under? They do server side rendering for sure but what they do also seems different than what JS SSR frameworks do.
They are MPAs. So SSR without hydration. There is no client rendering involved.
For qwik lazy loading, doesn't that mean makings tons of tiny requests?
This is my question too
Your simple code snippet explanations of the concept in some of your other videos could be helpful in this one as well. I found this very helpful too. Thanks for educating us.
I understood every part of that and yet I now feel even more confused.
how about htmx
Idk, I just have html pages that have some javascript to get json and display it.
I recall being excited about frontend development, now with all the complexity and heavy reliance on bloated open source dependencies I'm just over it and can't wait to delegate it to someone else.
You don't have to learn all this shit and make websites with the latest frameworks, though. You can write perfectly good websites with vanilla JS. Plenty of people do.
Just choose a good framework and stick with it, you don't need the latest technology to save 2ms of Page load... A lot of important websites are still built using php or even older software
Bloating .. It just started man :)After 10 years,I don't even want to be a dev anymore.
Hey, no mention of Blazor?
Man, You are so funny, that McDonalds offical site.
I still prefer SPAs for actual applications, maybe with some pre-rendering sparkled in
There's nothing wrong with using SPAs if the downsides do not affect your application. E.g internal applications which don't need SEO or taking 1-2 sec longer to load means nothing because the user will keep the browser tab open for hours anyway.
Looking forward to see the next 10 rendering patterns^^
Great video. It's insane that this mess exists just to change how websites "feel". Server side rendering solves an actual technical limitation that static pages have, but after that it's all just fluff. A thousand different frameworks and techniques focused on the fluff
Calling UX fluff is a weird statement.
@@bigmistqke It's fluff. Single page app, islands, etc do not change what a website can or cannot do. They don't provide additional functionality or remove technical limitations... they just do the same thing in a different way for the sake of presentation.
@@maskettaman1488 you say it yourself best: they change how they feel. Something feeling snappy or something not feeling snappy is a difference. You might find that irrelevant and I might find that an odd statement for a web dev.
@@bigmistqke Imagine OP expressing that UX is fluff in a job interview for a dev position. Or the client and/or user headaches your team would have to deal with with someone like that leading it. Or the nightmare of having to explain why you won’t merge OP’s PRs each time if they were instead your junior.
@@maskettaman1488 imagine instagram but every time a msg is sent the page has to refresh.
switched all apps to astro dont want to use anything else 😅
I just transitioned from a full Django MPA to Django REST API + Vue SPA. I'm kinda lost on SSR. Like how does your frontend fetch data to from backend when it's all on server? I also don't understand why Fireship calls Next a backend framework while other people say it's a frontend framework.
So that's the thing, SSR isn't all on the server. The part that is ran server-side is generating the initial HTML, the rest (state management, dynamically changing content, routing, etc...) is ran on the client-side.
In Django words, Nuxt SSR will generate your views just like Jinja templates, the resulting HTML is what is shipped to the visitor when he makes the request but then anything else that is happening after through user-interactions (button clicks, form submissions, etc...) will be executed inside the browser as if it was a piece of jQuery code.
The reason why it might be confusing for you is because both the server part and client part are written in Javascript and inside the same file which isn't straight forward. This is why we use Vue's lifecycle hooks:
mounted () {
// ...
}
Do you get it ?
So this is what uncle Ted meant by industrial society and its consequences.
Makes sense now why I always hated Amazon's website experience.
MPAs use SSR to display content, so they're basically the same thing
Feels like I just ran a marathon, after watching that LOL.
@Beyond Fireship I love you
♥️
2:32 google since then has this fixed. they can see spa pages pretty easily now. so i dont really think its a problem now but it was back then
How the turntables, JavaScript adapting to Java and Spring features