React Server Components in the wild

Today’s issue: Web dysentery, painful introductions to @scope, and drawing the shape of my mole with a JS function.

Welcome to #193.

---

RSCs in the wild

It’s finally happening. After years of talk, we’re starting to see React Server Components make their way into the wild.

And by “the wild”, I mean, “a few different meta-frameworks with varying degrees of completeness.” So just call me Nigel Thornberry, and let’s all gather around for a closer look:

• Next.js 13.4 introduced stability to App Router last month, which includes a whole new architecture built on top of RSCs as a primitive. This is just one potential application of RSCs, but it’s the only practical implementation that’s ready to be used in production today.

• RedwoodJS just announced that they’ve decided to go all in on RSCs and “leave their Jamstack-optimized SPA roots behind, in favor of a serverful-first, full-stack React framework future.” (My great-grandfather said the same thing when he landed on Ellis Island.)

• Remix hasn’t shared a lot of concrete server component plans yet. But in a valiant effort to reclaim his lost Twitter followers, Ryan Florence (co-creator of Remix) has been tweeting some promising developments regarding their WIP RSC implementation.

It seems pretty clear that in the future, server components will form the foundation of every React meta-framework. So what does that mean for the ecosystem?

Devon Govett shared an interesting take last week about how this might lead to frameworks becoming “much more specialized, since there will be less to differentiate them.”

If every framework is built on server components, they’ll all have the same, standardized approach to data fetching, routing, DX, and even performance. That could result in them choosing to differentiate by doubling down on one highly specific use case (like ecommerce), and building more opinionated features for that use case.

Bottom Line: We’re still in the first inning of server components, so expect to hear a lot more about them and the ripples they’ll create in the coming months and years.

---

Appwrite Cloud helps you build beautiful backends

Did you know that scientists discovered that approximately 97% of all developers hate building backends from scratch?

That’s probably why Appwrite has 31.5k GitHub stars: It’s an open-source backend server that abstracts away the worst parts of building a backend with super simple REST APIs.

But it always required you to be self-hosted — until now, thanks to the brand new Appwrite Cloud. And developers have been foaming at the mouth to try out the new beta:

• Fully managed backend infrastructure – No more worrying about machine configuration, security, maintenance, etc.

• Auto scaling – So your app can easily handle traffic spikes without tanking performance.

• Built-in security – Advanced security features like DDoS protection, WAF rules, and lots of other goodies come standard.

Check out the public beta to get early access.

---

function removeElement(array, elementToRemove) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === elementToRemove) {
      array.splice(i, 1);
    }
  }
}

let myArray = [1, 2, 3, 2, 4];
removeElement(myArray, 2);

---

1. TypeScript 5.1 just came out with smarter checks for undefined-returning functions, better checks against JSX flags, extra-strict mode, and @param snippets. Yes, I made one of those up.

2. Daishi Kato (the OSS wizard behind Jotai and Valtio) just released Waku - a new React framework with RSC. Buckle up for lots more of these.

3. BugHerd is the best tool for getting contextual website feedback from your team and users. It automatically provides technical details about the user’s browser, OS, and more so you can pinpoint the exact issue and resolve bugs quickly. [sponsored]

4. Ollie Williams wrote this helpful Introduction to @scope in CSS, which will be landing in Chrome 117. I already had my own painful introduction to Scope when I was 14, and my older brother’s friends made me drink a full bottle of it at a sleepover to see if it would get me drunk. (It half worked.)

5. ReMDX helps you create beautiful, minimalist presentations with React & MDX.

6. Ruth John wrote on the new MDN blog about How to draw any regular shape with just one JavaScript function. Can it recreate the shape of a mole? Because I’ve been putting off a doctor’s appointment for a while now.

7. Vue Vine is a new way to write Vue components with greater flexibility and NOT a dead popular social network app where “videos and personalities get really big, really fast” built in Vue.

8. Miško Hevery went on the Stack Overflow podcast to talk about Dehydrating the web. I can’t wait to hear his next interview about giving the web dysentery.

---

function removeElement(array, elementToRemove) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === elementToRemove) {
      array.splice(i, 1);
    }
  }
}

let myArray = [1, 2, 3, 2, 4];
removeElement(myArray, 2);

This solution isn’t ideal since it doesn’t account for the fact that the array is being modified as it’s being iterated over. When the element at index 1 is removed, the element at index 2 is shifted to index 1.

There are a bunch of ways to make this better, all with varying tradeoffs. This is probably the best one, which uses JavaScript’s filter method to return a new array after filtering out the elementToRemove.

function removeElement(array, elementToRemove) {
  return array.filter((element) => element !== elementToRemove);
}