{"id":14480,"date":"2024-08-01T14:06:35","date_gmt":"2024-08-01T13:06:35","guid":{"rendered":"https:\/\/ee.yelkdev.site\/?p=14480"},"modified":"2024-12-09T21:03:47","modified_gmt":"2024-12-09T21:03:47","slug":"enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation","status":"publish","type":"post","link":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/","title":{"rendered":"Enhancing SSR with React 18 : A deep dive into server side rendering optimisation"},"content":{"rendered":"<p>Server side rendering (SSR) is a popular technique for improving the performance and SEO of web applications by rendering HTML on the server and sending it to the client. However, the traditional approach to SSR has significant drawbacks, especially as applications grow in complexity.<\/p>\n<h2>Is your SSR approach optimal?<\/h2>\n<p>Traditionally, SSR processes the entire HTML response synchronously. This process can result in longer server response times, particularly for larger applications, which can negatively impact the <a href=\"https:\/\/www.equalexperts.com\/blog\/tag\/user-experience\/\">user experience<\/a>. The key problems with traditional SSR today include:<\/p>\n<ul>\n<li aria-level=\"1\">It fetches everything before displaying anything &#8211; the server needs to gather all the data before it can render and send HTML, leading to delays.<\/li>\n<li aria-level=\"1\">It loads everything before hydration. All components must be loaded onto the client before the application starts to hydrate (make the HTML interactive)<\/li>\n<li aria-level=\"1\">It hydrates everything before interaction. Users can\u2019t interact with the page until the entire hydration process is complete, meaning longer wait times.<\/li>\n<\/ul>\n<img decoding=\"async\" class=\"alignnone wp-image-14531 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png\" alt=\"A flow chart showing the following steps. Step one, user request a site. Step two, server data fetch and create the ready HTML file. Step three, Browser render HTML but it is not interactive. Step four, Browser downloads JS. Step five, browser executes JS. Step six, website is fully interactive. \" width=\"2210\" height=\"418\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png 2210w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1-300x57.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1-1200x227.png 1200w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1-768x145.png 768w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1-1536x291.png 1536w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1-2048x387.png 2048w\" sizes=\"(max-width: 2210px) 100vw, 2210px\" \/>\n<img decoding=\"async\" class=\"alignnone wp-image-14532 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image.png\" alt=\"An image showing the timeline of time to first Byte, First Contentful Paint and Time to interactive. \" width=\"2150\" height=\"768\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image.png 2150w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-300x107.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1200x429.png 1200w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-768x274.png 768w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1536x549.png 1536w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-2048x732.png 2048w\" sizes=\"(max-width: 2150px) 100vw, 2150px\" \/>\n<h2>App demonstration with traditional SSR approach<\/h2>\n<p>The demo application uses React and NodeJS server for server-side rendering, and consists of the following components:<\/p>\n<ol>\n<li aria-level=\"1\">Cart<\/li>\n<li aria-level=\"1\">Header<\/li>\n<li aria-level=\"1\">Footer<\/li>\n<li aria-level=\"1\">Sidebar<\/li>\n<\/ol>\n<p>We assume that the cart component took two seconds for data fetching on the server side:<\/p>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/1a.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14533 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/1a.png\" alt=\"An image showing an example SSR with Peipeable Stream\" width=\"1500\" height=\"785\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/1a.png 1500w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/1a-300x157.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/1a-1200x628.png 1200w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/1a-768x402.png 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/a>\n<h2><strong>Traditional SSR metrics:\u00a0<\/strong><\/h2>\n<ol>\n<li aria-level=\"1\">FCP (first contentful paint) &#8211; 2.2 seconds<\/li>\n<li aria-level=\"1\">LCP (largest contentful paint) &#8211; 2.2 seconds<\/li>\n<li aria-level=\"1\">Blank screen time frame: the application shows a blank screen until the HTML is fully received from the server<\/li>\n<li aria-level=\"1\">TTFB (time to first byte) &#8211; 2.01 seconds<\/li>\n<\/ol>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/2.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14534 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/2.png\" alt=\"An image example of a traditional SSR metric\" width=\"1158\" height=\"593\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/2.png 1158w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/2-300x154.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/2-768x393.png 768w\" sizes=\"(max-width: 1158px) 100vw, 1158px\" \/><\/a>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/3.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14535 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/3.png\" alt=\"An example image of a Treemap SSR matrix\" width=\"1496\" height=\"408\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/3.png 1496w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/3-300x82.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/3-1200x327.png 1200w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/3-768x209.png 768w\" sizes=\"(max-width: 1496px) 100vw, 1496px\" \/><\/a>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/4.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14536 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/4.png\" alt=\"An image of an example SSR matrix\" width=\"1771\" height=\"948\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/4.png 1771w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/4-300x161.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/4-1200x642.png 1200w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/4-768x411.png 768w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/4-1536x822.png 1536w\" sizes=\"(max-width: 1771px) 100vw, 1771px\" \/><\/a>\n<p>These metrics indicate a poor user experience, with prolonged blank screens and slow interactions.<\/p>\n<h2>Two major SSR features unlocked by Suspense<\/h2>\n<p>The new SSR foundation introduces several important changes that offer a better user experience, including:<\/p>\n<h2>Streaming HTML<\/h2>\n<p>Streaming HTML on the server involves sending HTML content to the client\u00a0 in chunks as it is generated, rather than waiting for the entire page to be rendered before it is sent. This allows users to see and interact with the initial content faster, improving perceived performance and reducing TTFB.<\/p>\n<p>SSR with streaming can significantly enhance the user experience, especially when using large or complex applications. HTML streaming offers benefits such as:<\/p>\n<ul>\n<li aria-level=\"1\">Faster TTFB with immediate start of content download<\/li>\n<li aria-level=\"1\">Faster FCB since visible content appears sooner, reducing perceived load time<\/li>\n<\/ul>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/5a.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14537\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/5a.jpg\" alt=\"An image of the first HTML shell served to client using suspense fallbacks. \" width=\"900\" height=\"838\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/5a.jpg 1500w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/5a-300x279.jpg 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/5a-1100x1024.jpg 1100w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/5a-768x715.jpg 768w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/5a-1200x1117.jpg 1200w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a>\n<h2>Selective hydration on the client<\/h2>\n<p>Selective hydration, introduced in React 18, optimises client-side <a href=\"https:\/\/www.equalexperts.com\/blog\/our-thinking\/5-scary-donts-for-web-performance-and-how-to-address-them\/\">performance<\/a> by allowing critical parts of the application to become interactive, faster. One benefit of this change is an improved user experience &#8211; critical components become interactive sooner, leading to a smoother, faster interaction<\/p>\n<h2>Improvements in React 18 for SSR<\/h2>\n<p>Key improvements that we see in React 18 include:<\/p>\n<ul>\n<li aria-level=\"1\">Suspense and Lazy on the server side<\/li>\n<li aria-level=\"1\">Streaming HTML with Suspense boundaries. By using the React server API\u2019s \u2018rendertopipeablestream\u2019, HTML is streamed in chunks with Suspense boundaries, enhancing performance and rendering speed.<\/li>\n<\/ul>\n<h2>Metrics for demo application with Suspense and HTML streaming<\/h2>\n<ol>\n<li aria-level=\"1\">FCP (first contentful paint) &#8211; 0.3 seconds<\/li>\n<li aria-level=\"1\">LCP (largest contentful paint) &#8211; 0.5 seconds<\/li>\n<li aria-level=\"1\">Progressive rendering &#8211; the application progressively renders using HTML streaming from the server<\/li>\n<li aria-level=\"1\">TTFB (time to first byte) &#8211; 30.32ms<\/li>\n<\/ol>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/6.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14538 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/6.png\" alt=\"An image of the metrics example with Suspense and HTML streaming\" width=\"1051\" height=\"575\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/6.png 1051w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/6-300x164.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/6-768x420.png 768w\" sizes=\"(max-width: 1051px) 100vw, 1051px\" \/><\/a>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/7.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14539 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/7.png\" alt=\"\" width=\"1466\" height=\"296\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/7.png 1466w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/7-300x61.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/7-1200x242.png 1200w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/7-768x155.png 768w\" sizes=\"(max-width: 1466px) 100vw, 1466px\" \/><\/a>\n<a href=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/8.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-14540 size-full\" src=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/8.png\" alt=\"\" width=\"1772\" height=\"961\" srcset=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/8.png 1772w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/8-300x163.png 300w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/8-1200x651.png 1200w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/8-768x417.png 768w, https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/08\/8-1536x833.png 1536w\" sizes=\"(max-width: 1772px) 100vw, 1772px\" \/><\/a>\n<h2>SSR demonstration with selective hydration <span style=\"font-weight: 400;\">\u00a0<\/span><\/h2>\n<p>Below is a video demonstration showing how the application remains interactive even when the Car component is not streamed, or the JavaScript fully downloaded. This illustrated the effectiveness of selective hydration in enhancing the user experience by prioritising the interactivity of critical parts of the application.<\/p>\n<h2>React 18 solves these problems:<\/h2>\n<ul>\n<li aria-level=\"1\">You no longer need to wait for all data to load on the server before sending HTML<\/li>\n<li aria-level=\"1\">You no longer have to wait for all JavaScript to load to start hydrating<\/li>\n<li aria-level=\"1\">You no longer have to wait for all the components to hydrate before interacting with the page<\/li>\n<\/ul>\n<h2><strong>React 18 improves SSR application performance\u00a0<\/strong><\/h2>\n<p>By leveraging React 18\u2019s <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/37\">Suspense<\/a>, <a href=\"https:\/\/react.dev\/reference\/react\/lazy\">React.<\/a><a href=\"https:\/\/react.dev\/reference\/react\/lazy\">Lazy<\/a> and HTML streaming, we can significantly enhance the performance of SSR applications. These improvements mean faster initial loads, quicker interactions and a much improved user experience.<\/p>\n<p>Traditional SSR methods are becoming increasingly outpaced by the new technologies and methods like those introduced in React 18, which set new standards for web application performance and user satisfaction.<\/p>\n<p><a href=\"https:\/\/github.com\/guptajyoti845\/demo-react-ssr\">This demo application<\/a> on Github shows the benefits of SSR with Suspense and HTML streaming.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How React 18 enhances Server-Side Rendering (SSR) through features like Suspense, Lazy Loading, and Selective Hydration, demonstrating how these advancements significantly improve web performance and user experience. It includes practical setup and live demonstrations of these techniques in action.<\/p>\n","protected":false},"author":258,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[3,2],"tags":[496,492,488,495,493,489,490,491,494],"location":[422],"class_list":["post-14480","post","type-post","status-publish","format-standard","hentry","category-tech-focus","category-whats-new","tag-html-streaming","tag-lazy-loading","tag-react-18","tag-react-server-apis","tag-selective-hydration","tag-server-side-rendering-ssr","tag-streaming-ssr","tag-suspense","tag-web-performance-optimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Enhancing SSR with React 18: A deep dive into server side rendering optimisation | Equal Experts<\/title>\n<meta name=\"description\" content=\"This deep dive explores how server-side rendering is being transformed by features like HTML streaming and Suspense in React 18\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhancing SSR with React 18 : A deep dive into server side rendering optimisation\" \/>\n<meta property=\"og:description\" content=\"How React 18 enhances Server-Side Rendering (SSR) through features like Suspense, Lazy Loading, and Selective Hydration, demonstrating how these advancements significantly improve web performance and user experience. It includes practical setup and live demonstrations of these techniques in action.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/\" \/>\n<meta property=\"og:site_name\" content=\"Equal Experts\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-01T13:06:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-09T21:03:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/server-side-rendering-FACEBOOK.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jyoti Gupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"How React 18 enhances Server-Side Rendering (SSR) through features like Suspense, Lazy Loading, and Selective Hydration, demonstrating how these advancements significantly improve web performance and user experience. It includes practical setup and live demonstrations of these techniques in action.\" \/>\n<meta name=\"twitter:creator\" content=\"@EqualExperts\" \/>\n<meta name=\"twitter:site\" content=\"@EqualExperts\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jyoti Gupta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/\"},\"author\":{\"name\":\"Jyoti Gupta\",\"@id\":\"https:\/\/www.equalexperts.com\/#\/schema\/person\/627af60dc6dbc8f25fa8377b3cd8a935\"},\"headline\":\"Enhancing SSR with React 18 : A deep dive into server side rendering optimisation\",\"datePublished\":\"2024-08-01T13:06:35+00:00\",\"dateModified\":\"2024-12-09T21:03:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/\"},\"wordCount\":699,\"publisher\":{\"@id\":\"https:\/\/www.equalexperts.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png\",\"keywords\":[\"HTML Streaming\",\"Lazy Loading\",\"React 18\",\"React Server APIs\",\"Selective Hydration\",\"Server-Side Rendering (SSR)\",\"Streaming SSR\",\"Suspense\",\"Web Performance Optimization\"],\"articleSection\":[\"Tech Focus\",\"What's New\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/\",\"url\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/\",\"name\":\"Enhancing SSR with React 18: A deep dive into server side rendering optimisation | Equal Experts\",\"isPartOf\":{\"@id\":\"https:\/\/www.equalexperts.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png\",\"datePublished\":\"2024-08-01T13:06:35+00:00\",\"dateModified\":\"2024-12-09T21:03:47+00:00\",\"description\":\"This deep dive explores how server-side rendering is being transformed by features like HTML streaming and Suspense in React 18\",\"breadcrumb\":{\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage\",\"url\":\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png\",\"contentUrl\":\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png\",\"width\":2210,\"height\":418},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.equalexperts.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enhancing SSR with React 18 : A deep dive into server side rendering optimisation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.equalexperts.com\/#website\",\"url\":\"https:\/\/www.equalexperts.com\/\",\"name\":\"Equal Experts\",\"description\":\"Making Software. Better.\",\"publisher\":{\"@id\":\"https:\/\/www.equalexperts.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.equalexperts.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.equalexperts.com\/#organization\",\"name\":\"Equal Experts\",\"url\":\"https:\/\/www.equalexperts.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.equalexperts.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2018\/08\/Equal_Experts_Logo_CMYK_Colour.jpg\",\"contentUrl\":\"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2018\/08\/Equal_Experts_Logo_CMYK_Colour.jpg\",\"width\":719,\"height\":340,\"caption\":\"Equal Experts\"},\"image\":{\"@id\":\"https:\/\/www.equalexperts.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/EqualExperts\",\"https:\/\/www.linkedin.com\/company\/equal-experts\/?viewAsMember=true\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.equalexperts.com\/#\/schema\/person\/627af60dc6dbc8f25fa8377b3cd8a935\",\"name\":\"Jyoti Gupta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.equalexperts.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/926ecfc0ea5cbb50a2ef56a992d82f4a93eaf3bbf3c86cd5a5ed1f2be553834d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/926ecfc0ea5cbb50a2ef56a992d82f4a93eaf3bbf3c86cd5a5ed1f2be553834d?s=96&d=mm&r=g\",\"caption\":\"Jyoti Gupta\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Enhancing SSR with React 18: A deep dive into server side rendering optimisation | Equal Experts","description":"This deep dive explores how server-side rendering is being transformed by features like HTML streaming and Suspense in React 18","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:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/","og_locale":"en_GB","og_type":"article","og_title":"Enhancing SSR with React 18 : A deep dive into server side rendering optimisation","og_description":"How React 18 enhances Server-Side Rendering (SSR) through features like Suspense, Lazy Loading, and Selective Hydration, demonstrating how these advancements significantly improve web performance and user experience. It includes practical setup and live demonstrations of these techniques in action.","og_url":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/","og_site_name":"Equal Experts","article_published_time":"2024-08-01T13:06:35+00:00","article_modified_time":"2024-12-09T21:03:47+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/server-side-rendering-FACEBOOK.jpg","type":"image\/jpeg"}],"author":"Jyoti Gupta","twitter_card":"summary_large_image","twitter_description":"How React 18 enhances Server-Side Rendering (SSR) through features like Suspense, Lazy Loading, and Selective Hydration, demonstrating how these advancements significantly improve web performance and user experience. It includes practical setup and live demonstrations of these techniques in action.","twitter_creator":"@EqualExperts","twitter_site":"@EqualExperts","twitter_misc":{"Written by":"Jyoti Gupta","Estimated reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#article","isPartOf":{"@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/"},"author":{"name":"Jyoti Gupta","@id":"https:\/\/www.equalexperts.com\/#\/schema\/person\/627af60dc6dbc8f25fa8377b3cd8a935"},"headline":"Enhancing SSR with React 18 : A deep dive into server side rendering optimisation","datePublished":"2024-08-01T13:06:35+00:00","dateModified":"2024-12-09T21:03:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/"},"wordCount":699,"publisher":{"@id":"https:\/\/www.equalexperts.com\/#organization"},"image":{"@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png","keywords":["HTML Streaming","Lazy Loading","React 18","React Server APIs","Selective Hydration","Server-Side Rendering (SSR)","Streaming SSR","Suspense","Web Performance Optimization"],"articleSection":["Tech Focus","What's New"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/","url":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/","name":"Enhancing SSR with React 18: A deep dive into server side rendering optimisation | Equal Experts","isPartOf":{"@id":"https:\/\/www.equalexperts.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage"},"image":{"@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png","datePublished":"2024-08-01T13:06:35+00:00","dateModified":"2024-12-09T21:03:47+00:00","description":"This deep dive explores how server-side rendering is being transformed by features like HTML streaming and Suspense in React 18","breadcrumb":{"@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#primaryimage","url":"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png","contentUrl":"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2024\/07\/image-1.png","width":2210,"height":418},{"@type":"BreadcrumbList","@id":"https:\/\/www.equalexperts.com\/blog\/tech-focus\/enhancing-ssr-with-react-18-a-deep-dive-into-server-side-rendering-optimisation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.equalexperts.com\/"},{"@type":"ListItem","position":2,"name":"Enhancing SSR with React 18 : A deep dive into server side rendering optimisation"}]},{"@type":"WebSite","@id":"https:\/\/www.equalexperts.com\/#website","url":"https:\/\/www.equalexperts.com\/","name":"Equal Experts","description":"Making Software. Better.","publisher":{"@id":"https:\/\/www.equalexperts.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.equalexperts.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.equalexperts.com\/#organization","name":"Equal Experts","url":"https:\/\/www.equalexperts.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.equalexperts.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2018\/08\/Equal_Experts_Logo_CMYK_Colour.jpg","contentUrl":"https:\/\/www.equalexperts.com\/wp-content\/uploads\/2018\/08\/Equal_Experts_Logo_CMYK_Colour.jpg","width":719,"height":340,"caption":"Equal Experts"},"image":{"@id":"https:\/\/www.equalexperts.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/EqualExperts","https:\/\/www.linkedin.com\/company\/equal-experts\/?viewAsMember=true"]},{"@type":"Person","@id":"https:\/\/www.equalexperts.com\/#\/schema\/person\/627af60dc6dbc8f25fa8377b3cd8a935","name":"Jyoti Gupta","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.equalexperts.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/926ecfc0ea5cbb50a2ef56a992d82f4a93eaf3bbf3c86cd5a5ed1f2be553834d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/926ecfc0ea5cbb50a2ef56a992d82f4a93eaf3bbf3c86cd5a5ed1f2be553834d?s=96&d=mm&r=g","caption":"Jyoti Gupta"}}]}},"_links":{"self":[{"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/posts\/14480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/comments?post=14480"}],"version-history":[{"count":0,"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/posts\/14480\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/media?parent=14480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/categories?post=14480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/tags?post=14480"},{"taxonomy":"location","embeddable":true,"href":"https:\/\/www.equalexperts.com\/wp-json\/wp\/v2\/location?post=14480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}