---
title: React Server Components Working and Benefits
description: React Server Components Working and its Benefits for enhancing application performance by re-write React components.
image: https://www.xenonstack.com/hubfs/xenonstack-react-server-components-working-process.png
---
- [](https://www.xenonstack.com/)
- - Foundry
Foundry
Unified reasoning foundation enabling seamless orchestration, analytics, infrastructure, and trust across intelligent ecosystems
[ Akira AI - Reasoning and Agent Orchestration Turn models into collaborative, policy-governed agents that learn and act together](https://www.xenonstack.com/agentic-platforms/akira-ai/)
[ ElixirData - Agentic Analytics Intelligence Explainable, decision-centric analytics for measurable business outcomes](https://www.xenonstack.com/agentic-platforms/elixirdata/)
[ NexaStack - Agentic Infrastructure Automation Secure, compliant, and high-performance AI deployment across cloud, edge, and on-prem](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/)
[ MetaSecure - Trust, Compliance, and Defense Continuous assurance with AI-BOMs, risk scoring, and agentic security](https://www.xenonstack.com/agentic-platforms/metasecure/)
[ Neural AI – Agentic Intelligence & Autonomous Innovation AI agents for intelligent automation and adaptive innovation](https://www.xenonstack.com/agentic-platforms/neural-ai/)
### Reasoning Stack
Powers intelligent systems with unified orchestration, adaptive analytics, scalable infrastructure, and built-in trust
[See in action ](https://www.xenonstack.com/agentic-ai/analytics-platform/)
- AI Agents
AI Agents
Pre-built autonomous agents designed for domain-specific intelligence, seamless integrations, and governed enterprise deployment
By Domain
[ Agentic Operations AgentSRE and AgentOps for automated reliability and IT operations](https://www.xenonstack.com/ai-agents/agentic-operations/)
[ Agentic Finance FinOps Agent and Budget Enforcer for optimized financial governance](https://www.xenonstack.com/ai-agents/agentic-finance/)
[ Agentic Risk and Compliance Audit Agent and Risk Assurance to automate compliance monitoring](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/)
[ Agentic Analytics Analyst Agent and Decision Advisor for AI-driven insights and strategy](https://www.xenonstack.com/ai-agents/agentic-analytics/)
[ Agentic Supply Chain AI-powered advisor for smart sourcing, vendor insights, and strategic procurement](https://www.xenonstack.com/ai-agents/agentic-procurement/)
[ Agentic Security AI-driven defense delivering proactive threat detection and autonomous security orchestration](https://www.xenonstack.com/ai-agents/agentic-security/)
By Integration
[ Snowflake AI Agents Pre-built connectors for real-time data intelligence on Snowflake](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/)
[ Databricks AI Agents AI agents for automated data workflows and insights on Databricks](https://www.xenonstack.com/ai-agents/databricks-ai-agents/)
[ ServiceNow AI Agents AI workflows to streamline service, incident, and operations automation](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/)
[ Jira/Project Management Agents AI agents for backlog grooming, sprint planning, and real-time project visibility](https://www.xenonstack.com/ai-agents/jira-agents-actions/)
[ SAP AI Agents AI copilots for finance, supply chain, and HR decisions across your SAP landscape](https://www.xenonstack.com/ai-agents/sap-agents-actions/)
[ Oracle AI Agents AI agents for financials, risk, and operations intelligence across Oracle applications](https://www.xenonstack.com/ai-agents/oracle-agents-actions/)
- Solutions
Solutions
Governed AI solutions driving measurable business outcomes across operations, finance, security, and analytics
[ ReliabilityOps — Cloud Reliability Automation Automate reliability checks and optimize uptime with continuous reasoning](https://www.xenonstack.com/ai-agents/cloudops-reimagined/)
[ IncidentOps — AI-Driven Site Reliability Resolve incidents faster with AI-led triage, contextual RCA, and adaptive recovery](https://www.xenonstack.com/ai-agents/sre-reimagined/)
[ PlatformOps — Unified Platform Automation Unify infrastructure and AI systems with reasoning-driven automation and compliance](https://www.xenonstack.com/ai-agents/platformops-reimagined/)
[ DefenseOps — Autonomous Threat Defense Detect, analyze, and neutralize threats autonomously with adaptive defense intelligence](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/)
[ TrustOps — Responsible AI and Continuous Governance Ensure transparency, fairness, and compliance in every AI system and decision](https://www.xenonstack.com/ai-agents/secops-reimagined/)
[ RiskOps — Predictive Risk Intelligence Predict, score, and mitigate risks proactively with real-time assurance intelligence](https://www.xenonstack.com/ai-agents/risk-management-aviator/)
[ FactoryOps — AI-Driven Industrial Automation Predict equipment failures and optimize production with adaptive intelligence](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/)
[ AssetOps — Automated Asset Reliability Enable predictive maintenance and optimize lifecycle performance continuously](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/)
[ QualityOps — Continuous Testing Intelligence Accelerate testing cycles with autonomous validation and reasoning feedback](https://www.xenonstack.com/ai-agents/qaops-reimagined/)
[ SourcingOps — Intelligent Procurement Automate sourcing, vendor analysis, and spend insights for agile procurement](https://www.xenonstack.com/ai-agents/procurement-reimagined/)
[ DataOps — Autonomous Data Pipeline Governance Ensure reliability, detect anomalies, and self-heal data pipelines automatically](https://www.xenonstack.com/ai-agents/dataops-reimagined/)
[ DecisionOps — Intelligent Decisioning Deliver explainable, auditable, and measurable outcomes with reasoning AI](https://www.xenonstack.com/ai-agents/desicison-reimagined/)
- Industries
Industries
Industry blueprints showcasing agentic transformation, real-world impact, and measurable outcomes across key sectors
[ Aerospace and Defense Autonomous flight systems and predictive maintenance powered by AI](https://www.xenonstack.com/industries/aerospace/)
[ Banking - Finance - Payments AI governance for secure, compliant, and adaptive financial operations](https://www.xenonstack.com/industries/banking/)
[ Manufacturing and Industrial Automation Smart factories using reasoning systems for real-time quality optimization](https://www.xenonstack.com/industries/digital-manufacturing-services/)
[ Enterprise - IT Operations AI-powered IT operations ensuring reliability, scalability, and cost efficiency](https://www.xenonstack.com/industries/enterprise-technology/)
[ Consumer – Experience – Tech Personalized digital experiences driven by explainable and trusted AI](https://www.xenonstack.com/industries/consumer-technology/)
[ Retail and Supply Chain Autonomous retail analytics enhancing operations, engagement, and forecasting accuracy](https://www.xenonstack.com/industries/retail/)
[ Travel – Hospitality – Guest Experience Agentic systems delivering personalized guest journeys with contextual intelligence](https://www.xenonstack.com/industries/travel-hospitality/)
- Resources
Resources
Explore insights, success stories, and learning programs that build knowledge and strengthen the AI transformation journey
[ Blogs Stay updated with the latest industry trends, news, and thought leadership](https://www.xenonstack.com/blog)
[ Insights Explore in-depth AI articles, use cases, and innovative applications](https://www.xenonstack.com/insights)
[ Use Cases Discover real-world applications of Agentic AI across industries](https://www.xenonstack.com/use-cases)
[ Case Studies Learn how organizations are achieving success with our solutions](https://xenonstack.com/case-studies)
[ Video Library Explore our collection of product demos, webinars, and AI thought leadership videos](https://www.xenonstack.com/videos/)
[ E-Books Download comprehensive e-books on AI, SRE, and more](https://www.xenonstack.com/e-book)
[ Presentations View our AI presentations, talks, and conference sessions on AI innovation](https://www.xenonstack.com/presentations/)
- Company
Company
Discover our people, principles, and purpose driving innovation, trust, and meaningful careers in the AI era
[ About Us Discover our mission, story, and the values driving our innovation and impact](https://www.xenonstack.com/about-us/)
[ Xenonstack Academy Enhance your skills with our comprehensive training programs and courses designed for modern tech professionals](https://www.xenonstack.com/xenonstack-academy/)
[ Contact Us Get in touch with us for support, business inquiries, or collaboration opportunities](https://www.xenonstack.com/contact-us/)
[ Leadership Team Meet the visionary leaders guiding Xenonstack’s strategic direction and innovation](https://www.xenonstack.com/about-us/leadership-team/)
[ Tao of Xenonstack Learn about the guiding principles and philosophies that shape our culture and solutions](https://www.xenonstack.com/about-us/tao-of-xenonstack/)
[ How We Work Understand our collaborative approach and work culture that drive successful outcomes](https://www.xenonstack.com/about-us/how-we-work/)
[ How We Grow Explore how we nurture talent, foster innovation, and promote sustainable growth](https://www.xenonstack.com/about-us/how-we-grow/)
[ Careers Join our growing team! Explore career opportunities to work at the forefront of innovation](https://www.xenonstack.com/careers/)
- Get Started
[](https://www.xenonstack.com/)
- Foundry 
[Akira AI](https://www.xenonstack.com/agentic-platforms/akira-ai/) [ElixirData](https://www.xenonstack.com/agentic-platforms/elixirdata/) [NexaStack](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/) [MetaSecure](https://www.xenonstack.com/agentic-platforms/metasecure/) [Neural AI](https://www.xenonstack.com/agentic-platforms/neural-ai/)
- AI Agents 
[Agentic Operations](https://www.xenonstack.com/ai-agents/agentic-operations/) [Agentic Finance](https://www.xenonstack.com/ai-agents/agentic-finance/) [Agentic Risk and Compliance](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/) [Agentic Analytics](https://www.xenonstack.com/ai-agents/agentic-analytics/) [Agentic Supply Chain](https://www.xenonstack.com/ai-agents/agentic-procurement/) [Agentic Security](https://www.xenonstack.com/ai-agents/agentic-security/) [Snowflake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [Databricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [Jira/Project Management Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/)
- Solutions 
[ReliabilityOps](https://www.xenonstack.com/ai-agents/cloudops-reimagined/) [IncidentOps](https://www.xenonstack.com/ai-agents/sre-reimagined/) [PlatformOps](https://www.xenonstack.com/ai-agents/platformops-reimagined/) [DefenseOps](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/) [TrustOps](https://www.xenonstack.com/ai-agents/secops-reimagined/) [RiskOps](https://www.xenonstack.com/ai-agents/risk-management-aviator/) [FactoryOps](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/) [AssetOps](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/) [QualityOps](https://www.xenonstack.com/ai-agents/qaops-reimagined/) [SourcingOps](https://www.xenonstack.com/ai-agents/procurement-reimagined/) [DataOps](https://www.xenonstack.com/ai-agents/dataops-reimagined/) [DecisionOps](https://www.xenonstack.com/ai-agents/desicison-reimagined/)
- Industries 
[Aerospace and Defense](https://www.xenonstack.com/industries/aerospace/) [Banking - Finance - Payments](https://www.xenonstack.com/industries/banking/) [Manufacturing and Industrial Automation](https://www.xenonstack.com/industries/digital-manufacturing-services/) [Enterprise - IT Operations](https://www.xenonstack.com/industries/enterprise-technology/) [Consumer – Experience – Tech](https://www.xenonstack.com/industries/consumer-technology/) [Retail and Supply Chain](https://www.xenonstack.com/industries/retail/) [Travel – Hospitality – Guest Experience](https://www.xenonstack.com/industries/travel-hospitality/)
- Resources 
[Blogs](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights) [Use Cases](https://www.xenonstack.com/use-cases) [Case Studies](https://www.xenonstack.com/case-studies) [Video Library](https://www.xenonstack.com/videos/) [E-Books](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/)
- Company 
[About Us](https://www.xenonstack.com/about-us/) [Xenonstack Academy](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [Tao of Xenonstack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [Careers](https://www.xenonstack.com/careers/)
- Get Started
## Interested in Solving your Challenges with XenonStack Team
## Get Started
Get Started with your requirements and primary focus, that will help us to make your solution
First Name \*
Please enter a valid First Name
Last Name \*
Please enter a valid Last Name
Business Email ID \*
Please enter a valid business email address
Contact Number \*
Please enter a valid Contact Number
Company Website \*
Please enter a valid Company Website URL
LinkedIn URL \*
Please enter a valid LinkedIn URL or N/A
Leave this field empty
Industry Belongs To \*
Please Select your Industry
Banking
Fintech
Payment Providers
Wealth Management
Discrete Manufacturing
Semiconductor
Machinery Manufacturing / Automation
Appliances / Electrical / Electronics
Elevator Manufacturing
Defense & Space Manufacturing
Computers & Electronics / Industrial Machinery
Motor Vehicle Manufacturing
Food and Beverages
Distillery & Wines
Beverages
Shipping
Logistics
Mobility (EV / Public Transport)
Energy & Utilities
Hospitality
Digital Gaming Platforms
SportsTech with AI
Public Safety - Explosives
Public Safety - Firefighting
Public Safety - Surveillance
Public Safety - Others
Media Platforms
City Operations
Airlines & Aviation
Defense Warfare & Drones
Robotics Engineering
Drones Manufacturing
AI Labs for Colleges
AI MSP / Quantum / AGI Institutes
Retail Apparel and Fashion
Please correct the highlighted fields before proceeding.
Proceed Next
## Interested in Solving your Challenges with XenonStack
## Personalization
Get Started with your requirements and primary focus, that will help us to make your solution
### What is your Key focus areas? \*
AI Workflow and Operations
Data Management and Operations
AI Governance
Analytics and Insights
Observability
Security Operations
Risk and Compliance
Procurement and Supply Chain
Private Cloud AI
Vision AI
### In Which Agentic Platform and Accelerator you are Interested? \*
Akira AI - Agentic AI Platform Multi Agent System
Metasecure - Autonomous SOC
Nexastack – Build and Managed Compound AI Stack
Data Foundry
XAI – Vision and AI Platform – Visual AI Agents
Strategy Consulting
AI Managed Services
Others (Please Specify)
### Which segment does your company belong to? \*
Startup
Scale Startup
SME
Mid Enterprises
Large Enterprises
Federal Government
Non Profits
Others (Please Specify)
### At what stage is your AI use case currently in? \*
Conceptualized: Use case defined, PoC pending
POC Completed
In Production with challenges
Not yet defined
Others (Please Specify)
### What are the primary challenges in adopting AI? \*
Data Quality Issues
Data Privacy and Compliance
Aligning AI with business goals
Unclear ROI from POCs
Integration with existing ERP systems
Scalability Challenges
Moving POCs in Production
Infrastructure Limitation
High Implementation costs
Others (Please Specify)
### What kind of infrastructure does your organization currently using? \*
AWS
Microsoft Azure
GCP
IBM Cloud
Oracle Cloud
On Premises
Others (Please Specify)
### Are you using any Data platform? \*
Databricks
SnowFlake
Amazon Redshift
Azure Synapse Analytics
Microsoft Fabric
Teradata
Oracle Database
SAP Hana
Informatica
Google Cloud BigQuery
Others (Please Specify)
### Preferred Approach for AI Transformation \*
Assisted Intelligence Agents as Co-Pilot
Collaborative Intelligence Agents as AI Teammates
Autonomous Intelligence Agents – AI Agents
Agentic Actions
Agentic Process Automation
### In Which Domain your Solution/Organization belongs to in-terms of Data Privacy, Trustworthy AI \*
Internal Organization
Highly Regulated Industry (Healthcare, Financials etc)
Medium Regulated
Non Regulated
### Captcha Verification \*
captcha text
Please select all the required fields
Review Previous
Submit
## your request has been submitted successfully !
Our XenonStack Team will shortly reach out to you. We are looking forward to showcase how XenonStack can transform your business.
.webp?width=1921&height=622&name=usecase-banner%20(1).webp)
[Cloud Native Applications](https://www.xenonstack.com/blog/tag/cloud-native-applications)
# React Server Components Working and Benefits
[Navdeep Singh Gill](https://www.xenonstack.com/blog/author/navdeep-singh-gill) | 27 August 2024
## Overview of React Server Component
After December 21, 2020, the [React](https://react.dev/) team has announced exciting research with a demo into a new approach to build React apps with React Server Components. Although they shared, they also shared that this is in development & research. Here, we will discuss what ideas were discussed.
## What is React Server Component?
React server Component works to re-write React components that are rendered on the server-side to [enhance application performance](https://www.xenonstack.com/blog/optimizing-react-application). There is a major problem faced when developing applications with React that if the common high number of network requests generated while users wait for the page or data they requested to become available:
Let’s look into an example, the most used approach to data fetching we used is to call APIs using the use effect hook:
`useEffect(() => {`
`axios.get("Your-URL")`
`.then((response) => {`
`setData(response.data);`
`// set data into state`
`})`
`.catch((error) => {`
`console.log(error);`
`});`
`}, []);`
Although there is nothing wrong with it, using this data fetching approach will always take time to render something valuable.
The other problem is Bundle size. By rendering a big bundle size, it will take time to load & not every user has fast internet connections. That’s why we used some methods to reduce it like minification, code splitting, non-used(dead) code elimination. React server components help to reduce these problems. React Server Component will help to solve above mentioned two problems and very efficiently.
React Server Components allow us to completely offload particular components along with their dependencies to the server. This states that they no longer need to run in the browser, which also explains the amount of js that needs to be executed shrinks. In Facebook’s initial tests in a production environment, React Serve Component resulted in a 29 percent smaller bundle size, or nearly a third, according to facebook’s presentation on react server component.
> The learning of React is also not going to be difficult for developers like us(moving from Angular to React) Click to explore about, [Learn React | Advanced Guide for Angular Developers](https://www.xenonstack.com/blog/react-learning-path)
## What are the benefits of React Server Component?
A React Server Component seems like a traditional React component. It takes in props & also has a render method. It has additional capabilities, such as:
They can directly access server data sources such as microservices, functions, [databases](https://azure.microsoft.com/en-us/products/category/databases/), etc. The possibilities are like its capability is huge. We will create internal APIs, work with data sources, and access our server inside our component without releasing it directly to an API.
They're named with the.server.js suffix after the component's name, as per a standard naming convention. Let’s see an example, and if a component is going to be named note.js, it will have to set note.server.js. Respectively, client components will be created following the naming convention using the .client.js suffix after the component's name.
## What is Client-Side Rendering?
Client-side rendering is the norm. The technique used nowadays for website rendering didn't gain that attraction until [JavaScript libraries](https://en.wikipedia.org/wiki/List_of_JavaScript_libraries)supported it.
When we look into client-side rendering, we are talking about JavaScript to render content in the browser. Rather than acquiring all of the content from the HTML document, a bare-bones HTML document with a JavaScript file in the initial loading is received, which renders the rest of the site using the browser.
The initial page load is naturally delayed when using client-side rendering. After that, though, each subsequent page load is lightning fast. Communication with the server is limited to retrieving run-time data in this approach. Furthermore, there is no need to reload the entire User Interface after each service call. By re-rendering only that single DOM element, the client-side framework is able to refresh the UI with changed data.
> React doesn't follow any particular project structure, and the positive thing about this is that it allows us to make up a structure to suit our needs. Click to explore about, [ReactJs Project Structure and Folder Setups](https://www.xenonstack.com/insights/reactjs-project-structure)
## What is Server-Side Rendering?
When users request the server, it gets started with an HTML page by fetching user data and sending it to the user’s system over the internet. Then the browser engine constructs the content and displays it over the page. This whole process of fetching from the database, creating an HTML page, and then sending it to the client happens in milliseconds.
### Pros of Server Side Rendering
1. [Search engines](https://en.wikipedia.org/wiki/Search_engine) can catch up with the site for better SEO.
2. The first-page load is faster.
3. Good for static sites.
### Cons of Server Side Rendering
1. Frequently server requests.
2. Overall slow page on rendering.
3. Full page reloads.
4. Non-rich site interactions
## Server Side Rendering Vs. Client-Side Rendering
The primary difference is that with Server Side Rendering, the browser receives the HTML of your website that is ready to be produced, but with Client-Side Rendering, the browser obtains an empty document that connects to your javaScript. IT states that the browser engine will start rendering HTML from the server without waiting for all the javaScript to be downloaded and executed, In both cases, React will need to be downloaded and will go through the same process of creating a [virtual DOM](https://legacy.reactjs.org/docs/faq-internals.html) and adding events to make the page interactive, but with Server Side Rendering, the user can begin seeing the page while this is all occurring. You must want all of the foregoing to happen in the Client-Side Rendering world, and then the virtual document object module must be transported to the browser DOM for the page to be viewable.
### Pros of Client Side Rendering
1. Rich site interactions
2. Fast website rendering after the initial load.
3. Great for web applications.
4. Robust selection of JavaScript libraries.
### Cons of Client Side Rendering
1. Low SEO if not implemented correctly.
2. The initial load might require more time.
3. In most cases, it requires an external library.
## How does React Server Component work?
The working process of React Server Component is mentioned below:
SSR always refers to the initial page Load. When we’re using SSR its means sending HTML to the client & loading all your script. First, the JS is loaded in the app, and the app is back to perform a functional client-side react app. These statements define that your application is the same old React application you would have after the initial page load if there is no use of SSR. Your components are still client components in Server Side Rendering, outside of the fact that when loading of the first page was pure HTML.
React Server Component used to Rendered on the server. These components are being fetched from your backend, so it resolves to have the rendering of these components co-located with the data fetched. When components need to be rendered, they're fetched from the server and combined with the existing ones.
React server components is in the development phase so that we can get it in also Package.Json :
`"react": "0.0.0-experimental-7ec4c5597",`
`"react-dom": "0.0.0-experimental-7ec4c5597",`
`"react-error-boundary": "^3.1.0",`
`"react-fetch": "0.0.0-experimental-7ec4c5597",`
`"react-fs": "0.0.0-experimental-7ec4c5597",`
`"react-pg": "0.0.0-experimental-7ec4c5597",`
`"react-server-dom-webpack": "0.0.0-experimental-7ec4c5597",`
Above mentioned dependencies is using an experimental version that enables React Server Component, while react-fetch/fs/pg are a group of wrapper packages, and these are used for interacting with the i/o system (called React IO Libraries)
For More detailed information please check [React server component demo app.](https://github.com/reactjs/server-components-demo)
#### Setup of Nodejs
You will need to have nodejs \>=14.9.0 to run this demo.\[[Node 14](https://nodejs.org/en/about/previous-releases)\]
`````
`npm install`
`npm start`
`(Or `npm run start:prod` for prod. build.)`
The app won't work until you set up the database, as described below.
Setup with Docker (optional)
You can also start dev build of the app by using docker-compose.\
This is completely optional and is only for people who prefer Docker to global installs
If you prefer Docker, make sure you have docker and [docker-compose](https://docs.docker.com/compose/) installed then run:
\\docker-compose up\\
#### Running seed script
1. Run containers in the detached mode
2. Run Seed Script
\\docker-compose exec notes-app npm run seed\\
If you'd rather not use Docker, skip this section and continue below.
### DB Setup
This demo uses Postgres. First, follow [Postgres installation guide](https://wiki.postgresql.org/wiki/Detailed_installation_guides) for your platform.
Alternatively, you can check out [server component demo](https://github.com/pomber/server-components-demo/) which will let you run the demo app without needing a database. However, the user won't execute SQL queries (but fetch should still work). There is also another fork that uses [Prisma](https://github.com/prisma/server-components-demo)with SQLite, so it doesn't require additional setup.
The below example will set up the database for this app, assuming that you have a UNIX-like platform:
#### Step 1. Create the Database
`````
`psql Postgres`
`CREATE DATABASE notesapi;`
`CREATE ROLE notesadmin WITH LOGIN PASSWORD 'password';`
`ALTER ROLE notesadmin WITH SUPERUSER;`
`ALTER DATABASE notesapi OWNER TO notesadmin;`
`\q`
`````
#### Step 2. Connect to the Database
`````
`psql -d Postgres -U notesadmin;`
`\c notesapi`
`DROP TABLE IF EXISTS notes;`
`CREATE TABLE notes (`
`id SERIAL PRIMARY KEY,`
`created_at TIMESTAMP NOT NULL,`
`updated_at TIMESTAMP NOT NULL,`
`title TEXT,`
`body TEXT`
`);`
`\q`
`````
#### Step 3. Run the seed script
Finally, run \`npm run seed\` to populate some data.
Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs.**[Click here for our Digital Product and Platform Engineering Services](https://www.xenonstack.com/services/product-engineering/)**
## Conclusion
This tech is new, and the expectation is high for the final release of React Server Components in the next announcement of “ The Plan For React18 “. The fast functionality of how React Server Components enhance speed and reduce the size of the bundle is making React stand out from its competitors like Angular and Vue.js.
It shows React Server Components have a great scope in further times for app development. For more information, watch the official talk or new release announcements.
- Discover more about [React.JS Application Development Services](https://www.xenonstack.com/enterprise/reactjs-development/)
- Click to explore [Reactive Programming Solutions for Monitoring Platform](https://www.xenonstack.com/blog/reactive-programming-monitoring)
## Share Article
- [](http://www.facebook.com/share.php?u=https://www.xenonstack.com/blog/react-server-components-working)
- [](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/blog/react-server-components-working)
- [](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/blog/react-server-components-working)
- [](mailto:?subject=Check%20out%20https://www.xenonstack.com/blog/react-server-components-working%20&body=Check%20out%20https://www.xenonstack.com/blog/react-server-components-working)
## Table of Contents
## Share Article
- [](http://www.facebook.com/share.php?u=https://www.xenonstack.com/blog/react-server-components-working)
- [](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/blog/react-server-components-working)
- [](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/blog/react-server-components-working)
- [](mailto:?subject=Check%20out%20https://www.xenonstack.com/blog/react-server-components-working%20&body=Check%20out%20https://www.xenonstack.com/blog/react-server-components-working)
## Explore Related Topics
[Decision Intelligence](https://www.xenonstack.com/blog/tag/decision-intelligence)
[Cloud Native Applications](https://www.xenonstack.com/blog/tag/cloud-native-applications)
[Generative AI](https://www.xenonstack.com/blog/tag/generative-ai)
[Big Data Engineering](https://www.xenonstack.com/blog/tag/big-data-engineering)
[FinOps](https://www.xenonstack.com/blog/tag/finops)
[Data Foundry](https://www.xenonstack.com/blog/tag/data-foundry)
[XAI](https://www.xenonstack.com/blog/tag/xai)
[Autonomous Agents](https://www.xenonstack.com/blog/tag/autonomous-agents)
[MetaSecure AI](https://www.xenonstack.com/blog/tag/metasecure-ai)
## Navdeep Singh Gill
Global CEO and Founder of XenonStack
Navdeep Singh Gill is serving as Chief Executive Officer and Product Architect at XenonStack. He holds expertise in building SaaS Platform for Decentralised Big Data management and Governance, AI Marketplace for Operationalising and Scaling. His incredible experience in AI Technologies and Big Data Engineering thrills him to write about different use cases and its approach to solutions.
[Explore More by Navdeep Singh Gill ](https://www.xenonstack.com/blog/author/navdeep-singh-gill)
## Subscribe to our Latest Technology Insights and Resources
Subscribe Now
## Get the latest articles in your inbox
Business Email ID \*
Please enter a valid Business Email ID
Company Name \*
Please enter a valid Company Name
Yes, I would like to receive the XenonStack newsletter as well as marketing emails regarding XenonStack products, services, and events. I can unsubscribe at any time.
By registering, you confirm that you agree to the processing of your personal data by XenonStack as described in the Privacy Policy.
Subscribe Now
## Related Articles
### [Why Enterprises need to build Cloud Native Applications? Quick Guide](https://www.xenonstack.com/blog/cloud-native-applications)
22 October 2024
### [Digital Business Automation and its Use Cases | Quick Guide](https://www.xenonstack.com/blog/digital-business-automation)
20 August 2024
### [Cloud Native Observability and its Tools | Complete Guide](https://www.xenonstack.com/blog/cloud-native-observability-tools)
23 January 2025
XenonStack Agentic Foundry powers enterprise agentic systems with unified infra, analytics, workflows, and security to drive automation and compliance.
[](https://www.youtube.com/c/XenonStackOfficial) [](https://www.linkedin.com/company/xenonstack/) [](https://github.com/xenonstack) [](https://twitter.com/xenonstack) [](https://medium.com/@xenonstack) [](https://www.instagram.com/teamxenonstack/)
    
    
## AI Engineering
[Composite AI](https://www.xenonstack.com/artificial-intelligence/composite-ai/) [Decision AI](https://www.xenonstack.com/artificial-intelligence/decision-ai/) [AI Quality](https://www.xenonstack.com/artificial-intelligence/ai-quality/) [Generative AI](https://www.xenonstack.com/artificial-intelligence/generative-ai/) [Multimodal AI](https://www.xenonstack.com/artificial-intelligence/multimodal-ai/) [AI Assurance](https://www.xenonstack.com/artificial-intelligence/explainable-ai/) [MLOps](https://www.xenonstack.com/artificial-intelligence/mlops/) [Physical AI](https://www.xenonstack.com/artificial-intelligence/physical-ai/) [Augmented Engineering](https://www.xenonstack.com/artificial-intelligence/ai-augmented-software-development/) [Generative BI](https://www.xenonstack.com/artificial-intelligence/generative-bi/)
## Data Foundry
[Streaming Data Platform](https://www.xenonstack.com/dataops/streaming-data-platform/) [Data Lakehouse](https://www.xenonstack.com/dataops/delta-lake/) [Data Catalog](https://www.xenonstack.com/dataops/data-catalog/) [Data Observability](https://www.xenonstack.com/dataops/data-observability/) [Cloud Data Warehouse](https://www.xenonstack.com/dataops/cloud-data-warehouse/) [Data Engineering](https://www.xenonstack.com/dataops/data-engineering/) [MetaData Management](https://www.xenonstack.com/dataops/metadata-management/) [Data Quality](https://www.xenonstack.com/dataops/augmented-data-quality/) [Real Time Analytics](https://www.xenonstack.com/dataops/real-time-analytics/) [Data Modernization](https://www.xenonstack.com/dataops/data-modernization/)
## Platform Engineering
[Cloud Native](https://www.xenonstack.com/cloud-native/platform-engineering/) [Automation As Code](https://www.xenonstack.com/cloud-native/automation-as-code/) [Observability](https://www.xenonstack.com/cloud-native/observability/) [FinOps](https://www.xenonstack.com/cloud-native/finops/) [Application Modernization](https://www.xenonstack.com/cloud-native/application-modernization/) [DevSecOps](https://www.xenonstack.com/cloud-native/devsecops/) [Site Reliability Engineering](https://www.xenonstack.com/cloud-native/site-reliability-engineering/) [Progressive Delivery](https://www.xenonstack.com/cloud-native/progressive-delivery/) [GitOps](https://www.xenonstack.com/cloud-native/gitops/) [Compliance as code](https://www.xenonstack.com/cloud-native/compliance-as-code/) [Value Stream Management](https://www.xenonstack.com/cloud-native/value-stream-management/) [Policy as Code](https://www.xenonstack.com/cloud-native/policy-as-code/) [Telemetry Pipeline](https://www.xenonstack.com/cloud-native/telemetry-pipeline/)
## Agentic AI
[Agentic Analytics](https://www.xenonstack.com/agentic-ai/enterprise-systems/) [Agentic AI Systems](https://www.xenonstack.com/agentic-ai/agentic-ai-system/) [Process Intelligence](https://www.xenonstack.com/agentic-ai/business-process-operations/) [Developer Experience](https://www.xenonstack.com/agentic-ai/developer-experience-platform/) [Autonomous Operations](https://www.xenonstack.com/agentic-ai/autonomous-operations/) [AI Vision at EDGE](https://www.xenonstack.com/agentic-ai/edge-and-vision-ai/) [Compound AI System](https://www.xenonstack.com/agentic-ai/compound-ai-system/) [GUI Agents](https://www.xenonstack.com/agetic-ai/gui-agents/) [CMDB Management](https://www.xenonstack.com/agentic-ai/cmdb-management/) [ITSM](https://www.xenonstack.com/agentic-ai/itsm/) [Network Automation](https://www.xenonstack.com/agentic-ai/network-automation/)
## AI Agents
[DataBricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [SnowFlake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [AWS AI Agents](https://www.xenonstack.com/ai-agents/aws-ai-agents/) [Microsoft Azure AI Agents](https://www.xenonstack.com/ai-agents/microsoft-azure-ai-agents-actions/) [SalesForce AI Agents](https://www.xenonstack.com/ai-agents/salesforce-agents-actions/) [MySQL AI Agents](https://www.xenonstack.com/ai-agents/mysql-agents-actions/) [PostgreSQL AI Agents](https://www.xenonstack.com/ai-agents/postgresql-agents-actions/) [Datadog AI Agents](https://www.xenonstack.com/ai-agents/datadog-agents-actions/) [DynaTrace AI Agents](https://www.xenonstack.com/ai-agents/dynatrace-agents-actions/) [Splunk AI Agents](https://www.xenonstack.com/ai-agents/splunk-agents-actions/) [BigQuery AI Agents](https://www.xenonstack.com/ai-agents/bigquery-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Infor AI Agents](https://www.xenonstack.com/ai-agents/infor-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) [WorkDay AI Agents](https://www.xenonstack.com/ai-agents/workday-agents-actions/) [Jira AI Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/)
## Industry
[Aerospace and Aviation](https://www.xenonstack.com/industries/aerospace/) [Financial Services](https://www.xenonstack.com/industries/banking/) [Automotive And Industrial](https://www.xenonstack.com/industries/automotive/) [Consumer Tech](https://www.xenonstack.com/industries/consumer-technology/) [Technology, Media and Telco](https://www.xenonstack.com/industries/enterprise-technology/) [Digital Supply Chain](https://www.xenonstack.com/industries/digital-supply-chain/) [Hospitality and Tourism](https://www.xenonstack.com/industries/travel-hospitality/) [Discrete Manufacturing](https://www.xenonstack.com/industries/automotive/) [Education](https://www.xenonstack.com/industries/education/) [Media and Entertainment](https://www.xenonstack.com/industries/media-entertainment/) [Oil and Gas](https://www.xenonstack.com/industries/oil-and-gas/) [Energy and Utilities](https://www.xenonstack.com/industries/energy-and-utilities/)
## Enterprise Support
[AI Managed Services](https://www.xenonstack.com/managed-services/ai-managed-services/) [Kubernetes Managed Services](https://www.xenonstack.com/managed-services/kubernetes/) [SRE as a Service](https://www.xenonstack.com/managed-services/site-reliability-engineering/) [Data Managed Services](https://www.xenonstack.com/managed-services/big-data/) [Analytics Managed Services](https://www.xenonstack.com/managed-services/analytics-managed-services/) [Data Protection](https://www.xenonstack.com/readiness-assessment/data-protection/) [On-Premise AI](https://www.xenonstack.com/managed-services/on-premise-ai-cluster/)
## Solutions
[Private Cloud](https://www.xenonstack.com/solutions/private-cloud/) [Internal Developer Platform](https://www.xenonstack.com/solutions/internal-developer-platform/) [AI Inference](https://www.xenonstack.com/solutions/ai-inference/) [Open-Source Data Platform](https://www.xenonstack.com/solutions/open-source-data-platform/) [AI Trust Score](https://www.xenonstack.com/solutions/ai-trust-score/) [Autonomous SoC](https://www.xenonstack.com/solutions/autonomous-soc/) [Digital Twin](https://www.xenonstack.com/solutions/digital-twin/) [Readiness Assessment](https://www.xenonstack.com/readiness-assessment/) [Talk To Specialist](https://www.xenonstack.com/talk-to-specialist/)
## Company
[About Us](https://www.xenonstack.com/about-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [TAO of XenonStack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [Careers](https://www.xenonstack.com/careers/) [XA - QSIR](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Book Demo](https://demo.xenonstack.com/)
## Resources
[Blog](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights/) [Use Cases](https://www.xenonstack.com/use-cases) [Case Study](https://www.xenonstack.com/case-studies) [Videos](https://www.xenonstack.com/videos/) [EBooks](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/)
@2026 XenonStack - A Stack Innovator!
[Privacy Policy](https://www.xenonstack.com/privacy-policy/) [Terms and Conditions](https://www.xenonstack.com/terms-and-conditions/)
Global Presence :
USA
Dubai
India
UK
Australia
✕
## Agent SRE for Reliability and Observability Solutions
AI continuously monitors systems for risks before they escalate. It correlates signals across logs, metrics, and traces. This ensures faster detection, fewer incidents, and stronger reliability
- Proactive detection of performance and availability issues
- Root-cause analysis across microservices and environments
- Automated remediation playbooks to reduce MTTR
[Explore Agent SRE](https://agentsre.ai/)
✕
## Physical Surveillance with Vision AI Agent Technology
AI converts camera feeds into instant situational awareness. It detects unusual motion and unsafe behavior in real time. Long hours of video become searchable and summarized instantly
- Real-time detection of suspicious motion or intrusion
- Natural language video search and instant playback
- Smart summaries for audits, investigations, and compliance
[See Vision AI in Action](https://www.xenonstack.ai/)
✕
## Agentic Data Intelligence Across Your Full Data Stack
Your data stack becomes intelligent and conversational. Agents surface insights, detect anomalies, and explain trends. Move from dashboards to autonomous, always-on analytics
- Connects to warehouses, lakes, and streaming sources
- Question-answering in natural language
- Continuous monitoring for anomalies and KPI deviations
[See in Action](https://elixirdata.co/)
✕
## Intelligent Diagnostic for Self-Healing System Automation
Agents identify recurring failures and performance issues. They trigger workflows that resolve common problems automatically. Your infrastructure evolves into a self-healing environment
- Automated diagnostics for recurring errors
- Playbook execution: restart services, scale pods, clear queues
- Feedback loop for improving remediation strategies
[See in Action](https://agentanalyst.ai/)
✕
## Agentic GRC - Monitoring Risk and Compliance Controls
AI continuously checks controls and compliance posture. It detects misconfigurations and risks before they escalate. Evidence collection becomes automatic and audit-ready
- Continuous control checks across infrastructure and SaaS
- Automated evidence collection for audits
- Risk scoring and prioritized remediation recommendations
[Explore Agent GRC](https://agentgrc.ai/)
✕
## Agentic Finance and Procurement Intelligent Agents
Financial and procurement workflows become proactive and insight-driven. Agents monitor spend, vendors, and contracts in real time. Approvals and sourcing decisions become faster and smarter
- Real-time visibility into spend and commitments
- Anomaly detection on invoices and vendor performance
- Intelligent workflows for approvals and sourcing decisions
[Optimize Finance & Procurement](https://www.xenonify.ai/)
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Navdeep Singh Gill",
"url" : "https://www.xenonstack.com/blog/author/navdeep-singh-gill"
},
"dateModified" : "2024-08-27T10:17:46.389Z",
"datePublished" : "2021-10-22T14:03:22.000Z",
"headline" : "React Server Components Working and Benefits",
"image" : [ "https://www.xenonstack.com/hubfs/xenonstack-react-server-components-working-process.png" ],
"mainEntityOfPage" : {
"@id" : "https://www.xenonstack.com/blog/react-server-components-working",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.xenonstack.com/hubfs/Xenonstack-Serives%20-3-2-2021-10.png"
},
"name" : "Xenonstack Inc"
}
}
```
```json
{
"@context" : "http://schema.org",
"@type" : "Organization",
"address" : {
"@type" : "PostalAddress",
"addressCountry" : "USA",
"addressLocality" : "Plano",
"addressRegion" : "Texas",
"postalCode" : "75024",
"streetAddress" : "7700 Windrose Ave. "
},
"description" : "XenonStack is the #1 Data and AI foundry and technology services company to simplify and scale Enterprise and Generative AI Journeys.",
"email" : "business@xenonstack.com",
"logo" : "https://f.hubspotusercontent30.net/hubfs/8161231/Xenonstack-Serives%20-3-2-2021-10.png",
"mainEntityOfPage" : {
"@id" : "https://www.xenonstack.com/blog/react-server-components-working",
"@type" : "WebPage",
"description" : "React Server Components Working and its Benefits for enhancing application performance by re-write React components."
},
"name" : "XenonStack",
"sameAs" : [ "https://www.facebook.com/XenonStack", "https://www.linkedin.com/company/xenonstack/", "https://www.youtube.com/c/XenonStackOfficial", "https://twitter.com/xenonstack" ],
"telephone" : "",
"url" : "https://www.xenonstack.com/"
}
```
```json
{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Navdeep Singh Gill"
},
"dateModified" : "August 27, 2024, 10:17:46 AM",
"datePublished" : "2021-10-22 14:03:22",
"description" : "React Server Components Working and its Benefits for enhancing application performance by re-write React components.",
"headline" : "React Server Components Working and Benefits",
"image" : {
"@type" : "ImageObject",
"url" : "https://www.xenonstack.com/hubfs/xenonstack-react-server-components-working-process.png"
},
"mainEntityOfPage" : {
"@id" : "https://www.xenonstack.com/blog/react-server-components-working",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://f.hubspotusercontent30.net/hubfs/8161231/Xenonstack-Serives%20-3-2-2021-10.png"
},
"name" : "XenonStack"
}
}
```