Much awaited topic covered from my favorite educator!! Penned down every single word that you explained... This really helps when referencing and revising the topics. And not to forget, Kyle you explained the concept of Hydration so beautifully and concisely, sharp on point. Heartfelt appreciation for your efforts...!!🙌🙌🙏🙏

You explained this really well! Thanks Kyle as always! 👍👍

One of the most overlooked topics in web dev. Thank you for making it so simple and clear!

🎯 Key Takeaways for quick navigation: 00:13 📚 *In this video, the presenter explains the meanings of acronyms like SSR, CSR, SSG, and ISR, as well as their differences and use cases in web development.* 02:08 🖥️ *Server-Side Rendering (SSR) involves minimal build time, with most work happening on the server. It's suitable for traditional server-rendered applications.* 04:02 💻 *Client-Side Rendering (CSR) sends HTML and JavaScript to the client, with all rendering happening on the client side. Common in React applications.* 06:50 📦 *Static Site Generation (SSG) builds all HTML pages at build time, resulting in fast load times. Ideal for static content websites.* 09:22 🔄 *Incremental Static Regeneration (ISR) combines benefits of SSG and SSR. It generates some pages at build time and others on-demand, useful for dynamic content with shorter build times.* 11:54 🌐 *The choice between these approaches depends on where you want to allocate the most time and workload: client, server, or a balance between them, based on your project's needs.* Made with HARPA AI

Most important things one needs to know are: Client is just the browser Server is a computer that serves HTML, CSS, and JS files to the browser(a server can do a lot more, but we are talking about web server) Browsers were designed to run HTML, CSS and JS code, which were intended as a way to beautify the website But people realised the power of JS in this, so now we got JS-based apps in CSR, where JS does everything you need in the application, and only requesting business data(basically the data they can't store in your PC because it's valuable and/or large data) But then, people realised that this doesn't benefit clients who have their PC cooking up the room with all the JS it's running, so they made it so that the entire logic is handled in the web server itself, and what we get in the end is just enough markup, styles and code to present the website, and everything else related to the application is done by the server And anything else is clever techniques in between these two

This honestly been in the back of my mind for weeks. Thank you for addressing this topic.

You make everything look easy! Thanks bro!

Please keep on posting top notch videos and i especially like your shorts 🔥

I just wanted to say I watch all your vids and you're great for all things web dev. Thanks a ton for the effort, I keep picking up new tricks for you.

Which one to use depends on the use case. SSR works for everything, but has the most downsides. SSG is good for docs and other non dynamic content that doesn't grow a lot. ISR is the best for websites. CSR is best for apps.

One day I saw this channel and now I am very confident in web dev thanks dude ❤❤❤🎉

This is a really goos explaination. would you consider doing a part 2 giving some code example for each type?

Hi Kyle. Been a while since your last comprehensive MySQL course. Please do a fully comprehensive one that touches the advanced levels.

I accidentally clicked this video and really enjoyed it! Love how you explain things so clearly! I am a complete beginner so some of the terms are still a lil abstract for me; but overall I find it very informative and will definitely come back to this again when I learn more about web dev! Thank you!

Thank you kyle ,excellent video ,i like your content

thanks for the info you really were helpfull I will go with ssr for my blogs as it will contain content of more than 1 user and needs seo as well which I will handle from my backend django admin server

by the way I love your work. I have great admiration for you. Keep up the good work. ❤❤❤

You mentioned SSG can be complicated when you have a site like ecommerce, and it has tons of products. But usually, products are stored in the DB, and you only have one page that shows product details I assume SSG doesn't fetch all items from the DB and generate a static page for each product? or am I wrong?

dude great video

Thank you for the video! What would you use for building an admin dashboard app (for example: CRM app or something like that) CSR or SSR? why?

Good points all around. I generally stick with SSR, which is what Next.js has out of the box. That said, with React Server Components now available, we can go about dynamic data calls that can be made safely via the server. The only issue is, re-hydrating takes a bit of wizardry. Once that is sorted, I feel like I would stick with that approach: let the server do the heavy-lifting.

hey kyle, when will your next.js course be released ?

I’m not sure it is fair to show all the bars as the exact same size. SSR can eliminate round trip network calls that happen with CSR

I think thios is very deceiving... all of the methods should be hybrid... I wish you would mention, the first load is SSR or CSR or SSG, etc... after it is streamed to the client... they can become (and more often than not) a normal SPA, where the bits are then hydrated asyncronously.... especially when you mentioned CSR... and that the server is not doing almost any work... that is obviously very false... or deceiving... the server does not do anyt work to serve initial html and js... but does plenty of work to fetch the data via API (or other protocols)... also for SSG this is the case... ASTRO pages are not just static pages and can be hybrid - the beauty is the super fast FIRST load... but then if you want your page to be interractive and get fresh data asybc load, it can be done... hence the island architecture...

CSR is best for free and open source stuff because of money constrains.

There is also 'on-demand static regeneration'

CCR - creedence clearwater revival

You know, I knew this should have been javascript related. However I still for some reason couldn't get what CSR was outside of that thing I used to generate to get an SSL certs for clients.

