And the best part is the moment you choose one, something new comes out and you get to learn that instead!

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

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!

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 :)

I didn’t even know there was 10 rendering patterns possible hahah

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'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.

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!

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.

You forgot about “html over the wire” thingy, like Rails Hotwire, Phoenix LiveView, Laravel LiveWire. Long gone are the days of php echo 😂

great! i really needed a revision of all these things that've been popping out over the last few years

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.

Wooow, I just loved the way you summarized and explain it even though was so short!

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

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 :)

Finally a video that has streamlined the arrival and need all the rendering patterns.

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 love qwik. The idea is just awesome.

This is the video I have wanted for so long!

"As the CTO of your project". I feel personally attacked.

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

This is the video we all needed, thanks!

I love how representative the background memes are

This is a good video. I never even knew this existed. Thank U

Really great summary!

I would love to see more content on Qwik, the concept is just so cool !

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.

Love your content so we'll made keep it up man

really really informative, never knew aout this

Very well explained.

Thank you, that was a great TL:DR; 😮👍🏻

It is always depends on the clients needs but ... man this is very hard and comprehensive.

Happy new year 🥴😂 - thanks, awsome video as always

This was a great video!

Rendering patterns. Brutal.

Very informative!!

This is what I needed 🤩

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!

Thank you for this video

SPA / MPA = frontend architecture SSR / SSG = rendering pattern

Man I wish my university taught a course on this

Thank you!

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.

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

Literally doing Islands with old school WordPress + SolidJS. Didn't even know what it was called.

absolute legend

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

amazing

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

to be honest I always felt like web development is easy thats why I took it as a major and didnt regret it :)

Very cool to see all these different patterns. Which one is htmx?

Cant wait to spend time to learn new technologies and ways to render to improve performance by 0.2% !

Thank God!!!!!!

not gonna lie, Danny's homepage is wild

You’ve missed Phoenix LiveView, which uses socket connection to bring real-time UX with very little JS

I agree, that hydration is rly stupid. (I am looking at you mismatch errors). The Qwik approach looks nice.

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 understood every part of that and yet I now feel even more confused.

At 5:06 Did anyone else hear cat crying in the background when he was talking about code splitting?

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.

nice video

Idk, I just have html pages that have some javascript to get json and display it.

we go back to static html...bc it works

can we represent rendering in a diagram in the design phase before implementation?

I wish that you talk about frameworks like AlpineJS and HTMX as they are giving a new alternative approach for multipage webapps.

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".

We need a "Scala in 100 seconds" video

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 😂

how about htmx

Thank you - my indecisiveness has now turned into psychosis.

Feels like I just ran a marathon, after watching that LOL.

im waiting for the time when web forms will rise to popularity again.

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.

this is what i want

PHP rocks!

I just use two, Static Site Gen and Server Site Render

Looking forward to see the next 10 rendering patterns^^

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

@Beyond Fireship I love you

Very Heavy 🤯

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?

My GAWD [snatches sun glasses off of face]

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.

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.

It'd be good if you could do a series looking at the front endarchitecture of popular sites.

does qwik serialize all the javascript state ? this mean it works with canvas ? this does not seem to be effective for canvas rendering

PHP is huge (server side) template language

Hey, no mention of Blazor?

In short, this video discusses various rendering patterns for web apps. A rendering pattern is the process of turning data and code into HTML. It covers 10 different rendering strategies or architectures that can be used when building a web app, including static websites, multi-page applications, single page applications, and server-side rendering. Pros and cons are broken-down for each approach and frameworks that support them, such as Hugo, Jekyll, Ruby on Rails, Django, Laravel, WordPress, AngularJS, React, NextJS, and Nuxt. As conclusion, the most popular rendering strategy as of today is likely the server-side rendering with hydration to client-side JavaScript, but it still has some drawbacks.

Please make a video about HTMX

So this is what uncle Ted meant by industrial society and its consequences.

In the time it took me to watch this video 3 new JS Frameworks have been introduced.

That old McDonalds website completely cracked me up

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.

This is a design pattern that emphasizes core web technologies and allows for graceful degradation of features to ensure an optimal user experience.

switched all apps to astro dont want to use anything else 😅

It's like after SSG, almost every pattern covers up the demerits of a previous pattern. 😂

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.