What are Server Side Rendering (SSR) & Client Side Rendering (CSR) | Pros + Cons

Learn to Code 🔥 www.smoljames.com/roadmap
Build a resume ✅ www.hyr.sh
In this video we understand what client side rendering and server side rendering both are. We also look at a practical Node.js + Express example of how each work and their respective advantages + disadvantages + use cases.
#webdev #SSR #CSR
🔥 All my links
www.smoljames.com
🔖 Topics Covered
- Client side rendering (CSR)
- Server side rendering (SSR)

Пікірлер: 66

  • @gabg3686
    @gabg3686 Жыл бұрын

    I don't know how many resources I've read/watched that explained the difference but didn't show it. I just couldnt grasp it until now. This helped so much, thank you!

  • @Smoljames

    @Smoljames

    Жыл бұрын

    Glad it helped :)

  • @hayleyt.4680
    @hayleyt.4680 Жыл бұрын

    Love this explanation, straight forward with example! Thanks a lot for this

  • @jawadsrour8490
    @jawadsrour8490 Жыл бұрын

    Great video explaining the advantages/disadvantages of each!

  • @al-doori2392
    @al-doori2392 Жыл бұрын

    Man thank you so much, simple and informative, wish you all the best.

  • @Simplymt1
    @Simplymt125 күн бұрын

    Simple to understand and beautifully explained, thank you so much!

  • @gorandamchevski
    @gorandamchevski2 жыл бұрын

    Great insight, nice to know that a combined approach can open more options for an app. TY

  • @Smoljames

    @Smoljames

    2 жыл бұрын

    glad you enjoyed :) thanks for the support too

  • @mayurbanta
    @mayurbanta3 ай бұрын

    To the point, best explanation so far

  • @warrayn10
    @warrayn109 ай бұрын

    Thank you! Such a simple explanation! :)

  • @cyberstarcritic
    @cyberstarcritic Жыл бұрын

    What a bos!! u literally showed us the difference, by not just explaning it niec!

  • @kereo32
    @kereo3211 ай бұрын

    Clean and on point explanation! Thank you.

  • @Smoljames

    @Smoljames

    11 ай бұрын

    Glad you enjoyed it :)

  • @mirzafarazbaig8945
    @mirzafarazbaig8945 Жыл бұрын

    Great video with example.

  • @ibtesumrezaaninda323
    @ibtesumrezaaninda323 Жыл бұрын

    Oh! Such quality content! Love this!

  • @Smoljames

    @Smoljames

    Жыл бұрын

    Thanks for the comment!

  • @user-oy4kf5wr8l
    @user-oy4kf5wr8lАй бұрын

    great explanation! thx buddy

  • @shulin29
    @shulin297 ай бұрын

    nicely explained, thanks! :D

  • @user-vl4gh7pt3d
    @user-vl4gh7pt3d8 ай бұрын

    Finally someone who can actually explain it.

  • @Smoljames

    @Smoljames

    8 ай бұрын

    Cheers broski :)

  • @andydallo5826
    @andydallo5826 Жыл бұрын

    Couldn't make it clearer. thank you !

  • @Smoljames

    @Smoljames

    Жыл бұрын

    glad you found it helpful :)

  • @holyage3128
    @holyage3128 Жыл бұрын

    man, you did it clear as possible!!!!

  • @Smoljames

    @Smoljames

    Жыл бұрын

    Glad you found it helpful :)

  • @ganeshshetty8441
    @ganeshshetty8441 Жыл бұрын

    Awesome Video, this is the best video on these Thanks

  • @jongwoolim616
    @jongwoolim616 Жыл бұрын

    Your explanation is a boss

  • @creed404
    @creed404 Жыл бұрын

    I can say that this is the explanation i wanted to hear 😅

  • @solo-yl8uc
    @solo-yl8uc Жыл бұрын

    Very clear explanation, thanks so much.

  • @Smoljames

    @Smoljames

    Жыл бұрын

    Happy it helped my friend :)

  • @absurd0000
    @absurd0000 Жыл бұрын

    Excellent way to explain this. Thank you

  • @Smoljames

    @Smoljames

    Жыл бұрын

    Happy to be of service:)

  • @Becky1498
    @Becky14982 жыл бұрын

    thanks for sharing !

  • @haythembenkhlifa3197
    @haythembenkhlifa3197 Жыл бұрын

    thank you!

  • @brunocapitelli7754
    @brunocapitelli77542 жыл бұрын

    Great content! Straight to the point and just enough detailed. Btw whats that theme?

  • @Smoljames

    @Smoljames

    2 жыл бұрын

    Glad you enjoyed :) and it's 'Tomorrow night blue'

  • @anton-r
    @anton-r Жыл бұрын

    like ++. super tnx , fast and to the point

  • @Gashvah
    @Gashvah7 ай бұрын

    Thank you

  • @user-rs4hf7ud2e
    @user-rs4hf7ud2e Жыл бұрын

    Thanks

  • @martapfahl940
    @martapfahl940 Жыл бұрын

    So if I get it correctly if the website is hosted up on an extremley fast server you get this instant page loads right? And then the dynamic content that NEEDS to be rendered on client side is being loaded there but you already see the rest of the page, this is freaking cool.

  • @grasstoucher856

    @grasstoucher856

    Жыл бұрын

    it's freaking cool indeed!

  • @ashishkumarsahoo6966
    @ashishkumarsahoo69668 ай бұрын

    And it's best easiest explanation

  • @Smoljames

    @Smoljames

    8 ай бұрын

    Cheers broski :)

  • @cinammondream
    @cinammondream Жыл бұрын

    Oh my gosh amazing video informative and helpful. Are you in New Zealand?

  • @Smoljames

    @Smoljames

    Жыл бұрын

    Glad you found it helpful! And yes I am in New Zealand - good guess haha

  • @cinammondream

    @cinammondream

    Жыл бұрын

    Haha thanks I picked up on the accent - all my favourite movies are Kiwi (whale rider, hunt for the wilder people) and I've watched so much 'How To Dad' on KZread and I love artists like Princess Chelsea - i realised quite far into the video that you weren't just Australian. Please humour me, I'm British!!!

  • @newygreek
    @newygreek Жыл бұрын

    Is there an app in Chrome that identifies on the front end browser which elements are not SSR? And in addition which data on the front is not being parsed by SSR? So for example I have seen product URLs not SSR, no html a href tags which is problematic for SEO? Something to see quickly rather than investigating and inspecting elements?

  • @harisjose2050
    @harisjose2050 Жыл бұрын

    ❤❤

  • @joshuabrard1061
    @joshuabrard10612 жыл бұрын

    Good video

  • @Smoljames

    @Smoljames

    2 жыл бұрын

    Tyvm my friend :)

  • @Konslufius
    @Konslufius9 ай бұрын

    So the initial HTML is SSR because it comes direktly from the server, the and part with the fruit is CSR, even tho the information comes from the server, but in the end is rendered by the client.

  • @koolmo
    @koolmo7 ай бұрын

    great video!

  • @Smoljames

    @Smoljames

    7 ай бұрын

    Cheers broski!

  • @haticesurumlu1833
    @haticesurumlu18339 ай бұрын

    Hello the video is very helpful for me . can you share this codes?

  • @kristijanlazarev
    @kristijanlazarev Жыл бұрын

    Very nice man! fr

  • @VishalPrajapati-oh3zo
    @VishalPrajapati-oh3zo2 жыл бұрын

    Hey... Can you make video for ssr in react v18 from scratch?

  • @Smoljames

    @Smoljames

    2 жыл бұрын

    I sure can 😊

  • @diegounanue
    @diegounanue2 ай бұрын

    What happens if you have css?

  • @KeannuZeigfeldAtilano
    @KeannuZeigfeldAtilanoКүн бұрын

    Doesn't SSR take more resources on your server since it's gonna be the one generating the page?

  • @Smoljames

    @Smoljames

    Күн бұрын

    Not always - a lot of services build the static server pages once and cache them and it's very efficient

  • @dan_b8982
    @dan_b8982 Жыл бұрын

    Nice explanation - your CSS is taking ages to load though ;-)

  • @Smoljames

    @Smoljames

    Жыл бұрын

    Haha man's got an eye for detail

  • @GlennRobinson777
    @GlennRobinson777 Жыл бұрын

    I get where you're coming from, but the premise of "2 processes rather than 1" isn't 100% accurate. Something has to process the data to make the HTML representation, so if that is completed server side that means 1 longer process rather than 2 short ones (you're not magically removing the need for that process, just shifting which side is responsible). As such if you heavily rely on data formatting you need to scale your server resources to cater for this - so I just don't get how it's such a big saving on time?

  • @dArKoMeGa89

    @dArKoMeGa89

    Жыл бұрын

    Cache

  • @Ionut-lm9cj
    @Ionut-lm9cj Жыл бұрын

    Abcd

  • @SodaPy_dot_com
    @SodaPy_dot_com4 күн бұрын

    good😮