const{Fragment:i,jsx:e,jsxs:n}=arguments[0];function _createMdxContent(h){const s={a:"a",code:"code",figure:"figure",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...h.components};return n(i,{children:[e(s.h1,{id:"understanding-react-server-components",children:e(s.a,{className:"anchor",href:"#understanding-react-server-components",children:"Understanding React Server Components"})}),"\n",e(s.p,{children:"React Server Components (RSC) are a game-changer for building modern web applications. Let's explore how they work and why they matter."}),"\n",e(s.h2,{id:"what-are-server-components",children:e(s.a,{className:"anchor",href:"#what-are-server-components",children:"What Are Server Components?"})}),"\n",n(s.p,{children:["Server Components are React components that ",e(s.strong,{children:"run only on the server"}),". They never ship JavaScript to the client, making your app significantly lighter."]}),"\n",e(s.h3,{id:"key-benefits",children:e(s.a,{className:"anchor",href:"#key-benefits",children:"Key Benefits"})}),"\n",n(s.ul,{children:["\n",n(s.li,{children:[e(s.strong,{children:"Zero Bundle Size"}),": Server Components don't add to your JavaScript bundle"]}),"\n",n(s.li,{children:[e(s.strong,{children:"Direct Database Access"}),": Fetch data directly without API routes"]}),"\n",n(s.li,{children:[e(s.strong,{children:"Automatic Code Splitting"}),": Only client components are bundled"]}),"\n",n(s.li,{children:[e(s.strong,{children:"Better Performance"}),": Reduced client-side JavaScript"]}),"\n"]}),"\n",e(s.h2,{id:"example-fetching-data",children:e(s.a,{className:"anchor",href:"#example-fetching-data",children:"Example: Fetching Data"})}),"\n",e(s.p,{children:"Here's how you fetch data in a Server Component:"}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:n(s.code,{"data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// app/posts/page.tsx (Server Component by default)"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { posts } "}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" '@/.velite'"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"export"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" default"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" async"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" function"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" PostsPage"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:" // Direct data access - no API route needed!"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),e(s.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" publishedPosts"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" posts."}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"filter"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),e(s.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"post"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" post.published);"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),e(s.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"div"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"container mx-auto"'}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),e(s.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"h1"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"font-display text-4xl mb-8"'}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">Blog Posts"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),e(s.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"ul"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"space-y-4"'}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {publishedPosts."}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"map"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),e(s.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"post"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),e(s.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"li"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" key"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{post.slug}>"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),e(s.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"h2"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"text-2xl font-semibold"'}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{post.title}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),e(s.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"p"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"text-text-secondary"'}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{post.description}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ))}"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),"\n",e(s.h2,{id:"server-vs-client-components",children:e(s.a,{className:"anchor",href:"#server-vs-client-components",children:"Server vs Client Components"})}),"\n",n(s.table,{children:[e(s.thead,{children:n(s.tr,{children:[e(s.th,{children:"Feature"}),e(s.th,{children:"Server Component"}),e(s.th,{children:"Client Component"})]})}),n(s.tbody,{children:[n(s.tr,{children:[e(s.td,{children:"Interactivity"}),e(s.td,{children:"❌ No"}),e(s.td,{children:"✅ Yes"})]}),n(s.tr,{children:[e(s.td,{children:"State & Effects"}),e(s.td,{children:"❌ No"}),e(s.td,{children:"✅ Yes"})]}),n(s.tr,{children:[e(s.td,{children:"Bundle Size"}),e(s.td,{children:"✅ Zero"}),e(s.td,{children:"❌ Counted"})]}),n(s.tr,{children:[e(s.td,{children:"Data Fetching"}),e(s.td,{children:"✅ Direct"}),e(s.td,{children:"⚠️ Via API"})]})]})]}),"\n",e(s.h2,{id:"when-to-use-each",children:e(s.a,{className:"anchor",href:"#when-to-use-each",children:"When to Use Each?"})}),"\n",e(s.p,{children:e(s.strong,{children:"Use Server Components for:"})}),"\n",n(s.ul,{children:["\n",e(s.li,{children:"Static content"}),"\n",e(s.li,{children:"Data fetching"}),"\n",e(s.li,{children:"SEO-critical pages"}),"\n",e(s.li,{children:"Heavy dependencies (markdown processors, etc.)"}),"\n"]}),"\n",e(s.p,{children:e(s.strong,{children:"Use Client Components for:"})}),"\n",n(s.ul,{children:["\n",e(s.li,{children:"Interactivity (onClick, onChange)"}),"\n",e(s.li,{children:"State management (useState, useContext)"}),"\n",e(s.li,{children:"Browser APIs (localStorage, window)"}),"\n",e(s.li,{children:"Third-party interactive libraries"}),"\n"]}),"\n",e(s.h2,{id:"the-use-client-directive",children:e(s.a,{className:"anchor",href:"#the-use-client-directive",children:"The 'use client' Directive"})}),"\n",n(s.p,{children:["To create a Client Component, add ",e(s.code,{children:"'use client'"})," at the top:"]}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:n(s.code,{"data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'use client'"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { useState } "}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),e(s.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'react'"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"export"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" function"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Counter"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),e(s.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"count"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),e(s.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setCount"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),e(s.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"0"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),e(s.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"button"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onClick"}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{() "}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),e(s.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" setCount"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(count "}),e(s.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"+"}),e(s.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" 1"}),e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")}>"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" Count: {count}"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),"\n",e(s.h2,{id:"best-practices",children:e(s.a,{className:"anchor",href:"#best-practices",children:"Best Practices"})}),"\n",n(s.ol,{children:["\n",n(s.li,{children:[e(s.strong,{children:"Start with Server Components"})," - Only add 'use client' when needed"]}),"\n",n(s.li,{children:[e(s.strong,{children:"Keep Client Components Small"})," - Minimize the client-side JavaScript"]}),"\n",n(s.li,{children:[e(s.strong,{children:"Compose Wisely"})," - Server Components can import Client Components"]}),"\n",n(s.li,{children:[e(s.strong,{children:"Fetch High in the Tree"})," - Fetch data in parent Server Components"]}),"\n"]}),"\n",e(s.h2,{id:"conclusion",children:e(s.a,{className:"anchor",href:"#conclusion",children:"Conclusion"})}),"\n",e(s.p,{children:"React Server Components represent a fundamental shift in how we build React apps. By running components on the server, we can build faster, lighter applications with better SEO and user experience."}),"\n",e(s.p,{children:"The future of React is server-first, and it's pretty exciting! 🎉"})]})}return{default:function(i={}){const{wrapper:n}=i.components||{};return n?e(n,{...i,children:e(_createMdxContent,{...i})}):_createMdxContent(i)}};

All Articles

Hello World - Welcome to My Blog

Understanding React Server Components