WTF Do These Even Mean

[@JominJose]

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

[@carlosmspk]

I would deeply disagree, most people in the industry begin by discussing this, and it's the first dev step of any new product Maybe you meant to say it's overlooked by people learning/teaching web dev?

[@JominJose]

@@carlosmspkYes, that's what I meant

[@venkat.sairam]

🎯 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

[@saralightbourne]

😰😰😰

[@69k_gold]

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

[@musazahoor]

thnks

[@lakshmann9825]

noice tq

[@deanarvin]

This is a great way to picture things. Thank you.

[@nid30]

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...!!🙌🙌🙏🙏

[@RomanWaves]

Thanks for the overview. It would be great to have existing examples for each technique to make it more clear

[@pxkqd]

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.

[@ansh_mittal]

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

[@callixtegirard4782]

Kyle, your videos about React and also web-related topics like this are the best I found. And also, yes, this topic is so overlooked and you explained it so well. Kudooooos

[@theisoj]

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

[@vaaljan]

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

[@incarnateTheGreat]

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.

[@Akash_Unreal]

What's the issue with re hydration explain a bit more brother

[@eyadelghobary9093]

This is a great video, it explains all terms in a very way!

[@MrHellmager]

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

[@ff-mj2fv]

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

[@somethingwine]

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!

[@atmanatos7165]

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

[@SLRModShop]

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 😁

[@sicfxmusic]

When artists' jobs are in jeopardy and now they're forced to learn programming.😅

[@g_pazzini]

dude

[@HighfieldFarm-w1z]

your an inspiration to us all…

[@motabhai8767]

so you never used CSR. so only php till now ?

[@systematicpsychologic7321]

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.

[@afonsonzango]

You make everything look easy! Thanks bro!

[@FunctionGermany]

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 😂

[@smooticus1691]

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

[@keithjohnson6510]

Yes, especially when the site has lots of dynamic content. There is currently lots of hype about all variants of SSR, and with all this hype developers have forgotten about the benefits of CSR, very stange. It's never been a better time to develop with CSR, so it's not something I'm moving away from any time soon.

[@VioNectro]

If your clients can’t render your page with csr in todays age then there is a serious issue with your page.

[@IvanRandomDude]

Yes, in principle. However, CSR sites can have huge problem with waterfalls (especially if you are not careful how you fetch the data) which can lead to spikes on the server and degraded performance. None of these rendering strategies are silver bullets and have their pros and cons. That's why most modern frameworks allow you to use all of them inside the same application and decide per page basis how is your page going to be rendered. So one page can be prerendered and served as static content, other page might use SSR while some other page can be pure CSR.

[@keithjohnson6510]

@@IvanRandomDude "However, CSR sites can have", the main point here is `can have`, SSR can have issues if badly written. But based on what the poster asked about server costs, unless SSG all the other SSR variants including, Reacts new RSC etc, will all come with server costs. But like you say, a hybrid option would certainly be a good idea, especially a mix of SSG & CSR, this mix should then keep server costs down.

[@ExtraTurtle]

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?

[@alivenumber5]

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.

[@Manish___Choudhary]

Which will be best for an e-commerce website?

[@nikhilsinha2191]

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

[@yoavmelamed1522]

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?

[@cherubin7th]

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

[@repairstudio4940]

Too bad most suffer from CRS and will never remember CSR or any of this. 😂

[@cameronadams4366]

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

[@morraez4772]

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

[@DamirSecki]

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

[@robinparadise]

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

[@prographics2788]

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

[@chasec4897]

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?

[@ticlaudeberube]

Hi, this is a very good topic. However, it is missing two key elements: Progressive Enhancement and accessibility (a11y). I see the traditional approach and SSR as similar, both allowing for Progressive Enhancement to be a primary focus, offering the benefits of SEO and accessibility. I understand the hype around these new methods, but I believe that Javascript frameworks (SPA) are meant to address concerns beyond just website rendering. Using them for all purposes seems more like a marketing strategy than a technical necessity. Are we trying to reinvent the wheel here?