I mostly do some combination of SSG with selectively CSRed components. I think web components/custom elements are pretty awesome there since they don't rely on some JS framework or routing or state or anything, so it's less expensive to mix the two strategies (had I built them with React, well... if I'm loading the whole framework, why not just build a React site?)

Thanks, please do SolidJS tutorial

Actually you can reduce the build time of SSG a lot not using a lot of dependencies on Astro or Hugo... There are a lot of SSGs that can build thousands of pages in less that a second (Hugo specially do that 💀)

Looking at your summary graph it’s almost as if we are going back to the old way progressively😂

Do you have a video of how to implement SSR step by step? I haven’t been able to get SSR to work with react.

If I have a news portal that is built using React and I have about 10 articles per day, is it still recommended to use SSR for better SEO?

mostly correct, but i have a few gripes: SSR and static files is how the web started and people already wrote their own SSG systems back then. what's new about next.js's SSR is the hydration where you essentially have SSR and CSR, so the "best experience" but also the highest amount of work with server and client combined. and now we have server components where we can choose to not hydrate some components and reduce CSR. another big advantage of SSG or SSR are link previews on social media and messengers. and finally, these strategies are often mixed. for example, you can SSR the SEO and link preview relevant parts but then use CSR only for the rest of your website. or you can use SSG with (next without server components) or without (astro) CSR. or selective CSR with astro. so in reality most projects are more complicated than this, especially if the dev doesn't know what they're doing 😂

Hi webdevsimplified, please i have a request, can you make a video and show some tips and tricks to make the website fully responsive with all screens ? Thank you very much for your content !

Which will be best for an e-commerce website?

@WebDevSimplified can you make a video on SSR , SSG, ISR using the next 14

It's easy, SSR is Screen Space Reflection, I clearly don't need this video, I'm just going to watch it for entertainment purposes 😁

Thankyou!

great job

How would the graph Client / Server / Build be if the environment we were talking was virtual reality videogames or to make it less specific multiplayer videogames, how would the graph be for SSR and CSR, clearly similar, but would the build be change for another part of the system. If so could someone show me please or explain it? Thanks

Correct me if i am wrong : the build process happens ONCE, after any new codes changes, by the HOSTING platform (Vercel, Netlify etc) ?

So for spring And spring boot, which type is it? Ssr?

How about React Server Components (RSC)?

Does ISR works well with SEO?

Minimize the amount of work done on the client. Minimize the amount of work done on the server during route handling and general GET requests. But during either the build step or application back-end startup you cache everything you can in-memory. And what you can't fit in memory you save as pre-cached html on disk. This is the way.

One question, wouldn’t a CSR website have cheaper server costs than a SSR website? If so, is it by a significant amount?

But how is any one of the methodologies created ? how do I create a web app having ssr or isr or even csr? I know on NextJS we created specific components to be csr, but what about isr and the others?

Did I hear "everytime that I create a new blog article, I just rebuild..." I want the benefit of SSG without rebuilding anytime I publish a new article.

I miss the good 'ol LAMP days.

Could you please provide an examples of each different technique in your KZfaq channel.

Love there colors)

For some reason revalidate does not seems to work for ISR. For me, ISR is working just like SSR.

I would love to see another channel called just "Dev Simplified" where Kyle helps us out with other languages and areas of development. Would be very refreshing

Thanks

Please make server components video 😢

For aaall that isn't it less complex to just do things in a framework like Elixir and use liveview?

My first SSR is old enough to legally drink already lol

SSR -> Doing the work on your server, means you pay right. If the user does the work. nobody pays. So when that scales to like Million users you gonna get a pretty aws bill. Think combination of csr and ssr makes sense to me

02:18 how is it server rendered if server just sends html and client does rendering to screen?

CSR = Client Service Request It's been used for 20-30 years. This is an ongoing problem it the IT/Development world. Folks keep repurposing acronyms that are already in place.

No Black Friday deals?

if run is style basic make does code exit password

wow thanks you

You missed one thing. 💸💸Pricing!!! If the server does many builds, it will increase the memory usage and will impact the monthly bill. Or doesn't? What its your experience? Going full CSR is the cheapest?

Thank you for the video. I'm not sure where the breaking point for CSR is exactly though. I've never seen any client-side problems with CSR for the sites I've built. Is there like a rule of thumb for this that is more specific than just "as your application scales"? And how should one exactly look for problems with CSR?

What's up Kyle

What would we do with Kyle? We got to pull together and get my man a double guitar stand and maybe a picture or two for those walls.

in CSR build time should be less.

related table throw IDE

ISR FOR THE WIN

Wheel reinvented over and over again and again. Let me guess the next BS acronym in this series: HSG: Hybrid Site Generation - this combines the benefits of SSR, SSG and ISR, with literally no downsides at all - all of your pages can be generated in a mixed manner, some parts of the page is staticly built, other chunks are dynamic and hydrated, with interactivity. Your turn what's next? Hmm maybe I will write a framework for writing frameworks that can produce a new page generator strategies in no time.

I know them but not as acronmysm

they means: CHAOS

ISR: International Space Ranger

hello

you forgot one acronym: PHP

They should add SSJ, SSJ2, SSJ3, etc., to make it more dragon ball. What about USSR for the OG’s… CIA, FBI, anyone? Relax guys, I’m trolling.

Just like the Beatles. I use USSR.

Didn't even say CMS once! Edit: 'ope, there it is

Hey Kyle, Those are not Acronyms. They are called abbreviations or Initialism. 😊

so where does htmx fall? it's the old way or ssg with dynamic html insert into the page, i'll guess that part ssr. when i first heard about ssr i thought that's what it meant html snippets send to the browser.

SSR? CSR? SSG? ISR? WTF? 😄😄

They are "initialisms" not "acronyms" I'm not trying to be a douche correcting you, but I believe educational content merits strict scrutiny for posterity, that's all.

Which one is great for SEO?