142cc059.6a66ac9d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return d}));var r=n(0),a=n.n(r);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,o=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,d=p["".concat(o,".").concat(m)]||p[m]||b[m]||c;return n?a.a.createElement(d,i(i({ref:t},l),{},{components:n})):a.a.createElement(d,i({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,o=new Array(c);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var l=2;l<c;l++)o[l]=n[l];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},157:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/react-server-component-223248abd8a39c27ba93b68b8cf5076f.png"},71:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return u}));var r=n(3),a=n(7),c=(n(0),n(134)),o={slug:"react-server-component",title:"What is React Server Component",author:"Bunlong",author_title:"React Patterns Team",author_url:"https://github.com/Bunlong",author_image_url:"https://avatars1.githubusercontent.com/u/37023003?s=400&u=0049c6773040efb265cdf622076305f8b47facec&v=4",tags:["server"],image:"/img/react-server-component.png"},i={permalink:"/blog/react-server-component",source:"@site/blog/2021-01-03-react-server-component.md",description:"What is React Server Component?",date:"2021-01-03T00:00:00.000Z",tags:[{label:"server",permalink:"/blog/tags/server"}],title:"What is React Server Component",readingTime:1.005,truncated:!0,prevItem:{title:"React Hooks Cheat Sheet",permalink:"/blog/react-hooks-cheat-sheet"},nextItem:{title:"How to use async function in useEffect hook?",permalink:"/blog/how-to-use-async-function-in-useEffect-hook"}},s=[{value:"What is React Server Component?",id:"what-is-react-server-component",children:[]},{value:"What new in React Server Component?",id:"what-new-in-react-server-component",children:[{value:"React Server Component allows static content render faster",id:"react-server-component-allows-static-content-render-faster",children:[]},{value:"Won&#39;t affect the bundle size",id:"wont-affect-the-bundle-size",children:[]},{value:"Accessing database directly",id:"accessing-database-directly",children:[]}]}],l={rightToc:s};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,Object(c.b)("img",{alt:"What is React Server Component?",src:n(157).default,title:"What is React Server Component?"})),Object(c.b)("h2",{id:"what-is-react-server-component"},"What is React Server Component?"),Object(c.b)("p",null,"React Server Component (CSR) is a new component in React."),Object(c.b)("p",null,"Recently, All components in React are client-side component (MyComponent.js) but now you can create them as server-side component by just adding ",Object(c.b)("inlineCode",{parentName:"p"},".server")," (MyComponent.server.js)."),Object(c.b)("p",null,"Anyway client-size component and server-size component work together very well."),Object(c.b)("h2",{id:"what-new-in-react-server-component"},"What new in React Server Component?"),Object(c.b)("h3",{id:"react-server-component-allows-static-content-render-faster"},"React Server Component allows static content render faster"),Object(c.b)("p",null,"Server-side components can't have any interactivity like using ",Object(c.b)("inlineCode",{parentName:"p"},"useState")," hook but they can import client-size components with which the user interact."),Object(c.b)("h3",{id:"wont-affect-the-bundle-size"},"Won't affect the bundle size"),Object(c.b)("p",null,"Whatever library you include inside your server component as well as the text content it won't affect the bundle size because it is render on the server."),Object(c.b)("h3",{id:"accessing-database-directly"},"Accessing database directly"),Object(c.b)("p",null,"Imagine accesing database directly from your components instead of calling API."),Object(c.b)("p",null,"Accessing data by calling API:"),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"const users = fetch('http://localhost:8000/users).json();\n")),Object(c.b)("p",null,"You can access your data as below:"),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"const users = db.query(\n  `SELECT * FROM users WHERE name LIKE $1`,\n  ['%' + searchText + '%']\n).rows;\n")),Object(c.b)("p",null,"The feature is still in the experimental phase so keep an eye on the upcoming version of React."))}u.isMDXComponent=!0}}]);