{"id":2965,"date":"2025-03-26T16:06:32","date_gmt":"2025-03-26T15:06:32","guid":{"rendered":"https:\/\/uniquedevs.com\/blog\/jak-zrozumiec-react-server-components\/"},"modified":"2025-03-27T09:24:33","modified_gmt":"2025-03-27T08:24:33","slug":"how-to-understand-react-server-components","status":"publish","type":"post","link":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/","title":{"rendered":"How to understand React Server Components?"},"content":{"rendered":"\n

What does “rendering” really mean in React?<\/h2>\n\n\n\n

In the classic sense, “rendering” means the transformation of HTML and CSS into visible pixels on the screen by the browser. React, however, uses the term differently – as the process of calling component functions to build the structure of the Virtual DOM (DOM), the internal representation of what the interface should look like.<\/p>\n\n\n\n

This means that when we talk about “rendering” in React<\/a>, we mean calculating what the JSX result should be in the form of a tree of React elements – even before anything is drawn on the screen. The “painting” (paint) of the interface itself happens only later, after the virtual tree is compared with the existing DOM and changes are applied.<\/p>\n\n\n\n

Understanding this distinction between a “renderer” in React and a classic browser renderer is crucial to correctly interpret how Server Components work.<\/p>\n\n\n\n

Context and evolution<\/h2>\n\n\n\n

From the beginning, React was a client-side rendering library. As the complexity of the application increased, the need for more efficient data transfer, better loading optimization and security began to emerge. The initial answer to these needs was Server-Side Rendering (SSR)<\/a>, which, however, still required client-side hydration. React Server Components were designed to complement these solutions, allowing even more control over what goes into the user’s browser.<\/p>\n\n\n\n

React Server Components basics<\/h2>\n\n\n\n

Server components allow direct access to server resources, such as databases or the file system, without the need for additional APIs. Below is an example of a simple server component that retrieves data from a database:<\/p>\n\n\n\n

import db from 'imaginary-db';\n\nasync function ServerComponent() {\n  const data = await db.query('SELECT * FROM table');\n\n  return (\n    <div>\n      {data.map((item) => (\n        <p key={item.id}>{item.name}<\/p>\n      ))}\n    <\/div>\n  );\n}\n\nexport default ServerComponent;\n<\/code><\/pre>\n\n\n\n
In this example, the ServerComponent performs a database query and renders the results. The whole process takes place on the server, and the client receives the already generated HTML. It is worth adding that direct SQL queries in the component are not recommended. A good practice would be to use an abstraction layer (e.g. ORM – Prisma, Drizzle).<\/p>\n\n\n\n
Componentization of the backend<\/h2>\n\n\n\n
React Server Components can be thought of as a new form of building backend logic – component-based, declarative and integrated into the UI. Instead of creating separate API endpoints and managing their state and responses on the client side, a server component can directly communicate with the database or backend services, and pass the result to the UI as finished HTML.<\/p>\n\n\n\n
This approach leads to much tighter integration between backend logic and UI components and reduces the need for intermediate layers such as REST or GraphQL – especially in applications developed by a single front-back team. This allows a server component to act as a controller, data source and view template at the same time, bringing the architecture closer to a “server-first UI” model. This means less fragmentation of responsibility and easier code maintenance in fullstack projects.<\/p>\n\n\n                        
\n                
\n                    \"Do\n                <\/div>\n                
\n                    \"Do\n                <\/div>\n                
\n                                            
\n                            Do you need support with IT projects?                        <\/div>\n                                                                                            \n                                Contact us!                            <\/a>\n                                                            <\/div>\n            <\/div>\n            \n\n\n
What are the differences between server and client components?<\/h2>\n\n\n\n
In the new React paradigm, all components are treated as server by default. To mark a component as client, add the ‘use client’ directive at the beginning of the file. Example:<\/p>\n\n\n\n
'use client';\nimport React, { useState } from 'react';\nfunction ClientComponent() {\n  const [count, setCount] = useState(0);\n  return (\n    <button onClick={() => setCount(count + 1)}>\n      Clicking {count} times\n    <\/button>\n  );\n}\nexport default ClientComponent;\n<\/code><\/pre>\n\n\n\n
Client components are necessary to handle user interactions, such as state management (useState) or side effects (useEffect). Server components, on the other hand, do not have access to hooks and are rendered only once – on the server. They are not re-rendered on the client side and do not respond to events, which means they cannot be used to support interactive functionality.<\/p>\n\n\n\n
Hybrid architecture and component nesting<\/h2>\n\n\n\n
Server components can include client components – this allows you to create an application structure in which data is retrieved and processed on the server, and interactions are handled on the client side.<\/p>\n\n\n\n
Example:<\/strong><\/p>\n\n\n\n
Server Component (ServerComponent.jsx):<\/strong><\/p>\n\n\n\n
import ClientButton from '.\/ClientButton';\nasync function ServerComponent() {\n  const data = await fetch('https:\/\/api.example.com\/data').then(res => res.json());\n\n  return (\n    <div>\n      <h2>Dane z API:<\/h2>\n      <ul>\n        {data.map((item) => (\n          <li key={item.id}>{item.name}<\/li>\n        ))}\n      <\/ul>\n      <ClientButton \/>\n    <\/div>\n  );\n}\n\nexport default ServerComponent;\n<\/code><\/pre>\n\n\n\n
Client component (ClientButton.jsx):<\/strong><\/p>\n\n\n\n
'use client';\n\nimport { useState } from 'react';\n\nexport default function ClientButton() {\n  const [clicked, setClicked] = useState(false);\n\n  return (\n    <button onClick={() => setClicked(true)}>\n      {clicked ? 'Clicked!' : 'Click me'}\n    <\/button>\n  );\n}\n<\/code><\/pre>\n\n\n\n
In some situations, a server component can be “injected” into a client component. Example:<\/p>\n\n\n\n
\/\/ ServerComponent.tsx (Server Component)\nexport default function ServerComponent() {\n  \/\/ Server-side data fetching or logic\n  const data = fetchDataOnServer();\n\n  return (\n    <div>\n      <h2>Server Component<\/h2>\n      <p>{data}<\/p>\n    <\/div>\n  );\n}\n\n\/\/ ClientComponent.tsx (Client Component)\n'use client';\n\nimport { useState } from 'react';\n\nexport default function ClientComponent({ children }) {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <h1>Client Component<\/h1>\n      <button onClick={() => setCount(count + 1)}>\n        Count: {count}\n      <\/button>\n\n      {\/* Server Component is rendered here *\/}\n      <div className=\"server-content\">\n        {children}\n      <\/div>\n    <\/div>\n  );\n}\n\n\/\/ Page.tsx (Parent Server Component)\nimport ClientComponent from '.\/ClientComponent';\nimport ServerComponent from '.\/ServerComponent';\n\nexport default function Page() {\n  return (\n    <ClientComponent>\n      <ServerComponent \/>\n    <\/ClientComponent>\n  );\n}\n<\/code><\/pre>\n\n\n\n
The above example shows the recommended pattern for passing a server component to a client component using props children<\/code>. In this approach, the server component is not directly imported in the client component file, which would not be allowed. Instead, it is the parent (server) component that renders the ClientComponent<\/code> structure by nesting inside the ServerComponent<\/code>. This allows the ClientComponent to display the ServerComponent fragment in the appropriate place, maintaining compliance with RSC rules.<\/p>\n\n\n\n
Automatic code splitting<\/h2>\n\n\n\n
React automatically separates server and client code. Server components are never sent to the browser, they remain exclusively on the server. In contrast, components marked ‘use client’ are bundled and sent to the client with full JavaScript code, ready for hydration.<\/p>\n\n\n\n
As a result, there is no need to manually configure code splitting, as in traditional SSR. The customer gets exactly what it needs – without unnecessary overhead, which significantly improves performance and application loading time.<\/p>\n\n\n\n
Integration with Next.js<\/h2>\n\n\n\n
Next.js as of version 13.4+ has introduced support for React Server Components as part of its new “App Router” routing system. This allows developers to use server components in Next.js applications, enabling efficient management of server-side and client-side rendering.<\/p>\n\n\n\n
SSR vs RSC vs SSG<\/h2>\n\n\n\n
In the React world, there are several approaches to server-side content rendering that are often confused with each other.<\/p>\n\n\n\n
    \n
  • SSR (Server-Side Rendering)<\/strong>\u00a0means that the server executes the component code and generates static HTML from it, which is sent to the client. However, for the application to be interactive, the client still needs to download and execute all the JavaScript code and perform hydration – that is, recreate the virtual DOM in the browser and assign events.<\/li>\n\n\n\n
  • SSG (Static Site Generation)<\/strong>\u00a0is a variation of SSR in which the rendering process takes place during the application build \u2013 HTML is generated once and then served as a static file. This solution is ideal for content that rarely changes.<\/li>\n\n\n\n
  • RSC (React Server Components)<\/strong>\u00a0goes one step further – rendering takes place on the server, but instead of sending the entire component code and executing it again on the client side, the server only sends HTML and the so-called\u00a0Flight Payload<\/strong>\u00a0– a serialized structure of React Elements. This means that server-side components\u00a0do not have to be sent to the client<\/strong>\u00a0as JavaScript code, which significantly reduces the bundle size and improves performance.<\/li>\n<\/ul>\n\n\n\n
    This distinction makes it easier to understand when and why to use a particular approach, depending on the needs of the application.<\/p>\n\n\n\n
    Flight Payload and component serialization<\/h2>\n\n\n\n
    The key mechanism that allows React Server Components to work without having to send JavaScript code to the client is Flight Payload<\/strong> – a special data format that contains a serialized component structure.<\/p>\n\n\n\n
    When rendering a server-side component on the server, the result of the function (i.e. the React element structure) is converted to text \u2013 a JSON tree describing the element types, props and their hierarchy. This serialized tree is then sent to the browser as a data payload<\/strong>.<\/p>\n\n\n\n
    On the client side, React reads this data and builds a Virtual DOM from it, without having to execute the server component code. This allows you to keep the full server logic outside the browser, while still giving React the ability to update and manage the UI structure.<\/p>\n\n\n\n
    Flight Payload is the basis for React Server Components and what makes it possible to completely separate the server code from the client code while maintaining a consistent component model.<\/p>\n\n\n\n
    Data transfer between components<\/strong><\/h2>\n\n\n\n
    The server component can transfer data to the client component using props. Example:<\/p>\n\n\n\n
    \/\/ ServerComponent.jsx\nimport ClientCard from '.\/ClientCard';\n\nasync function ServerComponent() {\n  const user = await getUser();\n\n  return <ClientCard name={user.name} \/>;\n}\n\nexport default ServerComponent;\n\n\/\/ ClientCard.jsx\n'use client';\n\nfunction ClientCard({ name }) {\n  return <div>Welcome, {name}!<\/div>;\n}\n\nexport default ClientCard;\n<\/code><\/pre>\n\n\n\n
    When should I not use React Server Components<\/strong>?<\/h2>\n\n\n\n
      \n
    • in simple SPA applications without SSR.<\/li>\n\n\n\n
    • in static hosting environments (e.g. GitHub Pages).<\/li>\n\n\n\n
    • in applications where each component requires dynamic interaction.<\/li>\n<\/ul>\n\n\n\n
      Practical example: Let’s assume we want to create an app that displays a list of posts and allows users to add new ones. We can use a server-side component to retrieve and render the list of posts and a client-side component to handle user interactions:<\/p>\n\n\n\n
      Server-side component:<\/p>\n\n\n\n
      \nimport db from 'imaginary-db';\nimport AddPostButton from '.\/AddPostButton';\nasync function PostsList() {\n  const posts = await db.query('SELECT * FROM posts');\n  return (\n    <div>\n      {posts.map((post) => (\n        <p key={post.id}>{post.title}<\/p>\n      ))}\n      <AddPostButton \/>\n    <\/div>\n  );\n}\nexport default PostsList;\n<\/code><\/pre>\n\n\n\n
      Client component:<\/p>\n\n\n\n
      'use client';\nimport { useState } from 'react';\nfunction AddPostButton() {\n  const [title, setTitle] = useState('');\n const handleAddPost = async () => {\n    await fetch('\/api\/addPost', {\n      method: 'POST',\n      body: JSON.stringify({ title }),\n    });\n    setTitle('');\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={title}\n        onChange={(e) => setTitle(e.target.value)}\n        placeholder=\"Nowy post\"\n      \/>\n      <button onClick={handleAddPost}>Dodaj post<\/button>\n    <\/div>\n  );\n}\n\nexport default AddPostButton;\n<\/code><\/pre>\n\n\n\n
      Benefits of using React Server Components<\/h2>\n\n\n\n
        \n
      • Performance: Reducing the amount of JavaScript code sent to the client leads to faster page loading and better application performance.<\/li>\n\n\n\n
      • Security: Storing sensitive operations, such as database queries, on the server side increases application security.<\/li>\n\n\n\n
      • code simplification: Direct access to server resources from React components simplifies application architecture, eliminating the need to create additional APIs.<\/li>\n<\/ul>\n\n\n\n
        Limitations of React Server Components<\/h2>\n\n\n\n
          \n
        • cannot use hooks such as useState, useEffect.<\/li>\n\n\n\n
        • cannot contain interactions \u2013 require client components.<\/li>\n\n\n\n
        • They do not work outside the environment that supports RSC (e.g. older CRA versions).<\/li>\n\n\n\n
        • It is not possible to dynamically import server components in the client code.<\/li>\n<\/ul>\n\n\n\n
          Examples of using React Server Components<\/strong><\/h2>\n\n\n\n
          React Server Components are particularly well suited to applications that make intensive use of data but do not require a large number of user interactions. Typical applications include:<\/p>\n\n\n\n
            \n
          • Administrative dashboards with data retrieved from multiple sources,<\/li>\n\n\n\n
          • CMS panels with dynamic content generation,<\/li>\n\n\n\n
          • E-commerce shops where product data can be retrieved on the server,<\/li>\n\n\n\n
          • Blogs and content portals where loading speed and SEO are crucial.<\/li>\n<\/ul>\n\n\n\n
            Summary<\/strong><\/h2>\n\n\n\n
            React Server Components introduce a new way of thinking about rendering in React applications, combining the advantages of server-side rendering with the flexibility of client-side components. They make it possible to create more efficient, secure, and maintainable applications. When used properly, RSCs can significantly improve the user experience and the developer’s work comfort.<\/p>\n","protected":false},"excerpt":{"rendered":"
            React Server Components (RSC) is a new feature in the React ecosystem that allows React components to be rendered exclusively on the server side. Unlike traditional client components, which are rendered in the user’s browser, server components are processed on the server and the resulting HTML is sent to the client. This approach brings a number of benefits, such as reducing the size of transmitted JavaScript packets, improving application performance and increasing security by keeping sensitive operations on the server side.<\/p>\n","protected":false},"author":2,"featured_media":4868,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[],"class_list":["post-2965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end"],"acf":[],"yoast_head":"\nHow to Understand React Server Components | UniqueDevs<\/title>\n<meta name=\"description\" content=\"What are React Server Components? How do they work and when is it a good idea to use them? A guide for React and Next.js developers - with examples and explanations.\" \/>\n<meta name=\"robots\" content=\"index, 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=\"How to Understand React Server Components | UniqueDevs\" \/>\n<meta property=\"og:description\" content=\"What are React Server Components? How do they work and when is it a good idea to use them? A guide for React and Next.js developers - with examples and explanations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/Unique-Devs\/61564365418277\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-26T15:06:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-27T08:24:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hubert Olech\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hubert Olech\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/\"},\"author\":{\"name\":\"Hubert Olech\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18\"},\"headline\":\"How to understand React Server Components?\",\"datePublished\":\"2025-03-26T15:06:32+00:00\",\"dateModified\":\"2025-03-27T08:24:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/\"},\"wordCount\":1531,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/uniquedevs.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp\",\"articleSection\":[\"Front-end\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/\",\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/\",\"name\":\"How to Understand React Server Components | UniqueDevs\",\"isPartOf\":{\"@id\":\"https:\/\/uniquedevs.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp\",\"datePublished\":\"2025-03-26T15:06:32+00:00\",\"dateModified\":\"2025-03-27T08:24:33+00:00\",\"description\":\"What are React Server Components? How do they work and when is it a good idea to use them? A guide for React and Next.js developers - with examples and explanations.\",\"breadcrumb\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage\",\"url\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp\",\"contentUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/uniquedevs.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-end\",\"item\":\"https:\/\/uniquedevs.com\/blog\/category\/front-end\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to understand React Server Components?\"}]},{\"@type\":\"Website\",\"@id\":\"https:\/\/uniquedevs.com\/#website\",\"url\":\"https:\/\/uniquedevs.com\/\",\"name\":\"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/uniquedevs.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/uniquedevs.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},[],{\"@type\":\"Person\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18\",\"name\":\"Hubert Olech\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844\",\"contentUrl\":\"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844\",\"caption\":\"Hubert Olech\"},\"description\":\"Huber Olech - Founder @UniqueDevs. \u0141\u0105cz\u0119 \u015bwiat technologii z biznesem, pomagaj\u0105c firmom rozwija\u0107 si\u0119 dzi\u0119ki innowacyjnym rozwi\u0105zaniom cyfrowym. Pasja do software development zainspirowa\u0142a mnie do zbudowania zespo\u0142u ekspert\u00f3w, z kt\u00f3rymi wsp\u00f3lnie dostarczamy najwy\u017cszej jako\u015bci produkty dla swoich Klient\u00f3w. W oparciu o swoje wieloletnie do\u015bwiadczenie w bran\u017cy IT, rozumiem trendy w nowych technologiach i potrafi\u0119 przeku\u0107 je w wymierne korzy\u015bci dla firm. Moj\u0105 misj\u0105 jest tworzenie rozwi\u0105za\u0144, kt\u00f3re nie tylko usprawniaj\u0105 procesy, ale tak\u017ce otwieraj\u0105 przed Klientami nowe mo\u017cliwo\u015bci rynkowe i zwi\u0119kszaj\u0105 ich konkurencyjno\u015b\u0107.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/hubert-olech-b0a524167\/\"],\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/author\/h-olech\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Understand React Server Components | UniqueDevs","description":"What are React Server Components? How do they work and when is it a good idea to use them? A guide for React and Next.js developers - with examples and explanations.","robots":{"index":"index","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":"How to Understand React Server Components | UniqueDevs","og_description":"What are React Server Components? How do they work and when is it a good idea to use them? A guide for React and Next.js developers - with examples and explanations.","og_url":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/","og_site_name":"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs","article_publisher":"https:\/\/www.facebook.com\/people\/Unique-Devs\/61564365418277\/","article_published_time":"2025-03-26T15:06:32+00:00","article_modified_time":"2025-03-27T08:24:33+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.jpg","type":"image\/jpeg"}],"author":"Hubert Olech","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hubert Olech","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#article","isPartOf":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/"},"author":{"name":"Hubert Olech","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18"},"headline":"How to understand React Server Components?","datePublished":"2025-03-26T15:06:32+00:00","dateModified":"2025-03-27T08:24:33+00:00","mainEntityOfPage":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/"},"wordCount":1531,"commentCount":0,"publisher":{"@id":"https:\/\/uniquedevs.com\/#organization"},"image":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage"},"thumbnailUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp","articleSection":["Front-end"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/","url":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/","name":"How to Understand React Server Components | UniqueDevs","isPartOf":{"@id":"https:\/\/uniquedevs.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage"},"image":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage"},"thumbnailUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp","datePublished":"2025-03-26T15:06:32+00:00","dateModified":"2025-03-27T08:24:33+00:00","description":"What are React Server Components? How do they work and when is it a good idea to use them? A guide for React and Next.js developers - with examples and explanations.","breadcrumb":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#primaryimage","url":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp","contentUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2025\/03\/code-3337044_1280.webp","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/uniquedevs.com\/en\/blog\/how-to-understand-react-server-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/uniquedevs.com\/en\/"},{"@type":"ListItem","position":2,"name":"Front-end","item":"https:\/\/uniquedevs.com\/blog\/category\/front-end\/"},{"@type":"ListItem","position":3,"name":"How to understand React Server Components?"}]},{"@type":"Website","@id":"https:\/\/uniquedevs.com\/#website","url":"https:\/\/uniquedevs.com\/","name":"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs","description":"","publisher":{"@id":"https:\/\/uniquedevs.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uniquedevs.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},[],{"@type":"Person","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18","name":"Hubert Olech","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/image\/","url":"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844","contentUrl":"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844","caption":"Hubert Olech"},"description":"Huber Olech - Founder @UniqueDevs. \u0141\u0105cz\u0119 \u015bwiat technologii z biznesem, pomagaj\u0105c firmom rozwija\u0107 si\u0119 dzi\u0119ki innowacyjnym rozwi\u0105zaniom cyfrowym. Pasja do software development zainspirowa\u0142a mnie do zbudowania zespo\u0142u ekspert\u00f3w, z kt\u00f3rymi wsp\u00f3lnie dostarczamy najwy\u017cszej jako\u015bci produkty dla swoich Klient\u00f3w. W oparciu o swoje wieloletnie do\u015bwiadczenie w bran\u017cy IT, rozumiem trendy w nowych technologiach i potrafi\u0119 przeku\u0107 je w wymierne korzy\u015bci dla firm. Moj\u0105 misj\u0105 jest tworzenie rozwi\u0105za\u0144, kt\u00f3re nie tylko usprawniaj\u0105 procesy, ale tak\u017ce otwieraj\u0105 przed Klientami nowe mo\u017cliwo\u015bci rynkowe i zwi\u0119kszaj\u0105 ich konkurencyjno\u015b\u0107.","sameAs":["https:\/\/www.linkedin.com\/in\/hubert-olech-b0a524167\/"],"url":"https:\/\/uniquedevs.com\/en\/blog\/author\/h-olech\/"}]}},"_links":{"self":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/2965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/comments?post=2965"}],"version-history":[{"count":2,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/2965\/revisions"}],"predecessor-version":[{"id":2969,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/2965\/revisions\/2969"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/media\/4868"}],"wp:attachment":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/media?parent=2965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/categories?post=2965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/tags?post=2965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}