Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Wednesday, April 2

    SSR(Server Side Rendering) vs CSR(Client Side Rendering)

    Client Side Rendering 858 Comments3 Mins ReadVivek PandeyBy

    Have you ever found yourself pulling your hair out trying to understand SSR and CSR? Maybe you’ve been asked in an interview to explain SSR and CSR, their differences, and when to use each one. Or perhaps you’ve heard about Hybrid rendering, which combines both CSR and SSR, and you’re not quite sure what that means. Don’t worry—let’s dive into these concepts and discuss them in detail.

    But before moving to that we should first know the steps involved in getting a web application from development to being used by users.

    Process

    • Build: Prepare the code by compiling, bundling and optimizing it.
    • Server: Host the prepared code and serve it to users.
    • Execution: The user’s browser load and renders the application making it interactive.

    Now that you have understand the process of web application from development to users let’s dive into our topic.

    SSR(Server Side Rendering)

    Server side rendering means rendering web pages on the server and sending fully rendered HTML to client.

    How it works:

    1. As a user you request a web page.
    2. The server process the request and generates the HTML content.
    3. The server will then send a fully rendered HTML to your browser.
    4. Browser will display it’s HTML content to you.

    That’s all about SSR and working of SSR. Now that you how it works let’s discuss it’s pros and cons:

    Pros

    1. Faster initial load: Now that you know HTML is being rendered on the server side, your browser can display the content as quickly as it receives it.
    2. SEO: Search engines can easily crawl and index the fully rendered HTML.
    3. Low-end Devices Friendly: Better performance on low end devices as it requires minimal processing on the client’s side.

    Cons

    1. Server load: It increases the server load as most of it’s processing is done on server side.
    2. Slow Interaction: After the initial load further Interaction will require more communication with the server.

    CSR(Client Side Rendering)

    Client side rendering means rendering web pages on the browser side using Javascript.

    How it works:

    1. As a user you request a web page.
    2. The server sends a minimal HTML file along with JS to the client.
    3. The browser downloads and executes the JS and generates the HTML dynamically.
    4. Browser will display content to you.

    Now that you how it works let’s discuss it’s pros and cons:

    Pros

    1. Better Interactivity: Faster interaction as it processing happens at client side.
    2. Server load: It reduces server load as server sends static files.
    3. User experience: User experience is better as dynamic content updates happen without page reloads.

    Cons

    1. Slower initial load: As processing happens on client side it’s obvious that it will take longer time.
    2. SEO: Seo challenges will be there as Search engines might have difficulty indexing content that is dynamically rendered.
    3. Usage: Resource usage is generally high as processing happens on your(client’s) device.

    Both SSR and CSR have their use cases, and often today’s modern applications use a combination of both (called hybrid rendering) to leverage the benefits of each approach.

    Keep Reading

    View 858 Comments

    858 Comments

    5. 貼街招 on

      Hi! I’m at work surfing around your blog from my new iphone!Just wanted to say I love reading your blog and look forward to allyour posts! Keep up the excellent work!

      Reply
    8. xxx bokep on

      I truly appreciate this post. I’ve been looking everywhere for something similar to this! Thank goodness I found it on Bing. You’ve made my day! Thanks again! soyos

      Reply
    18. Tang like Tiktok on

      UFABET ศูนย์รวมเกมคาสิโนออนไลน์ที่เหมาะสมที่สุดในยุคนี้และบาคาร่า เกมที่ได้รับความนิยมที่สร้างรายได้ให้ใครๆเยอะๆ UFABET เว็บไซต์บาคาร่าออนไลน์ที่จ่ายจริง จ่ายแรง ค้ำประกันด้วยยอดสมาชิกที่มากขึ้นทุกเมื่อเชื่อวัน มาแรงแซงทุกเว็บไซต์เลยขอรับ

      Reply
    21. togel4d alternatif on

      I am not certain the place you’re getting yourinfo, however good topic. I needs to spend a whilefinding out more or figuring out more. Thanks for excellent information I used to be on the lookout for this info for my mission.

      Reply
    24. Kera on

      Pretty nice post. I just stumbled upon your blog and wished to say that I have really enjoyed surfing around your blog posts.After all I’ll be subscribing to your rss feedand I hope you write again very soon!

      Reply
    133. 3D Hoodie on

      How long have you lived here? warfarin goodrx Aside from The Queen, the Duke of Edinburgh, Prince Charles, the Duchess of Cornwall, Prince Harry, and Kate’s immediate family, speculation is rife as to who has received a golden ticket.

      Reply
    375. اریان بت on

      Generally I do not read post on blogs, however I wish to say that this write-up very compelled me to check out and do it!Your writing style has been amazed me. Thank you, quite nice post.

      Reply
    405. to read more on

      Good day! This is my first visit to your blog!We are a team of volunteers and starting a new project in a communityin the same niche. Your blog provided us beneficialinformation to work on. You have done a outstanding job!

      Reply
    530. 1K6971804A on

      Howdy! I could have sworn Iíve been to this blog before but after going through many of the articles I realized itís new to me. Anyways, Iím definitely delighted I discovered it and Iíll be bookmarking it and checking back often!

      Reply
    656. Davidboype on

      balloon казино официальный сайт balloon казино Автоматы Ballon поднимают настроение каждому.

      Reply
    657. Martyhap on

      Играйте СЃ СѓРјРѕРј, РЅРѕ РЅРµ забывайте Рѕ веселье.: balloon game – balloon казино демо

      Reply
    663. Martyhap on

      Казино — место для увлекательных РёРіСЂ.: balloon игра – balloon игра на деньги

      Reply
    673. Jessevox on

      Казино предлагает отличные условия для РёРіСЂС‹.: balloon игра – balloon казино

      Reply
    684. Prime Biome on

      hi!,I love your writing so so much! proportion we keep up a correspondence extra about your post on AOL? I require an expert in this area to solve my problem. Maybe that is you! Having a look ahead to peer you.

      Reply
    698. for more information on

      Howdy! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a wonderful job!

      Reply
    788. ma dao thanh cong on

      What’s Going down i am new to this, I stumbled upon this I have found It positively useful and it has aided me out loads. I am hoping to give a contribution & assist different customers like its helped me. Good job.

      Reply
    790. see the website on

      Aw, this was a very good post. Taking the time and actual effort to make a good articleÖ but what can I sayÖ I procrastinate a whole lot and don’t manage to get nearly anything done.

      Reply
    795. see this website on

      I blog frequently and I seriously thank you for your content. Your article has really peaked my interest. I am going to book mark your blog and keep checking for new details about once a week. I subscribed to your RSS feed as well.

      Reply
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us