Artificially Intelligent React Server Components

Today’s issue: Improving the performance of my origami Shopify shop, breaking builds to win souls, and one thing that React and the Dune popcorn bucket have in common.

Welcome to #269.

---

A new AI use case for RSC

We’ve seen lots of startups “pivot to AI” in the hopes of catching a ride on the next VC-backed hype train — but Vercel feels different.

They’ve launched some genuinely innovative projects, starting with v0, a “Midjourney for React” tool that lets you use natural language to generate copy-and-paste React + shadcn/ui components.

And they just took things to another level by releasing the Vercel AI SDK 3.0 — which combines v0’s Generative UI tech with Vercel’s other favorite child, React Server Components.

This combo allows you to build rich, component-based UIs for LLMs with real-time data, instead of being restricted to more limited, plain-text responses, like most chatbots.

For example, if you ask ChatGPT to “Show me Lebron’s stats,” it will just spit out boilerplate about how it can’t help you because it doesn’t have access to real-time data.

But with the Vercel AI SDK, you could (in theory) build a chatbot that does the following when a user asks it that same question:

• The LLM converts the user’s plain-text input into structured data that you can call an API with, like the Sportradar NBA API.

• If your LLM supports OpenAI-compatible Functions, you can use the render method to map specific calls to React Server Components.

• This allows your app to serve the user interactive UI components showing Lebron’s points, rebounds, and assists, with additional components displaying his shooting percentages and other stats.

• These components are auto-generated by v0 and streamed directly to the user, meaning that parts of the response are transmitted as soon as they become available.

If you prefer a live demo to my hypothetical written one, you can play around with Vercel’s financial assistant demo. It told me to buy Bitcoin a month ago, so you’ll be in good hands.

Bottom Line: This magic relies on RSC, so you can only utilize it if you’re using Next.js (for now). I’m sure Vercel isn’t exactly heartbroken by that, but if you can’t use AI to pump your own bag, are you even an AI company?

---

POST/CON 24 speaker lineup just dropped 👀

The biggest API conference of the year is happening in SF on April 30-May 1, and the speaker lineup looks incredible.

POST/CON 24 promises a great mix of high-level talks from tech executives and hands-on training from some of the best developers in the world – so it should be easy to convince your boss to send you.

You can see the full lineup here — but here’s a quick list of 3 talks we’re looking forward to:

• “The API Security and Scalability Panel” with the Postman CTO, Heroku CTO, and Southwest Airlines Lead DevOps Engineer

• “Developer Marketing with Public APIs” with the VP of DevRel at APIMatic

• “Navigating GraphQL Adoption in the Real World” with the Principal Engineer at Intuit

Get 30% off your ticket if you sign up before March 26.

---

class Queue {
  constructor() {
    this.list = [];
    this.length = 0;
  }

  enqueue(value) {
    this.length++;
    this.list.push(value);
  }

  dequeue() {
    if (this.length === 0) return;
    this.length--;
    return this.list.shift();
  }

  peek() {
    return this.list[this.list.length - 1];
  }
}

---

1. Joe Savona from the React team tweeted that React Compiler won’t be included in React 19. I haven’t felt this big of a letdown since I learned that my local movie theater ran out of Dune commemorative popcorn buckets.

2. Multiple wrote this quick guide on How to load test any API in under 10 minutes. If you just thought, “Hmm, I wonder if anyone on my team has ever load tested our API,” consider this your sign from the universe to try it out. [sponsored]

3. Nolan Lawson gave a great talk on CSS runtime performance back in Dec 2022, after months of researching two questions: 1) What’s the fastest way to implement scoped styles? 2) Does using shadow DOM improve style performance?

4. A new PR in the React repo calls for adding a new React hook called useActionState to replace and improve the useFormState hook.

5. Talha Naqvi wrote an in-depth post about How their team improved the Shopify App’s Performance. Hopefully this helps increase the conversion rate for my Shopify store that sells handmade origami sculptures of Ellen DeGeneres.

6. Gleam just released v1.0 of their “friendly language for building type-safe systems that scale.” It seems mostly meant for the Erlang virtual machine, but it can also run on JavaScript runtimes.

7. Sentry Launch Week is happening from March 18-22, and they’re announcing new products, new features, and a bunch of other cool stuff. You can get a sneak peek (and win free swag) if you sign up for their launch week email list. It’s a win-win. [sponsored]

8. Vishwas Gopinath wrote about Why React Server Components are breaking builds to win tomorrow. “Breaking builds to win tomorrow” was also the name of my favorite Christian rock song from 2004.

9. Ryan Mulligan wrote about CSS scroll-triggered animations with style queries.

10. Adam Wathan wrote about Open-sourcing our progress on Tailwind CSS v4.0, which just released its first public alpha. I’m also planning to “open-source my progress” on this box of Girl Scout Cookies that I’ve been eating since 9 am — because people have a right to know that I just ingested 980 calories worth of Tagalongs.

---

Since this is a queue (aka: first in, first out), the peek method should return the first element in the list, not the last.

class Queue {
  constructor() {
    this.list = [];
    this.length = 0;
  }

  enqueue(value) {
    this.length++;
    this.list.push(value);
  }

  dequeue() {
    if (this.length === 0) return;
    this.length--;
    return this.list.shift();
  }

  peek() {
    return this.list[0];
  }
}