Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Saturday, February 22

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

    Client Side Rendering 377 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 377 Comments

    377 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
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us