{"id":7375,"date":"2020-12-22T01:45:25","date_gmt":"2020-12-21T20:45:25","guid":{"rendered":"https:\/\/staging-ahmadawais.kinsta.cloud\/?p=7375"},"modified":"2020-12-22T02:01:07","modified_gmt":"2020-12-21T21:01:07","slug":"react-server-components","status":"publish","type":"post","link":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/","title":{"rendered":"React Server Components"},"content":{"rendered":"<\/section>\n<div class=\"postcontents full\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7380\" src=\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg\" alt=\"React Server Components\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg 1920w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-300x169.jpg 300w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-1024x576.jpg 1024w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-768x432.jpg 768w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-1536x864.jpg 1536w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-1680x945.jpg 1680w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-860x484.jpg 860w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-680x383.jpg 680w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-400x225.jpg 400w, https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components-50x28.jpg 50w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>The React.js core team announced the RFC on <strong>React Server Components<\/strong> just now. Imagine React components that <strong>run only on the server and have zero impact on the client-side bundle-size<\/strong>. Hence zero-bundle-size.<\/p>\n<h2 id=\"what-are-react-server-components\">What are React Server Components?<a href=\"#what-are-react-server-components\" class=\"heading-link\">#<\/a><\/h2>\n<p><strong>React Server Components<\/strong> allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.<\/p>\n<p>I believe this will be a fantastic improvement for the overall React ecosystem, something I&#8217;ve seen happen with Next.js that I&#8217;m a big advocate of <em>especially since I come from a PHP background<\/em>.<\/p>\n<h2 id=\"learning-react-server-components-rsc\">Learning React Server Components (RSC)<a href=\"#learning-react-server-components-rsc\" class=\"heading-link\">#<\/a><\/h2>\n<p>Before you think about getting started with React Server Components, you should know that the <strong>React Server Components are still in research and development<\/strong>. To quote the react core team:<\/p>\n<blockquote><p>We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so don\u2019t feel like you have to catch up right now!<\/p><\/blockquote>\n<h3 id=\"step-1-watch-react-server-components-talk\">Step #1: Watch React Server Components Talk<a href=\"#step-1-watch-react-server-components-talk\" class=\"heading-link\">#<\/a><\/h3>\n<p>Start by watching this talk on React Server Components by <a class=\"css-1hs4uiz\" href=\"https:\/\/twitter.com\/dan_abramov\">Dan Abramov<\/a>, <a class=\"css-1hs4uiz\" href=\"https:\/\/twitter.com\/sugarpirate_\">Lauren Tan<\/a>, <a class=\"css-1hs4uiz\" href=\"https:\/\/twitter.com\/en_JS\">Joseph Savona<\/a>, and <a class=\"css-1hs4uiz\" href=\"https:\/\/twitter.com\/sebmarkbage\">Sebastian Markb\u00e5ge<\/a>.<\/p>\n<div class=\"wide\">\n<p><iframe loading=\"lazy\" title=\"Data Fetching with React Server Components\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/TQQPAU21ZUw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<\/div>\n<h3 id=\"step-2-clone-react-server-components-demo\">Step #2: Clone React Server Components Demo<a href=\"#step-2-clone-react-server-components-demo\" class=\"heading-link\">#<\/a><\/h3>\n<p>Now that you&#8217;ve watched the talk, go ahead, <strong><a href=\"http:\/\/github.com\/reactjs\/server-components-demo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">clone this demo<\/a><\/strong> to play with React Server Components on your computer. Since this is where you can provide the feedback to the React Core Team \u2014 it&#8217;s definitely worth spending some time looking at the current state of server components.<\/p>\n<p>This is a demo app built with Server Components, an experimental React feature. The talk above includes a walkthrough of the demo code and highlights key points of how Server Components work and what features they provide.<\/p>\n<p><a id=\"user-content-when-will-i-be-able-to-use-this\" class=\"anchor\" href=\"https:\/\/github.com\/reactjs\/server-components-demo#when-will-i-be-able-to-use-this\" aria-hidden=\"true\"><\/a><strong>When will I be able to use this?<\/strong> Server Components are an experimental feature. Meaning they <strong>are not ready for adoption<\/strong>. For now, we recommend experimenting w Server Components via this demo app. <strong>Use this in your own projects at your own risk.<\/strong><\/p>\n<h3 id=\"step-3-read-react-server-components-rfc\">Step #3: Read React Server Components RFC<a href=\"#step-3-read-react-server-components-rfc\" class=\"heading-link\">#<\/a><\/h3>\n<p>Now that you have watched the React Server Components talk and played around with the server-components demo \u2014 head over to the React.js RFCs repo to read the <a href=\"https:\/\/github.com\/reactjs\/rfcs\/pull\/188\">proposed<\/a> introduction to <a href=\"https:\/\/github.com\/reactjs\/rfcs\/blob\/6cb4c0077ed60d71d5b352bcb4f3579c2a454eb1\/text\/0000-server-components.md\">Server Components<\/a> for React. There&#8217;s also an <a href=\"https:\/\/github.com\/reactjs\/rfcs\/blob\/6cb4c0077ed60d71d5b352bcb4f3579c2a454eb1\/text\/0000-server-components.md#faq\">FAQ section<\/a> at the end. You may also check out a <a href=\"https:\/\/github.com\/reactjs\/rfcs\/pull\/189\">related RFC to provide feedback about the naming conventions<\/a>.<\/p>\n<h2 id=\"from-the-react-server-components-rfc\">From the React Server Components RFC<a href=\"#from-the-react-server-components-rfc\" class=\"heading-link\">#<\/a><\/h2>\n<p>I&#8217;m quoting a portion of the RFC to give you a deeper technical understanding of the Server Components concepts. Since it&#8217;s an experimental feature I definitely recommend watching the video and reading the <a href=\"https:\/\/github.com\/reactjs\/rfcs\/blob\/6cb4c0077ed60d71d5b352bcb4f3579c2a454eb1\/text\/0000-server-components.md\">RFC<\/a>.<\/p>\n<p>This RFC discusses an upcoming feature for React called <strong>Server Components<\/strong>. Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering:<\/p>\n<ul>\n<li>Server Components <strong>run only on the server and have zero impact on bundle-size<\/strong>. Their code is never downloaded to clients, helping to reduce bundle sizes and improve startup time.<\/li>\n<li>Server Components <strong>can access server-side data sources<\/strong>, such as databases, file systems, or (micro)services.<\/li>\n<li>Server Components <strong>seamlessly integrate with Client Components<\/strong> \u2014 ie traditional React components. Server Components can load data on the server and pass it as props to Client Components, allowing the client to handle rendering the interactive parts of a page.<\/li>\n<li>Server Components <strong>can dynamically choose which Client Components to render<\/strong>, allowing clients to download just the minimal amount of code necessary to render a page.<\/li>\n<li>Server Components <strong>preserve client state when reloaded<\/strong>. This means that client state, focus, and even ongoing animations aren\u2019t disrupted or reset when a Server Component tree is refetched.<\/li>\n<li>Server Components are <strong>rendered progressively and incrementally stream rendered units of the UI to the client<\/strong>. Combined with Suspense, this allows developers to <strong>craft intentional loading states<\/strong> and <strong>quickly show important content<\/strong> while waiting for the remainder of a page to load.<\/li>\n<li>Developers can also <strong>share code between the server and client<\/strong>, allowing a single component to be used to render a static version of some content on the server on one route and an editable version of that content on the client in a different route.<\/li>\n<\/ul>\n<h2 id=\"zero-bundle-size-components\">Zero-Bundle-Size Components<a href=\"#zero-bundle-size-components\" class=\"heading-link\">#<\/a><\/h2>\n<p>Developers constantly have to make choices about using third-party packages. Using a package to render some markdown or format a date is convenient for us as developers, but it increases code size and hurts performance for our users.<\/p>\n<p>For example, today rendering our Note example with Markdown might require over 240K of JS (over 74K gzipped individually).<\/p>\n<pre class=\"lang:javascript\">\/\/ NoteWithMarkdown.js\r\n\/\/ NOTE: *before* Server Components.\r\n\r\nimport marked from 'marked'; \/\/ 35.9K (11.2K gzipped)\r\nimport sanitizeHtml from 'sanitize-html'; \/\/ 206K (63.3K gzipped)\r\n\r\nfunction NoteWithMarkdown({text}) {\r\n  const html = sanitizeHtml(marked(text));\r\n  return (\/* render *\/);\r\n}<\/pre>\n<p>However, many parts of an application aren\u2019t interactive and don\u2019t need full data consistency. For example, \u201cdetail\u201d pages often show information about a product, user, or other entity and don\u2019t need to update in response to user interaction. The Note example here is a perfect example.<\/p>\n<p>Server Components allow developers to render static content on the server, taking full advantage of React\u2019s component-oriented model and freely using third-party packages while incurring zero impact on bundle size.<\/p>\n<p>If we migrate the above example to a Server Component we can use the <strong>exact same code<\/strong> for our feature but avoid sending it to the client &#8211; a code savings of over 240K (uncompressed):<\/p>\n<pre class=\"lang:javascript\">\/\/ NoteWithMarkdown.server.js - Server Component === zero bundle size.\r\n\r\nimport marked from 'marked'; \/\/ zero bundle size.\r\nimport sanitizeHtml from 'sanitize-html'; \/\/ zero bundle size.\r\n\r\nfunction NoteWithMarkdown({text}) {\r\n  \/\/ same as before\r\n}<\/pre>\n<h2 id=\"whats-next\">What&#8217;s Next?!<a href=\"#whats-next\" class=\"heading-link\">#<\/a><\/h2>\n<p>Well, this is all pretty exciting as you can see from the examples shared in the RFC quoted above. Though, it may also end up complicating the React development even further.<\/p>\n<p>I am however super excited to see this through as I believe ultimately React Server Components will lead to a faster and more accessible user-experience of browsing a React.js website. That&#8217;s really great for everyone. Right?!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size. <\/p>\n","protected":false},"author":2,"featured_media":7380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[215],"tags":[168],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Server Components<\/title>\n<meta name=\"description\" content=\"The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Server Components\" \/>\n<meta property=\"og:description\" content=\"The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Awais\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-21T20:45:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-21T21:01:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/MrAhmadAwais\" \/>\n<meta name=\"twitter:site\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ahmad Awais\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#website\",\"url\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/\",\"name\":\"Ahmad Awais\",\"description\":\"Open Source Developer Advocate\",\"publisher\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg\",\"contentUrl\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"React Server Components\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#webpage\",\"url\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/\",\"name\":\"React Server Components\",\"isPartOf\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#primaryimage\"},\"datePublished\":\"2020-12-21T20:45:25+00:00\",\"dateModified\":\"2020-12-21T21:01:07+00:00\",\"description\":\"The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size.\",\"breadcrumb\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Server Components\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#webpage\"},\"author\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"React Server Components\",\"datePublished\":\"2020-12-21T20:45:25+00:00\",\"dateModified\":\"2020-12-21T21:01:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#webpage\"},\"wordCount\":967,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b\"},\"image\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg\",\"keywords\":[\"React\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\/\/staging-ahmadawais.kinsta.cloud\/#personlogo\"},\"description\":\"Helping businesses understand developers. Head of Developer Relations RapidAPI. \ud83d\udcdf Edutainer at Node.js CLI Automation course (100 videos \u00b7 22 Projects) & VSCode.pro course (over 20K devs). \ud83c\udfa9 Award-winning Open Source Engineer & Dev Advocate \ud83e\udd8a Google Developers Expert Web DevRel \ud83d\ude80 Mars Ingenuity Helicopter code contributor \ud83c\udfc6 8th GitHub Stars Award recipient \ud83c\udf33 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. \u270c\ufe0f Author of various open-source dev-tools and software libraries used by millions of developers worldwide \u24e6 WordPress Core Developer \ud83d\udce3 TEDx Speaker with 100+ international talks. \ud83d\udd25 Satya Nadella \u00b7 CEO of Microsoft, said \u2014 Awais is an awesome example for developers. \ud83d\ude4c Leading developers and publishing technical content for over a decade \ud83d\udc9c Loves his wife (Maedah) \u276f Read more about Ahmad Awais. \ud83d\udc4b\u2026 Awais is mostly active on Twitter @MrAhmadAwais\",\"sameAs\":[\"https:\/\/staging-ahmadawais.kinsta.cloud\",\"https:\/\/facebook.com\/AhmadAwais\",\"https:\/\/instagram.com\/MrAhmadAwais\/\",\"https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/MrAhmadAwais\",\"https:\/\/youtube.com\/AhmadAwais\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Server Components","description":"The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"React Server Components","og_description":"The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size.","og_url":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2020-12-21T20:45:25+00:00","article_modified_time":"2020-12-21T21:01:07+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#website","url":"https:\/\/staging-ahmadawais.kinsta.cloud\/","name":"Ahmad Awais","description":"Open Source Developer Advocate","publisher":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging-ahmadawais.kinsta.cloud\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#primaryimage","inLanguage":"en-US","url":"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","contentUrl":"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","width":1920,"height":1080,"caption":"React Server Components"},{"@type":"WebPage","@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#webpage","url":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/","name":"React Server Components","isPartOf":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#primaryimage"},"datePublished":"2020-12-21T20:45:25+00:00","dateModified":"2020-12-21T21:01:07+00:00","description":"The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size.","breadcrumb":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging-ahmadawais.kinsta.cloud\/"},{"@type":"ListItem","position":2,"name":"React Server Components"}]},{"@type":"Article","@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#article","isPartOf":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#webpage"},"author":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"React Server Components","datePublished":"2020-12-21T20:45:25+00:00","dateModified":"2020-12-21T21:01:07+00:00","mainEntityOfPage":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#webpage"},"wordCount":967,"commentCount":0,"publisher":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"image":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#primaryimage"},"thumbnailUrl":"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","keywords":["React"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/staging-ahmadawais.kinsta.cloud\/react-server-components\/#respond"]}]},{"@type":["Person","Organization"],"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#personlogo","inLanguage":"en-US","url":"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/staging-ahmadawais.kinsta.cloud\/#personlogo"},"description":"Helping businesses understand developers. Head of Developer Relations RapidAPI. \ud83d\udcdf Edutainer at Node.js CLI Automation course (100 videos \u00b7 22 Projects) & VSCode.pro course (over 20K devs). \ud83c\udfa9 Award-winning Open Source Engineer & Dev Advocate \ud83e\udd8a Google Developers Expert Web DevRel \ud83d\ude80 Mars Ingenuity Helicopter code contributor \ud83c\udfc6 8th GitHub Stars Award recipient \ud83c\udf33 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. \u270c\ufe0f Author of various open-source dev-tools and software libraries used by millions of developers worldwide \u24e6 WordPress Core Developer \ud83d\udce3 TEDx Speaker with 100+ international talks. \ud83d\udd25 Satya Nadella \u00b7 CEO of Microsoft, said \u2014 Awais is an awesome example for developers. \ud83d\ude4c Leading developers and publishing technical content for over a decade \ud83d\udc9c Loves his wife (Maedah) \u276f Read more about Ahmad Awais. \ud83d\udc4b\u2026 Awais is mostly active on Twitter @MrAhmadAwais","sameAs":["https:\/\/staging-ahmadawais.kinsta.cloud","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/twitter.com\/https:\/\/twitter.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"https:\/\/staging-ahmadawais.kinsta.cloud\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","_links":{"self":[{"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/posts\/7375"}],"collection":[{"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/comments?post=7375"}],"version-history":[{"count":5,"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/posts\/7375\/revisions"}],"predecessor-version":[{"id":7385,"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/posts\/7375\/revisions\/7385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/media\/7380"}],"wp:attachment":[{"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/media?parent=7375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/categories?post=7375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging-ahmadawais.kinsta.cloud\/api\/wp\/v2\/tags?post=7375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}