Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ziir/rsc-demo
React Server Components (RSC) Demo / Playground without a framework
https://github.com/ziir/rsc-demo
components javascript javascript-framework react rsc server
Last synced: 3 months ago
JSON representation
React Server Components (RSC) Demo / Playground without a framework
- Host: GitHub
- URL: https://github.com/ziir/rsc-demo
- Owner: ziir
- License: mit
- Created: 2023-11-07T10:50:55.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-11-13T16:56:16.000Z (about 1 year ago)
- Last Synced: 2024-11-01T06:51:36.412Z (3 months ago)
- Topics: components, javascript, javascript-framework, react, rsc, server
- Language: JavaScript
- Homepage: https://rsc-demo.timtech.blog
- Size: 258 KB
- Stars: 51
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Server Components (RSC) Notes App Demo / Playground without a framework
- See the [Live Server Components (RSC) Notes App Demo / Playground](https://rsc-demo.timtech.blog/)
- Read the blog post [React Server Components, without a framework](https://timtech.blog/posts/react-server-components-rsc-no-framework/)
## Disclaimer
Please note, there is absolutely nothing optimal about the following implementation yet, it is purposely naive, incomplete, and is intended for learning & demo purposes.
## Objectives
- a somewhat functional React Notes App (listing, creating, editing & deleting notes with a text title & Markdown content)
- React Server Components used alongside Client Components
- some sort of server-side rendering
- some kind of data-fetching using Server Components
- routing that somewhat works both in the client & on the server
- refreshing server components from the client
- a usable RSC playground
- above all else: learn
## Getting Started
Developed on Node.js v18.18.1 + npm v9.8.1
- `git clone` this repository
- `npm ci`
### Dev Environment
- start a Webpack process, watching for changes in `./src` and outputting built files to `./dist`
- start a Node.js HTTP Server (with Fastify) at http://localhost:3000, watching for changes in `./server`, `./src` & `./dist` with Nodemon
```
npm run dev
```
### Prod Environment
Run the Webpack build & start the Node.js HTTP Server, for production.
```
npm run build
npm start
```
## Main Dependencies
- [Webpack](https://webpack.js.org) bundler
- [Babel](https://babeljs.io) JavaScript compiler, for transpiling JSX syntax
- [Fastify](https://fastify.dev/) for the HTTP web server
- [a-route](https://github.com/WebReflection/a-route) extremely minimal JavaScript / DOM routing library leveraging Custom Elements
## Misc
- Created by [Timothée “Tim” Pillard](https://timtech.blog/about/) [@tpillard on Twitter](https://twitter.com/tpillard)
- ["React Server Components, without a framework" blog post announcement on Twitter](https://twitter.com/tpillard/status/1721848350813585611)
- Based on [React Notes App](https://react-notes-app.timtech.blog/)