{"id":7375,"date":"2020-12-22T01:45:25","date_gmt":"2020-12-21T20:45:25","guid":{"rendered":"https:\/\/ahmadawais.com\/?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:\/\/ahmadawais.com\/react-server-components\/","title":{"rendered":"React Server Components"},"content":{"rendered":"<\/section>\n<div class=\"postcontents full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7380\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg\" alt=\"React Server Components\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg 1920w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-300x169.jpg 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-1024x576.jpg 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-768x432.jpg 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-1536x864.jpg 1536w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-1680x945.jpg 1680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-860x484.jpg 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-680x383.jpg 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-400x225.jpg 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-50x28.jpg 50w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components-600x338.jpg 600w\" sizes=\"auto, (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; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" 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":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[215],"tags":[168],"class_list":["post-7375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\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=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahmadawais.com\/react-server-components\/\" \/>\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:\/\/ahmadawais.com\/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:\/\/ahmadawais.com\/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=\"author\" content=\"Ahmad Awais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@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\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/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:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/\"},\"wordCount\":976,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/react-server-components.jpg\",\"keywords\":[\"React\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/\",\"name\":\"React Server Components\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/react-server-components.jpg\",\"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:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/react-server-components.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/react-server-components.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"React Server Components\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/react-server-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Server Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/\",\"name\":\"Ahmad Awais\",\"description\":\"Founder &amp; CEO of CommandCode.ai f\\\/k\\\/a Langbase | Google Developers Advisory Board (gDAB) founding member\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahmadawais.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\"},\"description\":\"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \\\"Awais is an awesome example for developers\\\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\\\/ML\\\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\\\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.\",\"sameAs\":[\"https:\\\/\\\/AhmadAwais.com\\\/\",\"https:\\\/\\\/facebook.com\\\/AhmadAwais\",\"https:\\\/\\\/instagram.com\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/x.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":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahmadawais.com\/react-server-components\/","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:\/\/ahmadawais.com\/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:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","type":"image\/jpeg"}],"author":"Ahmad Awais","twitter_card":"summary_large_image","twitter_creator":"@MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/react-server-components\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/react-server-components\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/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:\/\/ahmadawais.com\/react-server-components\/"},"wordCount":976,"commentCount":0,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"image":{"@id":"https:\/\/ahmadawais.com\/react-server-components\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","keywords":["React"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/react-server-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/react-server-components\/","url":"https:\/\/ahmadawais.com\/react-server-components\/","name":"React Server Components","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahmadawais.com\/react-server-components\/#primaryimage"},"image":{"@id":"https:\/\/ahmadawais.com\/react-server-components\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","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:\/\/ahmadawais.com\/react-server-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/react-server-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/react-server-components\/#primaryimage","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","width":1920,"height":1080,"caption":"React Server Components"},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/react-server-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"React Server Components"}]},{"@type":"WebSite","@id":"https:\/\/ahmadawais.com\/#website","url":"https:\/\/ahmadawais.com\/","name":"Ahmad Awais","description":"Founder &amp; CEO of CommandCode.ai f\/k\/a Langbase | Google Developers Advisory Board (gDAB) founding member","publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahmadawais.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg"},"description":"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \"Awais is an awesome example for developers\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\/ML\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.","sameAs":["https:\/\/AhmadAwais.com\/","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/x.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/12\/react-server-components.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/comments?post=7375"}],"version-history":[{"count":5,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7375\/revisions"}],"predecessor-version":[{"id":7385,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7375\/revisions\/7385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media\/7380"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=7375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=7375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=7375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}