---
title: "RSC Notes Demo"
description: "Demo of React Server Components with the Next.js App Router."
url: "https://vercel.com/templates/next.js/react-server-components-notes-demo"
links:
  repository: "https://github.com/vercel/server-components-notes-demo"
  demo: "https://next-rsc-notes.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=RSC+Notes+Demo&demo-description=Demo+of+React+Server+Components+with+the+Next.js+App+Router.&demo-url=https%3A%2F%2Fnext-rsc-notes.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7KoUzJtxTakjslBM2UCIil%2Fcfbfab510c0e1a0db6c215658bd46f79%2FCleanShot_2022-04-08_at_16.23.38.png&project-name=RSC+Notes+Demo&repository-name=react-server-components-notes-demo&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fserver-components-notes-demo&from=templates&env=REDIS_URL%2CSESSION_KEY%2COAUTH_CLIENT_KEY%2COAUTH_CLIENT_SECRET&envDescription=These+environment+variables+are+required+to+start+this+application.&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fserver-components-notes-demo%23preparation"
---

# RSC Notes Demo

Demo of React Server Components with the Next.js App Router.

This is a demo app showing Next.js 12's experimental React Server Components support. It's based on the [React Server Components Demo](https://github.com/reactjs/server-components-demo) by the React team. We recommend you taking a look at these links, before trying out the experimental feature:
- [**Introducing Zero-Bundle-Size React Server Components**](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)
- [**Everything About React Server Components**](https://vercel.com/blog/everything-about-react-server-components)
- [**Docs of React Server Components in Next.js**](https://nextjs.org/docs/advanced-features/react-18#react-server-components)

This demo is built for showing what features that Server Components provide and what the application structure might look like. **It's not ready for production adoption, or performance benchmarking** as the underlying APIs are not stable yet, and might change or be improved in the future.

## Related Templates

### [Admin Dashboard](https://vercel.com/templates/next.js/admin-dashboard)

Get started building your admin dashboard with Vercel's starter, complete with Tailwind CSS, PostgreSQL, and Auth.

### [Create React App](https://vercel.com/templates/react/create-react-app)

A client-side React app created with create-react-app.

### [Hacker News Clone with React Server Components](https://vercel.com/templates/next.js/next-news)

Built with the Next.js App Router.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.