On this page
This week, I delved into React Server Components in Next.js and explored some exciting new features in the Vercel AI SDK realm. Here's a glimpse into what I've learned and how it's shaping my approach to development
React Server Component Chronicles:
The decision by Next.js to go all in on React Server Components, opens in a new tab with App Router, opens in a new tab means React server renders components by default and you opt into using Client Components, opens in a new tab when you need more interactivity. A 180 degree flip.
In certain client side interactions this server-centric routing can cause React to wait on a server roundtrip before it can update the page and client state. This is exactly the scenario I had this week when implementing a search feature. When typing a query into the search input the UX would “hang” until the server returned the fresh data and only then would the UI update.
A timely stumble across Sam Selikoff's post on Instant Search Params with React Server Components, opens in a new tab provided invaluable insight into leveraging the new React hooks useOptimistic, opens in a new tab and useTransition, opens in a new tab to instantly optimistically update the UI and apply the server state once the transition settled. The end result is a responsive UI even when components are server rendered on a 3G internet connection.
AI SDK Awesomeness:
Vercel's continue to push the AI boundaries. This week they teased some upcoming AI features posting a React Server Component streaming AI response that seemingly uses AI to generate the UI on the fly.
When paired with Jared Palmer’s tweet about AI SDK being “all in” on React Server Components the direction of travel for creating the very best AI UX will be server rendered React components.
View the embedded post, opens in a new tab
View the embedded post, opens in a new tab
I strongly suspect this UX is enabled by moving the AI SDK Streaming Server Actions, opens in a new tab out of experimental. I used the experimental version of streaming server actions in my AI CV Chat, opens in a new tab to stream server components which enabled me to easily provide citations in addition to the AI response.
If the next level of streaming React components enables AI to decide what UI to show based on the users request, that is ground-breaking. I could certainly see a future where simply providing an AI model with access to a Figma design system & Storybook of UI Components would be sufficient to build an app layered on top of a simple chat interface.