rsc demo

React服務器組件（RSC）註釋應用程序演示 /遊樂場沒有框架

• 請參閱實時服務器組件（RSC）註釋應用程序演示 /遊樂場
• 閱讀博客文章React服務器組件，而無需框架

免責聲明

請注意，以下實施絕對沒有最佳的選擇，它是故意天真的，不完整的，旨在學習和演示目的。

目標

• 一個功能性的React Notes應用程序（列表，創建，編輯和刪除文本標題和Markdown內容）
• 與客戶端組件一起使用的React服務器組件
• 某種服務器端渲染
• 使用服務器組件的某種數據提取
• 路由在客戶端和服務器上都可以在某種程度上有效
• 客戶端的刷新服務器組件
• 可用的RSC操場
• 最重要的是：學習

入門

在Node.js V18.18.1 + NPM v9.8.1上開發

• git clone這個存儲庫
• npm ci

開發環境

• 啟動WebPack進程，觀察./src的更改，並輸出構建的文件為./dist
• ./src http：// localhost：3000中啟動Node.js http Server（使用Fastify），觀察./server ./dist更改，並使用nodemon

 npm run dev

產品環境

運行webpack build並啟動node.js http服務器，用於生產。

 npm run build
npm start

主要依賴性

• Webpack Bundler
• babel javaScript編譯器，用於翻譯JSX語法
• 快速為HTTP Web服務器
• A-Route極少JavaScript / DOM路由庫利用自定義元素

雜項

• 由Timothée“ Tim” Pillard @tpillard在Twitter上創建
• “ React Server組件，沒有框架”的博客文章在Twitter上公告
• 基於React Notes應用程序