[@SERGIVILAORIOL]

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

[@vichetnoeng706]

Which one is great for SEO?

[@tom_cl_1342]

I guess all of them except CSR? I hope one day the bots are "smart" enough and we don't need to worry about SEO when using CSR😅

[@Dev-Siri]

​@@tom_cl_1342 even if the bots were "smart" enough, CSR SEO is far from ideal

[@DamirSecki]

All of them are, even CSR. Sionce most of the search engines run headless browsers and compile and run JS just fine. But you do get some benefits from SSR/SSG and the other one in terms of speed, since the search engines favor speed a bit more (especially SSG is great for that).

[@akshaygadekar3089]

There is also 'on-demand static regeneration'

[@vampiping]

NextJs is the combination of SSR and CSR

[@AvikGhosh-d8t]

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.

[@sae11]

How about React Server Components (RSC)?

[@kueifengtung]

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

[@mattskelton7471]

I miss the good 'ol LAMP days.

[@fordycegozali241]

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?

[@Abul4u]

what is the difference between traditional PHP(any CMS) SSR and JS framework (like Angular, React) SSR

[@karimbouche3563]

Thank you kyle ,excellent video ,i like your content

[@LaLoses]

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?

[@LaLoses]

Great video tho

[@shgysk8zer0]

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

[@aqibmalik6313]

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

[@arijitroy5695]

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

[@mme725]

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.

[@CodingPuff]

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

[@codeingo2006]

dude great video

[@alitonoliveira1700]

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

[@zaynelovecraft]

You have to set when the cache should re validate the data.

[@devrajparida828]

Does ISR works well with SEO?

[@aytviewer2421]

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.

[@stacked-dev]

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

[@ahmedahmedx9600]

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 !

[@mikescholz6429]

My first SSR is old enough to legally drink already lol

[@kemekenneth]

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.

[@avertry9529]

Thanks, please do SolidJS tutorial

[@aleattorium]

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

[@jonathangamble]

No Black Friday deals?

[@RandomGeometryDashStuff]

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

[@bo-kaiwang5189]

To my understanding, 'rendering' in SSR and CSR means to generate your html contents (texts, images, etc), so in SSR, the server has already generated those things and what the client only needs do is produce the visual representation of your html contents. On the other hand, in CSR, the server doesn't generate your real html contents. The client generates those things and produces the visual representation

[@iMagicGraalOnline]

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

[@firstname4337]

CCR - creedence clearwater revival

[@coldcoder23]

in CSR build time should be less.

[@samislam2746]

Please make server components video 😢

[@re.liable]

ISR: International Space Ranger

[@bmehder]

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.

[@mecozir]

if run is style basic make does code exit password

[@regime5070]

I know them but not as acronmysm

[@sandorturbucz425]

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.

[@zaynelovecraft]

ISR FOR THE WIN

[@saputrauta09]

Thankyou!

[@bobkazamakis5169]

great job

[@mecozir]

related table throw IDE

[@TheBlackGentlemanGeek]

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.

[@user-iu6hu8oq5p]

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?

[@ДенисМалышок]

Love there colors)

[@TheTrainWatch]

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

[@everythingisfine9988]

Except for the initial page load, CSR is typically faster than SSR. Because you're only getting data. All the styling and functionality is already in the client browser. It's even possible to anticipate user interaction and pull data before the user moves onto a new screen. Thus creating a seamless app like experience.

[@mr_hassanali]

Thanks

[@typoerror177]

you forgot one acronym: PHP

[@code.design]

Just like the Beatles. I use USSR.

[@CheskerHard63]

wow thanks you

[@redgood5879]

they means: CHAOS

[@ShannonBelt-x6n]

Elliot Ways

[@wekesirken6961]

What's up Kyle

[@TylerR909]

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

[@64_bit_coding]

hello

[@cv3509]

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

[@Joe-SoftwareEngineer]

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

[@paxdriver]

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.

[@axMf3qTI]

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.