{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This blog post will discuss how to use the server component in React 19. This new type of component can be rendered during bundle time, and it will completely change how we write React components in the future. The React team is pushing the way of web application development to deliver better user experience and development experience."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"What is a React Server Component?"}]},{"type":"paragraph","content":[{"type":"text","text":"If you have used Next.js App Router in your projects, the React server component is not a stranger to you because the App Router leverages the React server component. The server component allows us to render the HTML from the server before we send it to the user rather than render the HTML in the client browser (the traditional way)."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Why do we need the React Server Component?"}]},{"type":"paragraph","content":[{"type":"text","text":"We can think of all the components we wrote before React 19 as Client Components. Before showing anything to the users, we must wait for the client to download all Javascript files, CSS files, etc. Imagine the user has to download unnecessary chunks of files before they can see anything on the page."}]},{"type":"figure","attrs":{"src":"https://media.tekminewe.com/_1727081888309.webp","alt":"React Client Side Rendering","title":"React Client Side Rendering"},"content":[{"type":"text","text":"React Client Side Rendering"}]},{"type":"paragraph","content":[{"type":"text","text":"On the other hand, this is how it looks when we use the server component and server-side rendering. The server component allows us to fetch data from a database or other data sources and render the HTML before we send the response back to the user."}]},{"type":"figure","attrs":{"src":"https://media.tekminewe.com/_1727082174182.webp","alt":"React Server Component + Server Side Rendering","title":"React Server Component + Server Side Rendering"},"content":[{"type":"text","text":"React Server Component + Server Side Rendering"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"The key benefits of using React Server components"}]},{"type":"paragraph","content":[{"type":"text","text":"There are a few benefits that the server component brings to us:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Faster initial load time"},{"type":"text","text":" - If part of the Javascript code is executed on the server side, there are smaller file sizes that the client has to download. Thus, it increases the page load time."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Improve development experience"},{"type":"text","text":" - We can now write codes shared between the client and server sides without creating an external library. In addition, we can use both client and server components in a single component without additional overhead."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Search engine optimisation (SEO)"},{"type":"text","text":": The page rendered on the server can be effectively crawled and indexed by search engines and LLMs."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How to use the React Server Components?"}]},{"type":"paragraph","content":[{"type":"text","text":"If we use React 19, every component is a server component by default unless we explicitly add the "},{"type":"text","marks":[{"type":"code"}],"text":"'use client'"},{"type":"text","text":" directives at the top of the file, telling React that the particular component is a Client component. Let us dive into how to use the React Server Component compared to the Client Component. "}]},{"type":"paragraph","content":[{"type":"text","text":"We will be using the "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/tekminewe/react-server-component-demo","target":"_blank","rel":"noopener noreferrer nofollow","class":null}}],"text":"react-server-component-demo"},{"type":"text","text":" to as the example for the explaination."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Fetching data in the component"}]},{"type":"paragraph","content":[{"type":"text","text":"In the Client Component, we will use "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" to fetch the data, set the response to the state, and trigger re-rendering. Everything is happening on the client side, and we have two round trips to the server: first, to download the Javascript files and then request to the server to get the data."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { Product } from \"@/types\";\nimport { ProductListItem } from \"./product-list-item\";\nimport { useEffect, useState } from \"react\";\n\nexport const ProductList = () => {\n const [products, setProducts] = useState([]);\n useEffect(() => {\n fetch(`http://localhost:3000/api/products`)\n .then((res) => res.json())\n .then((data) => {\n setProducts(data);\n });\n }, []);\n\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n );\n};"}]},{"type":"paragraph","content":[{"type":"text","text":"On the other hand, we can use "},{"type":"text","marks":[{"type":"code"}],"text":"async/await"},{"type":"text","text":" with the functional component like a regular function in the React Server Component. React will wait for the API response before returning the JSX. The fetch request happens in the \"server\" environment of the React environment. In this scenario, we only have one round trip from server to client."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"\nimport { Product } from \"@/types\";\nimport { ProductListItem } from \"./product-list-item\";\n\nexport const ProductList = async () => {\n const products: Product[] = await fetch(`http://localhost:3000/api/products`).then((res) =>\n res.json()\n );\n\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n );\n};\n"}]},{"type":"paragraph","content":[{"type":"text","text":"It also simplifies the development experience by removing the need of "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" and make the component look cleaner."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Stream additional React Server Component in the Async Component"}]},{"type":"paragraph","content":[{"type":"text","text":"Apart from fetching data directly in the component, the React Server Component also allow us to stream another Server Component as the children with the help of "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" ."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { ProductList } from \"@/components/product-list\";\nimport { Suspense } from \"react\";\n\nfunction App() {\n return (\n

Mint Commerce

Welcome to the Mint Commerce store!

\n \n \n \n

\n );\n}\n\nexport default App;"}]},{"type":"paragraph","content":[{"type":"text","text":"This approach allows us to make the "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" component independent and place it anywhere in the application."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Passing data from the React Server Component to the Client Component"}]},{"type":"paragraph","content":[{"type":"text","text":"We can also pre-fetch the data from the Server Component and pass the data to the Client Component to skip another round trip from the client side to the server."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"// product-details.tsx\nimport { SimilarProducts } from \"@/components/similar-products\";\nimport { Product } from \"@/types\";\nimport { Suspense } from \"react\";\nimport { ProductInformation } from \"./product-information\";\n\nexport const ProductDetails = async ({ id }: { id: string }) => {\n const product: Product = await fetch(`/api/products/${id}.json`).then((res) =>\n res.json()\n );\n\n return (\n

Product Details

\n \n

\n );\n};\n\n// product-information.tsx\n\"use client\";\n\nimport { Product } from \"@/types\";\n\nexport const ProductInformation = ({ product }: { product: Product }) => {\n return (\n

Name: {product.name}

Price: {product.price}

\n );\n};\n"}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"Passing promise from parent to children server component"}]},{"type":"paragraph","content":[{"type":"text","text":"To go even further, we can also create the request promise from the parent component and await it in the client component. This approach allows us to decide which data have higher priority and which can be deferred. For example, a product details page displays product information and similar products. We want to prioritise the product information and defer fetching similar products."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"// product-details.tsx\nimport { SimilarProducts } from \"@/components/similar-products\";\nimport { Product } from \"@/types\";\nimport { Suspense } from \"react\";\nimport { ProductInformation } from \"./product-information\";\n\nexport const ProductDetails = async ({ id }: { id: string }) => {\n const product: Product = await fetch(`/api/products/${id}.json`).then((res) =>\n res.json()\n );\n const similarProductsPromise = fetch(`/api/products/${id}/similar.json`).then(\n (res) => res.json()\n );\n\n return (\n

