It's been a week of React Server Components, so plenty of reading to go around about it!
Maybe worth trying your hand with Next.js 131 to see what the fuss is about?
Kent hosted Dan and Joe for a 2 hour live stream to put forward his concerns. Plenty of familiar names turned up to listen in too. Don't have 2 hours spare? Catch my recap from earlier this week.
Dan was already looking for best ways to pitch RSC's. Plenty of information to skim through in this Twitter thread.
Dan started playing with Remix some more (Kent's influence? 😁) and had some ideas for the Remix team on implementing React transitions.
And for those who have a lot of free time this weekend, Ryan did a 5 hour long in depth stream about server components.
Matt's secret on understanding TypeScript is out of the bag!
Speaking of which, Matt was also putting final touches on his new TS library, 'untypeable'. When you want to type something you don't and won't control.
Zach had a great tip I've not seen before for using Zod for local env type safety. We've had people onboard to our team before and miss required env vars to get things running, this would solve that problem for sure!
This Week In React
My top picks, make sure to subscribe!
Josh outlines some common mistakes he's seen during his time teaching. I always enjoy Josh's writing style. How many do you remember making, or are making at the moment? 😅
Alex writes about how important component composition is to avoid prop drilling. I couldn't agree more with this, keeping components small and composable, and thinking about your component layout more than just how to get data to the component is key for good clean maintainability going forwards. This, ironically, is a good mentality to have for RSC's too!2
Zod, the TS first schema validator that is literally everywhere right now, just released a new version. Super neat looking
.ip() included which I can't wait to try out.
And finally, in CSS Weekly:
Šime writes an interesting article about the pros and cons of using the
::marker pseudo selector for custom bullet points in lists. It's not as simple as it first seems.
Daniel writes about the proper use of alt text for accessibility, something I'm likely failing on with my blog and will need to revisit. Do you?
Here's a neat little app for testing custom scroll bars. I really like the simple design here too.
This blog is built with Next.JS 13 and RSC, and it was an interesting set up and shift in thinking. Worth giving a go. ↩
While you can't import server components in child components with RSC, you can pass them as props using the standard