{"id":10726,"date":"2022-01-11T06:28:04","date_gmt":"2022-01-11T06:28:04","guid":{"rendered":"https:\/\/cloudkul.com\/blog\/?p=10726"},"modified":"2022-02-11T05:32:17","modified_gmt":"2022-02-11T05:32:17","slug":"how-ssr-can-help-magento-2-speed-optimization","status":"publish","type":"post","link":"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/","title":{"rendered":"How SSR Can help Magento 2 speed optimization"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2022\/01\/magento2-logo.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2022\/01\/magento2-logo-1024x512.png\" alt=\"\" class=\"wp-image-10750\"\/><\/a><\/figure>\n\n\n\n<p>Magento 2 speed optimizations are everyone&#8217;s need that is why we keep updating you on the latest features how we can speed up our Magento stores.<\/p>\n\n\n\n<p>In our previous blog, we discussed how we can <strong><a href=\"https:\/\/cloudkul.com\/blog\/speed-up-magento-2-using-preload-prefetch-and-preconnect\/\">Speed up Magento 2 using Preload, Prefetch, and Preconnect.<\/a><\/strong><\/p>\n\n\n\n<p>Now, we will discuss Server-side rendering and how it will help Magento 2 store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Server-side Rendering(SSR)<\/h2>\n\n\n\n<p>There are 2 ways for rendering a web page &#8211; <\/p>\n\n\n\n<ul><li>Client-side rendering is one method, in which the rendering is completed by the user&#8217;s browser.<\/li><li>The other is server-side rendering, which completes the process on the server.<\/li><\/ul>\n\n\n\n<p>The most popular technique of showing content is through SSR. It works by translating HTML files on the server into information that can be used by the browser.<\/p>\n\n\n\n<p>Your browser sends a request to the server when you visit a website. Your browser interprets the content and shows the page after this request has been processed.<\/p>\n\n\n\n<p>In just a few milliseconds, data from the database is retrieved, an HTML page is created, and the page is sent back to the browser. <\/p>\n\n\n\n<p>The page, layout, CSS, JavaScript, and HTML content are loaded in the first request with SSR. The server will deliver HTML responses that are <strong>&#8216;Ready to be rendered&#8217;<\/strong>. <\/p>\n\n\n\n<p>The user&#8217;s browser renders the page and downloads the JavaScript right away so that it can be viewed. Then, for interactivity, it uses React.<\/p>\n\n\n\n<p><strong><em>In client-side Rendering,<\/em><\/strong> the server responds to the client&#8217;s browser. After that, the browser downloads JavaScript and runs React. The page will become viewable and interactive after some time.<\/p>\n\n\n\n<p>Because your server has already converted the HTML for rendering, <strong><em>SSR is faster,<\/em><\/strong> whereas CSR requires more JS to be downloaded, which means more JS to parse.<\/p>\n\n\n\n<p>The content, on the other hand, necessitates a second HTTP request to load. Finally, more JS is used to create the template. The second request will only be made once the document has been loaded.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2022\/02\/SSR-Page-1.drawio-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"781\" src=\"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2022\/02\/SSR-Page-1.drawio-1-1024x781.png\" alt=\"\" class=\"wp-image-11053\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pros of SSR<\/h3>\n\n\n\n<ul><li>The first time you visit the page, it loads faster.<\/li><li>Excellent for static websites.<\/li><li>Because of its speed, server-side rendering is a suitable alternative for rendering JavaScript for internet marketing.<\/li><li>There will be no loading time delay for the end-user. Client-side rendering causes loading page flickers, although SSR does not.<\/li><li>The faster Google and other search engines can crawl your pages, the better for your crawl budget. This ultimately improves the user experience on your website.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cons of SSR<\/h3>\n\n\n\n<ul><li>Because you&#8217;re using your own company&#8217;s server, it&#8217;s more expensive.<\/li><li>Interactions between non-rich sites.<\/li><li>With highly engaging pages, frequent server queries might cause bottlenecks.<\/li><li>Higher latency, which makes it more vulnerable.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">SSR in Headless Development<\/h2>\n\n\n\n<p>Headless development means decoupling backend with frontend. That means the backend is used for API purposes and front development and site rendering run on modern frameworks like Reactjs.<\/p>\n\n\n\n<p>&nbsp;SSR is a vital part of headless development because, in order to fetch the content generated by the API, SSR uses a Node.js front-end server. Following that, it generates HTML and transmits it to the browser.<\/p>\n\n\n\n<p>This indicates that the HTML sent to the client already contains dynamic content, which eliminates the indexing issue. We can create SEO-friendly websites utilizing this strategy.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/webkul.com\/headless-commerce-development-services\/\">Webkul<\/a><\/strong> offers headless commerce services built on React, Vue, and their frameworks like Gatsby.js, Next.js, Vue Storefront, Shopify Hydrogen, and Adobe Commerce PWA Studio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How SSR helps Magento 2 store<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Initial Load Time<\/h3>\n\n\n\n<p><strong><em><br>The average time it takes a user to load your site for the first time is referred to as the initial load time.<\/em><\/strong><\/p>\n\n\n\n<p>Before converting HTML to useable content on the browser, CSR loads base HTML, CSS, and all essential scripts. As a result, SSR&#8217;s initial page may load much faster.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Caching<\/h3>\n\n\n\n<p><br>Caching is a method of storing copies of files in a cache (or a temporary storage site) so that they can be retrieved faster.<\/p>\n\n\n\n<p>For reusable scripts on a user&#8217;s workstation, browsers and web servers use caching methods. SSR will always send requests to the server, resulting in a longer load time.<\/p>\n\n\n\n<p>However, because the scripts are fetched by the browser from the cache, caching measures can aid improve rendering speeds.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Impact on SEO<\/h3>\n\n\n\n<p><br>It&#8217;s critical to optimize your website for search engines. However, in order for this to work, your web page must have the appropriate information for search engines.<\/p>\n\n\n\n<p><strong><em>After all, search engines like Google crawl your site&#8217;s metadata with automated bots.<\/em><\/strong><\/p>\n\n\n\n<p>SSR compiles entire pages with the appropriate metadata. They&#8217;re transmitted to the front-end after getting the final HTML content.<\/p>\n\n\n\n<p>Whether or not search engine crawlers allow the usage of JS, this solution assures that the page metadata remains accurate.<\/p>\n\n\n\n<p><strong><em>SSR sites, on the other hand, are more SEO-friendly than CSR sites.<\/em><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dynamic Content Loading<\/h3>\n\n\n\n<p><br>Servers are frequently hosted on computers with a lot of processing power and fast networking speeds.<\/p>\n\n\n\n<p>That&#8217;s why you can rely on servers to provide the extra horsepower required to handle massive requests.<\/p>\n\n\n\n<p>Client machines, on the other hand, have limited computational capability. This means that the time it takes to render content will be longer.<\/p>\n\n\n\n<p>As a result, if your site requires dynamic content rendering on a regular basis, SSR is the superior option.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>When it comes to delivering business results, a lot is relying on web design and development. <\/p>\n\n\n\n<p>As a result, it&#8217;s important for marketers to understand how each step of the process works and what tools or platforms might help improve online performance.<\/p>\n\n\n\n<p>You can work effectively with developers and make decisions that will benefit your SEO efforts if you understand how server-side rendering affects your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need Support?<\/h2>\n\n\n\n<p>Thank You for reading this Blog!<\/p>\n\n\n\n<p>For further more interesting blogs, keep in touch with us. If you need any kind of support, simply raise a ticket at&nbsp;<strong><em><a rel=\"noreferrer noopener\" href=\"https:\/\/webkul.uvdesk.com\/en\/\" target=\"_blank\">https:\/\/webkul.uvdesk.com\/en\/<\/a>.<\/em><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For Magento 2 Elastic search, please follow &#8211;<\/h3>\n\n\n\n<h6 class=\"wp-block-heading\">Our Cloudkul Blogs<\/h6>\n\n\n\n<p><strong><a href=\"https:\/\/cloudkul.com\/features\/elastic-search-fluentd-kibana\/\">Elasticsearch, Fluentd, and Kibana (EFK)&nbsp;<\/a><\/strong><\/p>\n\n\n\n<p><strong><a href=\"https:\/\/cloudkul.com\/blog\/setting-elasticsearch-logstash-kibana-centralized-logging\/\">Setting up Elasticsearch, Logstash, and Kibana for centralized logging<\/a><\/strong><\/p>\n\n\n\n<p><strong><a href=\"https:\/\/cloudkul.com\/blog\/managing-and-monitoring-magento-2-logs-with-kibana\/\">Managing and Monitoring Magento 2 logs with Kibana<\/a><\/strong><\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Our store modules &#8211; <\/h6>\n\n\n\n<p><strong><a href=\"https:\/\/store.webkul.com\/Magento2-Elasticsearch.html\">Magento 2 Elasticsearch<\/a><\/strong><\/p>\n\n\n\n<p><strong><a href=\"https:\/\/store.webkul.com\/magento2-efk-setup.html\">EFK Setup for Magento 2<\/a><\/strong><\/p>\n\n\n\n<p><strong><em>You may also visit our Magento development services and quality&nbsp;<\/em><\/strong> <strong><a href=\"https:\/\/store.webkul.com\/Magento-2.html\">Magento 2 Extensions<\/a><\/strong>.<\/p>\n\n\n\n<p><strong><em>For further help or query, please&nbsp;<a href=\"https:\/\/cloudkul.com\/contact\/\">contact<\/a>&nbsp;us or raise a&nbsp;<a href=\"https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/\">ticket<\/a>.<\/em><\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 speed optimizations are everyone&#8217;s need that is why we keep updating you on <a class=\"text-primary\" title=\"read more\" href=\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2,87,20,341,36],"tags":[674,3,147,673,675,100,672],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How SSR Can help Magento 2 speed optimization - Cloudkul<\/title>\n<meta name=\"description\" content=\"The technique of showing content on a screen is through SSR. It works by translating HTML files on the server into information that is used by the browser.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How SSR Can help Magento 2 speed optimization - Cloudkul\" \/>\n<meta property=\"og:description\" content=\"The technique of showing content on a screen is through SSR. It works by translating HTML files on the server into information that is used by the browser.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudkul\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-11T06:28:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-11T05:32:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2022\/01\/magento2-logo-1024x512.png\" \/>\n<meta name=\"author\" content=\"Tanya Garg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/CloudWebkul\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/\",\"url\":\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/\",\"name\":\"How SSR Can help Magento 2 speed optimization - Cloudkul\",\"isPartOf\":{\"@id\":\"https:\/\/cloudkul.com\/blog\/#website\"},\"datePublished\":\"2022-01-11T06:28:04+00:00\",\"dateModified\":\"2022-02-11T05:32:17+00:00\",\"author\":{\"@id\":\"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/65b93d1aa584abd012eb60a25839b984\"},\"description\":\"The technique of showing content on a screen is through SSR. It works by translating HTML files on the server into information that is used by the browser.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How SSR Can help Magento 2 speed optimization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudkul.com\/blog\/#website\",\"url\":\"https:\/\/cloudkul.com\/blog\/\",\"name\":\"Cloudkul\",\"description\":\"Host your eCommerce Store on AWS with Optimized Performance\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudkul.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/65b93d1aa584abd012eb60a25839b984\",\"name\":\"Tanya Garg\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9ea334eba6adf9dfe79873bc0bee8dad?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9ea334eba6adf9dfe79873bc0bee8dad?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g\",\"caption\":\"Tanya Garg\"},\"description\":\"Business Developer Executive at Webkul\",\"sameAs\":[\"https:\/\/cloudkul.com\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/CloudWebkul\"],\"url\":\"https:\/\/cloudkul.com\/blog\/author\/tanyagarg-bd037\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How SSR Can help Magento 2 speed optimization - Cloudkul","description":"The technique of showing content on a screen is through SSR. It works by translating HTML files on the server into information that is used by the browser.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/","og_locale":"en_US","og_type":"article","og_title":"How SSR Can help Magento 2 speed optimization - Cloudkul","og_description":"The technique of showing content on a screen is through SSR. It works by translating HTML files on the server into information that is used by the browser.","og_url":"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/","og_site_name":"Cloudkul","article_published_time":"2022-01-11T06:28:04+00:00","article_modified_time":"2022-02-11T05:32:17+00:00","og_image":[{"url":"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2022\/01\/magento2-logo-1024x512.png"}],"author":"Tanya Garg","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/CloudWebkul","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/","url":"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/","name":"How SSR Can help Magento 2 speed optimization - Cloudkul","isPartOf":{"@id":"https:\/\/cloudkul.com\/blog\/#website"},"datePublished":"2022-01-11T06:28:04+00:00","dateModified":"2022-02-11T05:32:17+00:00","author":{"@id":"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/65b93d1aa584abd012eb60a25839b984"},"description":"The technique of showing content on a screen is through SSR. It works by translating HTML files on the server into information that is used by the browser.","breadcrumb":{"@id":"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cloudkul.com\/blog\/how-ssr-can-help-magento-2-speed-optimization\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How SSR Can help Magento 2 speed optimization"}]},{"@type":"WebSite","@id":"https:\/\/cloudkul.com\/blog\/#website","url":"https:\/\/cloudkul.com\/blog\/","name":"Cloudkul","description":"Host your eCommerce Store on AWS with Optimized Performance","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudkul.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/65b93d1aa584abd012eb60a25839b984","name":"Tanya Garg","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9ea334eba6adf9dfe79873bc0bee8dad?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9ea334eba6adf9dfe79873bc0bee8dad?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g","caption":"Tanya Garg"},"description":"Business Developer Executive at Webkul","sameAs":["https:\/\/cloudkul.com\/","https:\/\/twitter.com\/https:\/\/twitter.com\/CloudWebkul"],"url":"https:\/\/cloudkul.com\/blog\/author\/tanyagarg-bd037\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts\/10726"}],"collection":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/comments?post=10726"}],"version-history":[{"count":33,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts\/10726\/revisions"}],"predecessor-version":[{"id":11057,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts\/10726\/revisions\/11057"}],"wp:attachment":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/media?parent=10726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/categories?post=10726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/tags?post=10726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}