|
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