Product Details

\n \n

Similar Products

\n Loading...

}>\n \n \n \n );\n};\n\n// similar-products.tsx\n\"use client\";\n\nimport { Product } from \"@/types\";\nimport { ProductListItem } from \"./product-list-item\";\nimport { use } from \"react\";\n\nexport const SimilarProducts = ({\n promise,\n}: {\n promise: Promise;\n}) => {\n const products = use(promise);\n\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n );\n};\n"}]},{"type":"paragraph","content":[{"type":"text","text":"Here, we use the new "},{"type":"text","marks":[{"type":"code"}],"text":"use"},{"type":"text","text":" API provided by React resolves the promise on the client side to get the data and display it without slowing down the loading time of the product details page."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Passing Server Component as props to Client Component"}]},{"type":"paragraph","content":[{"type":"text","text":"In a real-world application, many pages are very interactive, and most of the part pages have to be rendered as Client Components. We can still combine the server and client components by passing the Server Components as the prop to the Client Component."}]},{"type":"paragraph","content":[{"type":"text","text":"For example, we created a new "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" Server Component, and we want to put it in a part of the "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" client component."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"// product-details.tsx\nimport { SimilarProducts } from \"@/components/similar-products\";\nimport { Product } from \"@/types\";\nimport { Suspense } from \"react\";\nimport { ProductInformation } from \"./product-information\";\nimport { ProductReviews } from \"./reviews\";\n\nexport const ProductDetails = async ({ id }: { id: string }) => {\n const product: Product = await fetch(`/api/products/${id}.json`).then((res) =>\n res.json()\n );\n const similarProductsPromise = fetch(`/api/products/${id}/similar.json`).then(\n (res) => res.json()\n );\n\n return (\n

Product Details

\n Loading...

}>\n \n \n }\n />\n

Similar Products

\n Loading...}>\n \n \n \n );\n};\n\n// product-reviews.tsx\n\"use client\";\n\nimport { Product } from \"@/types\";\nimport { ReactNode } from \"react\";\n\nexport const ProductInformation = ({\n product,\n reviewsSection,\n}: {\n product: Product;\n reviewsSection?: ReactNode;\n}) => {\n return (\n <>\n

Name: {product.name}

Price: {product.price}

\n {reviewsSection}\n \n );\n};\n"}]},{"type":"paragraph","content":[{"type":"text","text":"This is my favourite part of the server component. It allows us to compose the page quickly using both the server and client components, just like playing with Lego."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"When not to use the React Server Component?"}]},{"type":"paragraph","content":[{"type":"text","text":"We have discussed many advantages and the power of the React Server Component. You may wonder why we do not render all the components fully in the server. The answer is straightforward: React Server Component does not allow access to the client-side API, such as interaction functionality like "},{"type":"text","marks":[{"type":"code"}],"text":"onClick"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"onChange"},{"type":"text","text":" . We must still rely on the Client component to access the browser capabilities."}]},{"type":"paragraph","content":[{"type":"text","text":"The goal of the React Server Component is not to completely replace the Client Component. Both the Server Component and Client Component have to work side by side for us to deliver the best application to the user. Our ultimate objective as software engineers is to provide the best and most performant user experience."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Conclusion"}]},{"type":"paragraph","content":[{"type":"text","text":"React Server Component is a big game changer. It will change how we build web applications towards a single paradigm for both client—and server-side development. React Server Component not only improves the loading time of the web page, but it also helps to improve the development experience and efficiency by decreasing code duplication and context switching between client and server development."}]}]}

How to use the new React 19 Server Component To Improve The User Experience