(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{642:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var r=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};r.get||r.set?Object.defineProperty(t,n,r):t[n]=e[n]}return t.default=e,t}(n(6)),a=l(n(679)),o=l(n(678));function l(e){return e&&e.__esModule?e:{default:e}}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var d=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),c(this,s(t).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}(t,r.Component),function(e,t,n){t&&u(e.prototype,t),n&&u(e,n)}(t,[{key:"render",value:function(){return r.default.createElement("article",null,r.default.createElement("header",null,r.default.createElement("h1",{className:"mt-4"},"Server Side Rendering - SSR"),r.default.createElement("hr",null)),r.default.createElement("section",null,r.default.createElement("section",null,r.default.createElement("header",null,r.default.createElement("h3",null,"What is Server Side Rendering - SSR ?")),r.default.createElement("p",null,"The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests our app. When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client. From that point on, the client takes over rendering duties.")),r.default.createElement("hr",null),r.default.createElement("section",null,r.default.createElement("header",null,r.default.createElement("h3",{className:"mt-4"},"How is Server Side Rendering beneficial?")),r.default.createElement("p",null,"We are using server side rendering for mainly two reasons:"),r.default.createElement("ul",null,r.default.createElement("li",null,"Performance benefit for our users"),r.default.createElement("li",null,"Consistent SEO performance")),r.default.createElement("p",null,"Here is a very simple timeline diagram(super simple)to showcase the difference between SSR and CSR."),r.default.createElement("h3",{className:"mt-4 text-center"},"SSR"),r.default.createElement("div",{className:"mw-100 text-center"},r.default.createElement("img",{src:a.default,alt:"SSR Image",className:"mw-100"})),r.default.createElement("h3",{className:"mt-4 text-center"},"CSR"),r.default.createElement("div",{className:"mw-100 text-center"},r.default.createElement("img",{src:o.default,alt:"CSR Image",className:"mw-100"})),r.default.createElement("p",{className:"mt-4"},"The difference here is that for SSR the response of the server is the HTML page that is ready to be rendered, while the CSR sends the JS files to the browser with empty documents which will then be downloaded and executed by the browser after which the HTML view will be ready. In both cases, React will need to be downloaded and go through the same process of building a virtual dom and attaching events to make the page interactive — but for SSR, the user can start viewing the page while all of that is happening. For the CSR world, you need to wait for all of the above to happen and then have the virtual dom moved to the browser dom for the page to be viewable."))))}}]),t}();t.default=d},678:function(e,t){e.exports="/images/04b246fb03bd5bd396560378fa4f524e.png"},679:function(e,t){e.exports="/images/ed285bce57d443218ffa0975fa33862f.png"}}]);