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

Поділитися
Вставка
  • Опубліковано 14 лис 2024

КОМЕНТАРІ • 73

  • @Smoljames
    @Smoljames  2 місяці тому

    Cheers for watching 💛 Get hired faster with a better resume @ www.hyr.sh

  • @gabg3686
    @gabg3686 2 роки тому +68

    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!

  • @hayleyt.4680
    @hayleyt.4680 Рік тому +22

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

  • @لوسيفرجبريل
    @لوسيفرجبريل Рік тому +1

    Finally someone who can actually explain it.

  • @trungbui7518
    @trungbui7518 3 місяці тому +1

    This video is worth more than a ton of blogs

  • @Simplymt1
    @Simplymt1 4 місяці тому +1

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

  • @basicdeveloperjs
    @basicdeveloperjs 19 днів тому +1

    Great and simple explanation! Thanks!

  • @mayurbanta
    @mayurbanta 6 місяців тому +1

    To the point, best explanation so far

  • @andydallo5826
    @andydallo5826 Рік тому +1

    Couldn't make it clearer. thank you !

    • @Smoljames
      @Smoljames  Рік тому

      glad you found it helpful :)

  • @cyberstarcritic
    @cyberstarcritic Рік тому +1

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

  • @martapfahl940
    @martapfahl940 Рік тому +5

    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.

  • @gorandamchevski
    @gorandamchevski 2 роки тому +2

    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

  • @al-doori2392
    @al-doori2392 Рік тому +2

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

  • @creed404
    @creed404 Рік тому +2

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

  • @kereo32
    @kereo32 Рік тому +1

    Clean and on point explanation! Thank you.

  • @warrayn10
    @warrayn10 Рік тому +1

    Thank you! Such a simple explanation! :)

  • @ibtesumrezaaninda323
    @ibtesumrezaaninda323 Рік тому +1

    Oh! Such quality content! Love this!

  • @大盗江南
    @大盗江南 5 місяців тому +1

    great explanation! thx buddy

  • @brunocapitelli7754
    @brunocapitelli7754 2 роки тому +1

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

    • @Smoljames
      @Smoljames  2 роки тому +1

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

  • @solo-yl8uc
    @solo-yl8uc Рік тому +1

    Very clear explanation, thanks so much.

    • @Smoljames
      @Smoljames  Рік тому

      Happy it helped my friend :)

  • @jawadsrour8490
    @jawadsrour8490 Рік тому +1

    Great video explaining the advantages/disadvantages of each!

  • @absurd0000
    @absurd0000 Рік тому +1

    Excellent way to explain this. Thank you

  • @mirzafarazbaig8945
    @mirzafarazbaig8945 Рік тому +1

    Great video with example.

  • @holyage3128
    @holyage3128 Рік тому

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

    • @Smoljames
      @Smoljames  Рік тому

      Glad you found it helpful :)

  • @cinammondream
    @cinammondream Рік тому +1

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

    • @Smoljames
      @Smoljames  Рік тому +1

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

    • @cinammondream
      @cinammondream Рік тому +1

      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 UA-cam 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!!!

  • @shulin29
    @shulin29 11 місяців тому +1

    nicely explained, thanks! :D

  • @ganeshshetty8441
    @ganeshshetty8441 2 роки тому +1

    Awesome Video, this is the best video on these
    Thanks

  • @Konslufius
    @Konslufius Рік тому

    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.

  • @ashishkumarsahoo6966
    @ashishkumarsahoo6966 Рік тому +2

    And it's best easiest explanation

  • @Breeath
    @Breeath 2 місяці тому

    Jazakallah🥰

  • @KeannuZeigfeldAtilano
    @KeannuZeigfeldAtilano 3 місяці тому

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

    • @Smoljames
      @Smoljames  3 місяці тому

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

  • @lastmanstanding5423
    @lastmanstanding5423 23 дні тому +1

    yesus that's very blue

  • @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?

  • @haticesurumlu1833
    @haticesurumlu1833 Рік тому +1

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

  • @Gashvah
    @Gashvah 11 місяців тому +1

    Thank you

  • @anton-r
    @anton-r Рік тому +1

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

  • @haythembenkhlifa3197
    @haythembenkhlifa3197 2 роки тому +1

    thank you!

  • @diegounanue
    @diegounanue 5 місяців тому

    What happens if you have css?

  • @Becksbradley
    @Becksbradley 2 роки тому +1

    thanks for sharing !

  • @VishalPrajapati-oh3zo
    @VishalPrajapati-oh3zo 2 роки тому +1

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

  • @ApoorvBedmutha
    @ApoorvBedmutha Місяць тому

    You're awesome

  • @ШопенШумит
    @ШопенШумит 2 роки тому +1

    Thanks

  • @koolmo
    @koolmo 11 місяців тому +1

    great video!

  • @joshuabrard1061
    @joshuabrard1061 2 роки тому +1

    Good video

  • @dan_b8982
    @dan_b8982 Рік тому +1

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

    • @Smoljames
      @Smoljames  Рік тому +1

      Haha man's got an eye for detail

  • @GlennRobinson777
    @GlennRobinson777 2 роки тому

    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?

  • @harisjose2050
    @harisjose2050 2 роки тому

    ❤❤

  • @kristijanlazarev
    @kristijanlazarev Рік тому +1

    Very nice man! fr

  • @VincentSamar-s3g
    @VincentSamar-s3g 3 місяці тому

    0:25 honk

  • @GaryMoore-q3o
    @GaryMoore-q3o Місяць тому

    4692 Stokes Tunnel

  • @MyrleTonner-b6f
    @MyrleTonner-b6f Місяць тому

    West Views

  • @Ionut-lm9cj
    @Ionut-lm9cj 2 роки тому

    Abcd