WTF Do These Even Mean
Vložit
- čas přidán 10. 06. 2024
- React Simplified Course: reactsimplified.com/?...
There are so many acronyms when dealing with rendering and they all sound so similar. It is tough to know what each acronym means and which is the best option for you. That is why in this video I will be breaking down exactly what each acronym is, the pros/cons of each, and what applications they are best used for.
📚 Materials/References:
React Simplified Course: reactsimplified.com/?...
React Job Board (CSR Example): react-simplified-job-board.ne...
My Blog (SSG Example): blog.webdevsimplified.com/
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:33 - Definitions
01:05 - How Websites Work
03:45 - CSR
05:17 - SSR
06:42 - SSG
09:05 - ISR
12:04 - Comparison
#CSRvsSSR #WDS #SSGvsISR
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
One of the most overlooked topics in web dev. Thank you for making it so simple and clear!
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?
@@carlosmspkYes, that's what I meant
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...!!🙌🙌🙏🙏
🎯 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
😰😰😰
You explained this really well! Thanks Kyle as always! 👍👍
You make everything look easy! Thanks bro!
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.
This honestly been in the back of my mind for weeks. Thank you for addressing this topic.
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.
This is a really goos explaination. would you consider doing a part 2 giving some code example for each type?
One day I saw this channel and now I am very confident in web dev thanks dude ❤❤❤🎉
Hi Kyle. Been a while since your last comprehensive MySQL course. Please do a fully comprehensive one that touches the advanced levels.
Thank you kyle ,excellent video ,i like your content
by the way I love your work.
I have great admiration for you.
Keep up the good work. ❤❤❤
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
thank you! i love this contents
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?
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
hey kyle, when will your next.js course be released ?
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...
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.
What's the issue with re hydration explain a bit more brother
There is also 'on-demand static regeneration'
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.
Thanks, please do SolidJS tutorial
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?)
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 💀)
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 !
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?
Which will be best for an e-commerce website?
CCR - creedence clearwater revival
Looking at your summary graph it’s almost as if we are going back to the old way progressively😂
CSR is best for free and open source stuff because of money constrains.
Too bad most suffer from CRS and will never remember CSR or any of this. 😂
Thankyou!
Correct me if i am wrong : the build process happens ONCE, after any new codes changes, by the HOSTING platform (Vercel, Netlify etc) ?
One question, wouldn’t a CSR website have cheaper server costs than a SSR website? If so, is it by a significant amount?
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.
If your clients can’t render your page with csr in todays age then there is a serious issue with your page.
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.
@@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.
@WebDevSimplified can you make a video on SSR , SSG, ISR using the next 14
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 😂
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 😁
When artists' jobs are in jeopardy and now they're forced to learn programming.😅
dude
your an inspiration to us all…
so you never used CSR. so only php till now ?
So for spring And spring boot, which type is it? Ssr?
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
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?
great job
How about React Server Components (RSC)?
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.
Could you please provide an examples of each different technique in your CZcams channel.
Love there colors)
Thanks
Does ISR works well with SEO?
For some reason revalidate does not seems to work for ISR. For me, ISR is working just like SSR.
You have to set when the cache should re validate the data.
My first SSR is old enough to legally drink already lol
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
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 miss the good 'ol LAMP days.
For aaall that isn't it less complex to just do things in a framework like Elixir and use liveview?
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.
Please make server components video 😢
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
wow thanks you
if run is style basic make does code exit password
No Black Friday deals?
02:18 how is it server rendered if server just sends html and client does rendering to screen?
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
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?
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?
Great video tho
related table throw IDE
in CSR build time should be less.
What's up Kyle
ISR FOR THE WIN
I know them but not as acronmysm
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.
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.
they means: CHAOS
ISR: International Space Ranger
Just like the Beatles. I use USSR.
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.
you forgot one acronym: PHP
hello
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.
Didn't even say CMS once! Edit: 'ope, there it is
Hey Kyle, Those are not Acronyms. They are called abbreviations or Initialism. 😊
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.
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.
Which one is great for SEO?
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😅
@@tom_cl_1342 even if the bots were "smart" enough, CSR SEO is far from ideal
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).