**React 18 introduced Server Components([RFC](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)), which aims to combine the rich interactivity of client-side apps with the improved performance and benefits of server-side rendering.** Server-side rendering(SSR) is the process of generating the HTML on the server and sending it to the browser to be hydrated. During hydration, React will attempt to attach event listeners to the pre-built HTML to make it interactive. We can think of the traditional SSR process as Client Components. On the other hand, **React Server Components are always rendered on the server** and then sent to the browser. Therefore, Server Components have full access to the backend infrastructure but not to the browser API. Client and Server Components can live in harmony under a single DOM tree and complement each other to bring the best of each process to improve your application’s performance and user experience. --- In this demo, we'll explore the principles of server and client components by fetching data from an API and using Client and Server components to make our app interactive. To create a new Next.js project using the **app directory**, run: ```javascript npx create-next-app@latest --experimental-app ``` **In Next.js 13 (beta)** all components inside the **app directory** are React Server Components by default. Including [special files](https://beta.nextjs.org/docs/routing/fundamentals#file-conventions) and [colocated components](https://beta.nextjs.org/docs/routing/fundamentals#colocation), this is a big change on how we've been thinking about component architecture. This is the final file tree of our project. They are all server components, except for `counter` which is using hooks and is a client component. [![Edit Server Components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/react-server-component-nextjs-forked-2vhmmg?file=%2Fapp%2Fpage.tsx&selection=%5B%7B%22endColumn%22%3A20%2C%22endLineNumber%22%3A13%2C%22startColumn%22%3A20%2C%22startLineNumber%22%3A13%7D%5D) **Root directory** ```bash ├── app │ ├── blog │ │ └── [slug] │ │ └── page.tsx │ ├── components │ │ ├── AppBar │ │ ├── Card │ │ ├── Counter │ │ ├── PopularFeed │ │ └── PostFeed │ ├── head │ ├── layout │ └── page.tsx ├── pages │ └── api └── next.config.js ``` --- ### Server Components Server Components are always rendered on the server, they can interact directly with the backend to fulfill their needs. They can fetch data from a database or API, access the file system directly, or process expensive computations that require large dependencies. The output of Server Components is streamed to the client and cached. Let's fetch data on the server using a Server component. For layouts and pages Next.js will automatically dedupe requests in a tree. **PostFeed.tsx** ```tsx const fetchPosts = async (): Promise => { const url = 'https://jsonplaceholder.typicode.com/posts/'; const data = await fetch(url); return data.json(); }; export default async function Page() { const posts = await fetchPosts(); return (

{posts?.map(post => { return ; })}

); } ``` **Card.tsx** ```tsx import Link from 'next/link'; import { IPost } from '@/types/blog.types'; import Counter from '../Counter'; interface Props { post: IPost; dense?: boolean; } export default function Card({ post, dense }: Props) { if (dense) { return (

{post.title}

); } // Counter is a client component return (

{post.title}

{post.body}

Go to article...

); } ``` **blog/[slug].tsx** ```tsx import { IPost } from '@/types/blog.types'; const fetchPost = async (slug: string): Promise => { const rootUrl = 'https://jsonplaceholder.typicode.com/posts/'; const data = await fetch(`${rootUrl}${slug}`); return data.json(); }; interface Props { params: { slug: string }; } export default async function PostPage({ params }: Props) { const post = await fetchPost(params.slug); return (

{post.title}

{post.body}

); } ``` --- ### Streaming **Streaming allows you to break down the page’s HTML into smaller chunks and progressively send those chunks to the client.** This enables the page to be rendered progressively by sections, instead of waiting for all the data to be fetched before rendering the HTML for a page like in the SSR world. We can use React [Suspense](https://beta.reactjs.org/reference/react/Suspense) to display a fallback until its children have finished loading. This comes in handy when making an asynchronous action, like making a query to the db. **page.tsx** ```jsx import { Suspense } from 'react'; import PostFeed from './components/PostFeed'; import PopularFeed from './components/PopularFeed'; export default async function Page() { return (

}> Loading...

); } ``` With Server Components the initial page load is faster and large dependencies that previously would impact the JS bundle size on the client can remain entirely on the server. --- ### Client Components We can think of Client Components as the traditional SSR process, they are pre-rendered on the server and hydrated on the client. We should use them when we need to add interactivity into our UI. #### Common use cases for using Client Components: - If we need state and lifecycle effects(useState, useReducer, useEffect) - If we use browser-only APIs - If we need interactivity with event listeners (onClick, onChange, etc) - If we use React Class components We can make a Client Component by using the `use client` directive at the top of the file before any imports. These components can live anywhere, they don't need to live inside the `app/` directory. **Counter.tsx** ```tsx 'use client'; import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return (

You clicked {count} times.

); } ``` > Avoid converting a Server Component into a Client Component because you need a client-side feature. Instead make that block of code a Client Component. Move Client Components to the leaves of your component tree where possible to improve the performance. --- ### Importing Client and Server components Server and Client Components can be interleaved in the same component tree. React will merge both environments behind the scenes. **Importing a Server Component in a Client Component will not work.** Instead pass the Server component as a child prop of a Client Component. **ClientComponent** ```jsx 'use client'; export default function ClientComponent({ children }) { return <>{children}; } ``` **page** ```jsx import ClientComponent from './ClientComponent'; import ServerComponent from './ServerComponent'; // Pages are Server Components by default export default function Page() { return ( ); } ``` On the other hand, using a client component inside a server component is very straightforward. In our project, please view how the Counter component is inside the Card component. --- ### Resources Check out the [intro video](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) to React Server components. The [RFC](https://github.com/reactjs/rfcs/pull/188), It’s a very interesting thread, with a lot of valuable info. [Demo to server components](https://github.com/reactjs/server-components-demo) by the React team. [button:primary:Edit CodeSandbox](https://codesandbox.io/p/devbox/react-server-component-nextjs-2vhmmg))

Hi, I'm Iggy!I build for the web.

Latest Notes

Every Claude Session Starts From Zero and Here Is How to Change That

React, TypeScript, Tailwind CSS and Webpack 5 starter

Intercept API Requests with Mock Service Worker

Transform SVGs into React Components with SVGR

Boosting Site Health with Core Web Vitals Metrics

Server and Client Components

One-Off Styling Overrides With Tailwind-Merge

React UI Library with Storybook

Memoization in JavaScript

Latest Notes

Every Claude Session Starts From Zero and Here Is How to Change That

React, TypeScript, Tailwind CSS and Webpack 5 starter

Intercept API Requests with Mock Service Worker

Transform SVGs into React Components with SVGR

Boosting Site Health with Core Web Vitals Metrics

Server and Client Components

One-Off Styling Overrides With Tailwind-Merge

React UI Library with Storybook

Memoization in JavaScript

Hi, I'm Iggy!
I build for the web.