Making Sense of React Server Components

• server-components

  11 1,332 10.0
  

Dan, you can't deny that most (if not all) the comms from both the React team and Vercel make it obvious that Vercel is not only first-moving on RSC but working intimately with the React team to both vet the implementation and I'm sure offer (opinionated) advice on tweaks/direction.

Also, links to packages with 5 line READMEs and no comments/documentation in the code might as well be called blackboxed. Yes, its open source but that's pretty much it. John or Jane Doe will have to deconstruct and/or assume the team's intention by combing through your links, https://github.com/reactwg/server-components/discussions/5 and the (light) documentation from Vercel on how all this stuff really works.

All I'm asking for is clarity and the ability to potentially create my own implementation rather than watch the "big guys" (read: frameworks) get the advantage by having access to information we don't have.

• react-streaming

  1 205 8.4 TypeScript

  React 18 Streaming. Full-fledged & Easy.

You can see a live demo of this here (using Remix and https://github.com/brillout/react-streaming): https://blessed-ibis-783.convex.site/

The relevant isomorphic data fetching hook source code is here: https://github.com/xixixao/convex-hosting/blob/main/app/hook...

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• convex-hosting

  1 0 7.0 TypeScript

You can see a live demo of this here (using Remix and https://github.com/brillout/react-streaming): https://blessed-ibis-783.convex.site/

The relevant isomorphic data fetching hook source code is here: https://github.com/xixixao/convex-hosting/blob/main/app/hook...

• Immer

  141 26,943 7.1 JavaScript

  Create the next immutable state by mutating the current one

  

I heard that immutability libraries like immer.js [0] help with this. Anyone go this way and had good success? Is this 'the way'?

[0]: https://immerjs.github.io/immer/

• create-react-app

  575 101,853 1.5 JavaScript

  Set up a modern web app by running one command.

  

Can you be more specific which linting rule you're talking about or the sake of readers who may be unaware, and perhaps mention how this completely solves this problem? Because 1. a linting rule does not absolve this from being a footgun and 2. if you're talking about 'exhaustive-deps' there are many cases where following the linter here has caused infinite render loops among newbies across multiple teams I've worked with. Also see this highly contentious thread: https://github.com/facebook/create-react-app/issues/6880

• bun

  288 70,488 10.0 Zig

  Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one

  

https://bun.sh/

Which promises to reduce the tooling headaches to get a project going without using a bunch of frameworks. Their bundler though is still nowhere near ready so I wouldn't recommend it for frontend projects yet. Using Bun just to run nextjs/webpack/whatever on top of it also doesn't seem like a good solution to me.

Bun might support RSC in the future, but in my opinion RSC is a very specialised tool to be used only in a few critical places in your code and it is scary how Vercel is pushing for it so hard in their docs. You have to remember that the average new frontend developer now uses "create-next-app" not "create-react-app" and is introduced to RSC right away

Suggest a related project