React Server Components

[roman01la]

you can support this work via GitHub Sponsors or https://buymeacoffee.com/romanliutikov

TODO

• Component tree serializer into React Flight format
  • turns client components into client refs
• server/client components separation
• Server actions
  • normal fn on server
  • turns into api endpoint on server
  • turns into http req on client
  • when called from client, server returns flight payload which applies to ui tree on the client
• server actions as props to client components
  • partial application on server (public args)
  • capture closure (private args)
  • secure all bound args by default
• server elements as props to client components
• client component can render server component (by loading flight payload)
• caching
  • render-pass cached data fetching
  • shared data fetching cache with TTL and revalidation
  • rendered output caching, with opt-out for dynamic components
  • route invalidation
• flight payload caching
  • react-query style cache invalidation
• rendering html + embedded flight payload on initial load
• routing
  • loads embedded flight payload on initial load
  • loads flight payload on client side navigation
  • link component prefetches routes for links visible in a viewport
  • error handling in prod
  • error screen in dev
• server components + data fetching
  • io blocks rendering
  • io + suspense doesn't block rendering, but runs suspended components concurrently and streams chunks of flight payload once they are ready
• support server actions in form actions
• achieve parity with react on data types serialisation, unless not a common usecase
  • uix elements $
  • lazy ref (import) L
  • promises @
  • function ref F
  • maybe enrich with Clojure data types (via embedded EDN)
• automatic, route based, code-splitting
• partial flight payload
• form, file upload
• batched data loader
• ssr/rsc error boundaries
• ssr/rsc context

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8857 ops/s, elapsed 1129ms
helix x 8347 ops/s, elapsed 1198ms
reagent x 6028 ops/s, elapsed 1659ms

PR:
react x 11173 ops/s, elapsed 895ms
uix x 8749 ops/s, elapsed 1143ms
helix x 8210 ops/s, elapsed 1218ms
reagent x 5977 ops/s, elapsed 1673ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8857 ops/s, elapsed 1129ms
helix x 8347 ops/s, elapsed 1198ms
reagent x 6028 ops/s, elapsed 1659ms

PR:
react x 11614 ops/s, elapsed 861ms
uix x 8439 ops/s, elapsed 1185ms
helix x 7955 ops/s, elapsed 1257ms
reagent x 5615 ops/s, elapsed 1781ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8857 ops/s, elapsed 1129ms
helix x 8347 ops/s, elapsed 1198ms
reagent x 6028 ops/s, elapsed 1659ms

PR:
react x 11765 ops/s, elapsed 850ms
uix x 9116 ops/s, elapsed 1097ms
helix x 8264 ops/s, elapsed 1210ms
reagent x 5804 ops/s, elapsed 1723ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8857 ops/s, elapsed 1129ms
helix x 8347 ops/s, elapsed 1198ms
reagent x 6028 ops/s, elapsed 1659ms

PR:
react x 11547 ops/s, elapsed 866ms
uix x 8937 ops/s, elapsed 1119ms
helix x 8230 ops/s, elapsed 1215ms
reagent x 5737 ops/s, elapsed 1743ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8857 ops/s, elapsed 1129ms
helix x 8347 ops/s, elapsed 1198ms
reagent x 6028 ops/s, elapsed 1659ms

PR:
react x 4158 ops/s, elapsed 2405ms
uix x 3795 ops/s, elapsed 2635ms
helix x 2784 ops/s, elapsed 3592ms
reagent x 2537 ops/s, elapsed 3941ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8857 ops/s, elapsed 1129ms
helix x 8347 ops/s, elapsed 1198ms
reagent x 6028 ops/s, elapsed 1659ms

PR:
react x 6978 ops/s, elapsed 1433ms
uix x 6394 ops/s, elapsed 1564ms
helix x 5741 ops/s, elapsed 1742ms
reagent x 4619 ops/s, elapsed 2165ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8889 ops/s, elapsed 1125ms
helix x 5222 ops/s, elapsed 1915ms
reagent x 3918 ops/s, elapsed 2552ms

PR:
react x 7911 ops/s, elapsed 1264ms
uix x 5470 ops/s, elapsed 1828ms
helix x 5388 ops/s, elapsed 1856ms
reagent x 4382 ops/s, elapsed 2282ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8889 ops/s, elapsed 1125ms
helix x 5222 ops/s, elapsed 1915ms
reagent x 3918 ops/s, elapsed 2552ms

PR:
react x 7513 ops/s, elapsed 1331ms
uix x 5549 ops/s, elapsed 1802ms
helix x 5464 ops/s, elapsed 1830ms
reagent x 4403 ops/s, elapsed 2271ms

[accounts-pitch-io]

master:
react x 11173 ops/s, elapsed 895ms
uix x 8889 ops/s, elapsed 1125ms
helix x 5222 ops/s, elapsed 1915ms
reagent x 3918 ops/s, elapsed 2552ms

PR:
react x 5838 ops/s, elapsed 1713ms
uix x 5123 ops/s, elapsed 1952ms
helix x 5790 ops/s, elapsed 1727ms
reagent x 4327 ops/s, elapsed 2311ms