server-components-demo
react-18
server-components-demo | react-18 | |
---|---|---|
11 | 139 | |
4,176 | 5,173 | |
0.3% | 0.0% | |
2.2 | 0.0 | |
28 days ago | almost 3 years ago | |
JavaScript | ||
MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
server-components-demo
-
React Server Components Without a Framework
I, along with many ReactJS devs, have been following the development of the "new" React Server Components API with excitement. It solves some common problems in React around data fetching and efficiency in client side applications. If you're interested in learning more about the API I'd recommend you listen to the recent JS Party podcast with Dan Abramov and Joe Savona from the React Team on the future of React, and then check out the React Server Components Demo on GitHub.
-
So, why Server Components?
I borrowed this piece of code from the React Server Components demo Notes application.
-
Harnessing the power of React Server Components + Miro
And perhaps most importantly, one of the biggest limitations of RSC at this time is their out-of-the-box support. Currently, the React team has partnered with Vercel/NextJS to develop some boilerplate functionality within the NextJS structure (still experimental). Note: This boilerplate demo app was developed in the early stages of RSC, and will be replaced by the Layouts RFC going forward.
- React Server Components and Remix
-
Let's make a web application with React Server Components.
See the README for how to install the demo. https://github.com/reactjs/server-components-demo
-
React Futures - Server Components
Let’s use this example of a server component:
-
Should You Care About React Server Components?
For example, as I started to play around with the React team’s Server Components demo, I realized I had to fundamentally change how I approached building components. Instead of just creating a new file and typing export const MyComponent = () => {}, I now had to start thinking about how the component would be used, to help determine whether it was a better fit for the client or the server.
-
What are React Server Components and will you need to use them in the future?
If you want to play around with the demo code for React Server Components, you can find this code on GitHub.
-
An Introduction to React Server Components
As we see in the demo app, the server component is rendered in a special format which can be read by the client. We can see the special format in the below image
-
Yet Another Article About React Server Components
I'm looking forward to trying out React server components (I plan to fork the React team's demo and play with it), but I don't see myself having a heavy use for it in my everyday life. I'm not currently working on any personal projects that require interactivity, and for the projects I'm working on, server-side rendering is probably a better way to reduce my bundle size.
react-18
-
Simulate global state tradeoffs in React concurrent mode
If you aren't sure why state tearing was a hot topic a few years ago, when React's concurrent mode was first discussed, this github discussion should help: https://github.com/reactwg/react-18/discussions/69.
Tanner Linsley had a great post on twitter that suggested that concurrent rendering was fundamentally at odds with fine-grained reactivity, so to better understand what he was talking about I decided to write this demo.
- A modest request: How do you fetch data in React 18+ WITHOUT a third party dependency?
-
The Sisyphean Quest for Web Performance
Image Source: https://github.com/reactwg/react-18/discussions/37
-
useAsyncState in react, no more unnecessary useEffects.
But it does since React 18.
-
Function props
See this post for more details and an example of an actual memory leak.
-
ELI5, why is ReactDOM.createRoot an improvement over ReactDOM.render?
From the React WG:
- I know my component is re-rendering because a console.log I put in the component is logging in the console. However when I use the inspector to see why it re-rendered, its saying that it didnt re-render. How is this possible?
- Timeout in event handler
-
The current state of CSS-in-JS + React
The React working group is officially advising against using runtime CSS-in-JS.
- Warning abt setting state of unmounted component
What are some alternatives?
cross-env
Preact - ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
rfcs - RFCs for changes to React
htmx - </> htmx - high power tools for HTML
react-component-compiler - React Client and Server Components without a Framework
petite-vue - 6kb subset of Vue optimized for progressive enhancement
miro-workshop-finished - A finished version of the 2022 We Are Developers workshop hosted by Miro
react-query - 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
rfcs - RFCs for changes to React
React - The library for web and native user interfaces.
rsc-project-template - React Server Components Template
zustand - 🐻 Bear necessities for state management in React