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\u2014let’s dive into these concepts and discuss them in detail.<\/p>\n
<\/p>\n
But before moving to that we should first know the steps involved in getting a web application from development to being used by users.<\/p>\n
<\/p>\n
<\/p>\n
<\/strong>Now that you have understand the process of web application from development to users let’s dive into our topic.<\/p>\n <\/p>\n Server side rendering means rendering web pages on the server and sending fully rendered HTML to client.<\/p>\n <\/p>\n <\/p>\n That’s all about SSR and working of SSR. Now that you how it works let’s discuss it’s pros and cons:<\/p>\n <\/p>\n <\/p>\n <\/p>\n Client side rendering means rendering web pages on the browser side using Javascript.<\/p>\n <\/p>\n How it works:<\/p>\n <\/p>\n Now that you how it works let’s discuss it’s pros and cons:<\/p>\n <\/p>\n <\/p>\n Both SSR and CSR have their use cases, and often today’s modern applications use a combination of both (called hybrid rendering<\/strong>) to leverage the benefits of each approach.<\/p>\n","protected":false},"excerpt":{"rendered":" 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<\/p>\n","protected":false},"author":37,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[362,263,350,361],"tags":[347,223],"class_list":["post-4895","post","type-post","status-publish","format-standard","category-client-side-rendering","category-javascript-frameworks","category-nextjs","category-server-side-rendering","tag-nextjs","tag-reactjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4895"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4895\/revisions"}],"predecessor-version":[{"id":4897,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4895\/revisions\/4897"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}SSR(Server Side Rendering)<\/h1>\n
How it works:<\/h2>\n
\n
Pros<\/h2>\n
\n
Cons<\/h2>\n
\n
CSR(Client Side Rendering)<\/h1>\n
\n
Pros<\/h2>\n
\n
Cons<\/h2>\n
\n