| 
1 |  | -# rsc react-router  | 
 | 1 | +# Welcome to React Router! (Experimental RSC)  | 
2 | 2 | 
 
  | 
3 |  | -https://vite-rsc-react-router.hiro18181.workers.dev  | 
 | 3 | +⚠️ **EXPERIMENTAL**: This template demonstrates React Server Components with React Router. This is experimental technology and not recommended for production use.  | 
 | 4 | + | 
 | 5 | +A modern template for exploring React Server Components (RSC) with React Router, powered by Vite.  | 
4 | 6 | 
 
  | 
5 | 7 | > [!NOTE]  | 
6 |  | -> React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components) for Vite. The example might not be kept up to date with the latest version. Please refer to React Router's official documentation for the latest integrations.  | 
 | 8 | +> React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components) for Vite. This example is updated to match the latest official template from @remix-run/react-router-templates.  | 
 | 9 | +
  | 
 | 10 | +## Features  | 
7 | 11 | 
 
  | 
8 |  | -Vite RSC example based on demo made by React router team with Parcel:  | 
 | 12 | +- 🧪 **Experimental React Server Components**  | 
 | 13 | +- 🚀 Server-side rendering with RSC  | 
 | 14 | +- ⚡️ Hot Module Replacement (HMR)  | 
 | 15 | +- 📦 Asset bundling and optimization with Vite  | 
 | 16 | +- 🔄 Data loading and mutations  | 
 | 17 | +- 🔒 TypeScript by default  | 
 | 18 | +- 🎉 TailwindCSS for styling  | 
 | 19 | +- 📖 [React Router docs](https://reactrouter.com/)  | 
 | 20 | +- 📚 [React Server Components guide](https://reactrouter.com/how-to/react-server-components)  | 
9 | 21 | 
 
  | 
10 |  | -- https://github.com/jacob-ebey/parcel-plugin-react-router/  | 
11 |  | -- https://github.com/jacob-ebey/experimental-parcel-react-router-starter  | 
12 |  | -- https://github.com/remix-run/react-router/tree/rsc/playground/rsc-vite  | 
 | 22 | +## Getting Started  | 
13 | 23 | 
 
  | 
14 |  | -See also [`rsc-movies`](https://github.com/hi-ogawa/rsc-movies/).  | 
 | 24 | +### Installation  | 
15 | 25 | 
 
  | 
16 |  | -[](https://stackblitz.com/github/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/react-router?file=src%2Froutes%2Froot.tsx)  | 
 | 26 | +Install the dependencies:  | 
 | 27 | + | 
 | 28 | +```bash  | 
 | 29 | +npm install  | 
 | 30 | +```  | 
17 | 31 | 
 
  | 
18 |  | -Or try it locally by:  | 
 | 32 | +### Development  | 
19 | 33 | 
 
  | 
20 |  | -```sh  | 
21 |  | -npx giget gh:vitejs/vite-plugin-react/packages/plugin-rsc/examples/react-router my-app  | 
22 |  | -cd my-app  | 
23 |  | -npm i  | 
 | 34 | +Start the development server with HMR:  | 
 | 35 | + | 
 | 36 | +```bash  | 
24 | 37 | npm run dev  | 
 | 38 | +```  | 
 | 39 | + | 
 | 40 | +Your application will be available at `http://localhost:5173`.  | 
 | 41 | + | 
 | 42 | +## Building for Production  | 
 | 43 | + | 
 | 44 | +Create a production build:  | 
 | 45 | + | 
 | 46 | +```bash  | 
25 | 47 | npm run build  | 
26 |  | -npm run preview  | 
 | 48 | +```  | 
 | 49 | + | 
 | 50 | +## Running Production Build  | 
 | 51 | + | 
 | 52 | +Run the production server:  | 
27 | 53 | 
 
  | 
28 |  | -# run on @cloudflare/vite-plugin and deploy.  | 
29 |  | -# a separate configuration is found in ./cf/vite.config.ts  | 
 | 54 | +```bash  | 
 | 55 | +npm start  | 
 | 56 | +```  | 
 | 57 | + | 
 | 58 | +## Understanding React Server Components  | 
 | 59 | + | 
 | 60 | +This template includes three entry points:  | 
 | 61 | + | 
 | 62 | +- **`entry.rsc.tsx`** - React Server Components entry point  | 
 | 63 | +- **`entry.ssr.tsx`** - Server-side rendering entry point  | 
 | 64 | +- **`entry.browser.tsx`** - Client-side hydration entry point  | 
 | 65 | + | 
 | 66 | +Learn more about React Server Components with React Router in our [comprehensive guide](https://reactrouter.com/how-to/react-server-components).  | 
 | 67 | + | 
 | 68 | +## Styling  | 
 | 69 | + | 
 | 70 | +This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.  | 
 | 71 | + | 
 | 72 | +## CloudFlare Support  | 
 | 73 | + | 
 | 74 | +CloudFlare specific configurations are available in the `cf/` directory:  | 
 | 75 | + | 
 | 76 | +```bash  | 
30 | 77 | npm run cf-dev  | 
31 | 78 | npm run cf-build  | 
32 | 79 | npm run cf-preview  | 
33 | 80 | npm run cf-release  | 
34 | 81 | ```  | 
 | 82 | + | 
 | 83 | +---  | 
 | 84 | + | 
 | 85 | +Built with ❤️ using React Router.  | 
0 commit comments