{"id":1178,"date":"2025-05-21T11:08:38","date_gmt":"2025-05-21T11:08:38","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=1178"},"modified":"2026-02-05T12:06:15","modified_gmt":"2026-02-05T12:06:15","slug":"react-server-components-guide","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/react-server-components-guide\/","title":{"rendered":"What are React Server Components (RSC) and How do They Differ From Client Components?"},"content":{"rendered":"\n<p>React Server Components (RSCs) execute exclusively on the server (during request or build time). Their code and dependencies are never shipped to the client. This reduces bundle size for faster loads and allows direct backend access. Client Components run in the browser, handle interactivity (useState, useEffect, event handlers), and are marked with the &#8216;use client&#8217; directive.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Feature<\/strong><\/td><td><strong>Server Component<\/strong><\/td><td><strong>Client Component<\/strong><\/td><\/tr><tr><td><strong>Runs on<\/strong><\/td><td>Server<\/td><td>Browser<\/td><\/tr><tr><td><strong>Can use (<\/strong><strong>useState)<\/strong><\/td><td>\u274c No<\/td><td>\u2705 Yes<\/td><\/tr><tr><td><strong>Access backend directly<\/strong><\/td><td>\u2705 Yes<\/td><td>\u274c No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>File Naming Convention (Next.js 13\/14):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.server.jsx for server components<\/li>\n\n\n\n<li>.client.jsx for client components<\/li>\n<\/ul>\n\n\n\n<p><strong>Example :<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ components\/InteractiveButton.jsx\n'use client'; \/\/ Directive marks this as a Client Component\nimport { useState } from 'react';\nexport default function InteractiveButton() {\n  const &#91;count, setCount] = useState(0);\n  return &lt;button onClick={() => setCount(c => c + 1)}>Clicked {count}&lt;\/button>;}\n\/\/ A Server Component could import and render &lt;InteractiveButton \/><\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Server Components (RSCs) execute exclusively on the server (during request or build time). Their code and dependencies are never shipped to the client. This reduces bundle size for faster loads and allows direct backend access. Client Components run in the browser, handle interactivity (useState, useEffect, event handlers), and are marked with the &#8216;use client&#8217; [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6,3],"tags":[],"class_list":["post-1178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=1178"}],"version-history":[{"count":3,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1178\/revisions"}],"predecessor-version":[{"id":1183,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1178\/revisions\/1183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/1182"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=1178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=1178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=1178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}