{"id":7880,"date":"2026-04-23T10:09:10","date_gmt":"2026-04-23T08:09:10","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=7880"},"modified":"2026-04-23T10:09:12","modified_gmt":"2026-04-23T08:09:12","slug":"what-is-server-side-rendering-ssr-2","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-server-side-rendering-ssr-2\/","title":{"rendered":"What is Server-Side Rendering (SSR)?"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Server-Side Rendering (SSR) is a web development technique where the server generates the full HTML of a page for every request and sends it to the user&#8217;s browser as a finished document.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike Client-Side Rendering (CSR)\u2014where the browser receives a blank page and builds the content using JavaScript\u2014SSR ensures that the content is already present the moment the file arrives. In the <strong>mybox<\/strong> ecosystem, SSR is a powerful tool for projects that require a balance between dynamic data and high search engine visibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-server-side-rendering-ssr-2\/#How_SSR_works\" >How SSR works<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-server-side-rendering-ssr-2\/#Advantages_of_Server-Side_Rendering\" >Advantages of Server-Side Rendering<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-server-side-rendering-ssr-2\/#Disadvantages_and_Practical_Limitations\" >Disadvantages and Practical Limitations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-server-side-rendering-ssr-2\/#Popular_SSR_Frameworks\" >Popular SSR Frameworks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-server-side-rendering-ssr-2\/#When_to_choose_SSR\" >When to choose SSR?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-server-side-rendering-ssr-2\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_SSR_works\"><\/span>How SSR works<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<\/div>\n\n<div id=\"mybox-3999370239\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">The lifecycle of an SSR request prioritizes immediate content delivery:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Request:<\/strong> The user navigates to a URL, sending a request to the <strong>mybox<\/strong> server.<\/li>\n\n\n\n<li><strong>Server Processing:<\/strong> The server executes the application logic, fetches necessary data from the database, and renders the complete HTML.<\/li>\n\n\n\n<li><strong>Delivery:<\/strong> The server sends this finished HTML document to the browser.<\/li>\n\n\n\n<li><strong>First Paint:<\/strong> The browser displays the content immediately. At this stage, the page is visible but not yet interactive.<\/li>\n\n\n\n<li><strong>Hydration:<\/strong> The browser downloads and runs the associated JavaScript, which &#8220;attaches&#8221; to the existing HTML. This makes buttons clickable and enables dynamic features without needing to rebuild the UI.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Advantages_of_Server-Side_Rendering\"><\/span>Advantages of Server-Side Rendering<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Superior SEO:<\/strong> Because the full content is present in the initial HTML, search engine crawlers (like Google or Bing) can index the page perfectly without needing to execute complex JavaScript.<\/li>\n\n\n\n<li><strong>Fast Initial Visibility:<\/strong> Users see the &#8220;First Contentful Paint&#8221; much quicker. This is critical for retaining visitors on slow mobile connections or older devices.<\/li>\n\n\n\n<li><strong>Social Media Optimization:<\/strong> When links are shared on social platforms, crawlers can easily generate accurate previews (titles, descriptions, and images) because the metadata is rendered on the server.<\/li>\n\n\n\n<li><strong>Enhanced Security:<\/strong> Since data fetching happens on the server, sensitive API keys or complex business logic can remain hidden from the client-side code.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Disadvantages_and_Practical_Limitations\"><\/span>Disadvantages and Practical Limitations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Increased Resource Consumption:<\/strong> Unlike static sites, SSR requires <strong>mybox<\/strong> CPU and RAM resources for every single visitor request. High-traffic sites using SSR should monitor their resource limits in the <strong>mybox panel<\/strong>.<\/li>\n\n\n\n<li><strong>Higher Server Response Time:<\/strong> While the user sees content faster once it arrives, the server needs a moment to build the page before sending it, which can slightly increase the initial response time.<\/li>\n\n\n\n<li><strong>Development Complexity:<\/strong> Managing the application state so it remains consistent between the server and the browser (the hydration process) requires more advanced technical expertise.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Popular_SSR_Frameworks\"><\/span>Popular SSR Frameworks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To implement SSR efficiently, developers typically use frameworks that handle the server logic natively:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Next.js (for React):<\/strong> The industry standard for SSR, offering a seamless transition between server and client components.<\/li>\n\n\n\n<li><strong>Nuxt.js (for Vue):<\/strong> Provides a robust environment for building universal Vue applications with built-in SSR support.<\/li>\n\n\n\n<li><strong>Angular Universal:<\/strong> The official solution for bringing SSR capabilities to the Angular ecosystem.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_to_choose_SSR\"><\/span>When to choose SSR?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">SSR is the ideal architecture for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>E-commerce Platforms:<\/strong> Where product pages must be indexed by search engines and load fast to reduce bounce rates.<\/li>\n\n\n\n<li><strong>Content Portals &amp; News Sites:<\/strong> Where information is dynamic, frequently updated, and relies on high organic search traffic.<\/li>\n\n\n\n<li><strong>Personalized Dashboards:<\/strong> Where content depends on user authentication and must be generated specifically for each logged-in individual.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Server-Side Rendering is a &#8220;content-first&#8221; approach that ensures your website is accessible, indexable, and fast. By shifting the rendering workload to your <strong>mybox<\/strong> infrastructure, you provide a professional experience for both humans and search engine bots. For projects where visibility and performance are non-negotiable, SSR remains one of the most effective rendering strategies available.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[58],"manual_kb_tag":[9067,9068,9069,9070,9071,1365,3920,4758,8956,8957],"class_list":["post-7880","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-web-applications-cms","manual_kb_tag-hydration-process","manual_kb_tag-social-media-optimization","manual_kb_tag-initial-page-load","manual_kb_tag-server-rendering","manual_kb_tag-universal-rendering","manual_kb_tag-search-engine-optimization","manual_kb_tag-dynamic-content","manual_kb_tag-first-contentful-paint","manual_kb_tag-server-side-rendering","manual_kb_tag-client-side-rendering"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7880\/revisions"}],"predecessor-version":[{"id":7881,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7880\/revisions\/7881"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=7880"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=7880"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=7880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}