Skip to content
/ rsc-demo Public

React Server Components (RSC) Demo / Playground without a framework

License

Notifications You must be signed in to change notification settings

ziir/rsc-demo

Repository files navigation

React Server Components (RSC) Notes App Demo / Playground without a framework

Screenshot of the RSC Notes App Demo / Playground

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 bundler
  • Babel JavaScript compiler, for transpiling JSX syntax
  • Fastify for the HTTP web server
  • a-route extremely minimal JavaScript / DOM routing library leveraging Custom Elements

Misc