Tom Sherman
@tomus_sherman
Followers
1,305
Following
509
Media
759
Statuses
12,187
CEO of React Server Components he/him/his
Norwich, England
Joined December 2011
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Elon
• 637670 Tweets
Argentina
• 402329 Tweets
Celtics
• 219149 Tweets
FANDOMS CONTRA A PL 1904
• 145863 Tweets
Luka
• 132137 Tweets
Chino
• 124097 Tweets
イーロン
• 102445 Tweets
Dallas
• 92685 Tweets
Villarruel
• 91711 Tweets
Mavs
• 84329 Tweets
$COOKIE
• 76635 Tweets
Tatum
• 73273 Tweets
自分のポスト
• 72687 Tweets
自分のツイート
• 65068 Tweets
MARTIN AL 9009
• 56422 Tweets
コロンブス
• 55360 Tweets
プライバシー
• 49279 Tweets
Mavericks
• 45973 Tweets
自分の投稿
• 42035 Tweets
#NBAFinals
• 41895 Tweets
Midori
• 36758 Tweets
Jaylen Brown
• 35479 Tweets
生存確認
• 34507 Tweets
ブックマーク
• 29911 Tweets
#いいね非公開
• 28089 Tweets
Alisson
• 22344 Tweets
ジャンポケ
• 16671 Tweets
Jrue
• 16527 Tweets
ブラウザ版
• 13000 Tweets
#DifferentHere
• 12188 Tweets
Tillman
• 11919 Tweets
Hardaway
• 10163 Tweets
I am very nervous about server actions that create closures over data.
Quick gut check, is this safe code? Which parts are visible from the client?
It comes down to: do you trust react to have the correct heuristics? Do you trust your teams to follow the conventions?
31
15
287
When we say "caching is hard" don't we really mean "invalidation is hard"?
31
6
185
New profile header unlocked
4
0
124
Whatever you do, don't rely on redirects on React Native iOS!
When redirecting to a new location, the http client doesn't attach the original headers leading to failed fetches or unexpected results
1
2
115
@andrewingram
I think this will be a common one, doesn't seem so obvious 😬
Fetch some data using a secret (this is fine, nothing leaks - recommended RSC pattern!)
Add a server action: damn, you just closed over the secret in an attempt to save hitting your secrets DB again and leaked it...
11
14
111
Server components are like magic for reducing bandwidth
Data fetched from contentful: 60kb gzip
RSC payload to render that page: 8kb gzip
🤯
8
2
108
People saying that there's Next.js favouritism from the React core team have it backwards. Next.js is the only major framework that has made a fully devoted bet on React as an architecture. Nothing comes close so of course it makes sense that Next.js is the headline framework
2
4
93
I've finally figured out what it is I don't like about Styled Components
They force you into a model where your components are too small. The component as a style primitive is wrong - styling should live orthogonal to the component tree
13
3
92
2
7
96
Would anyone like to partner on creating an Electron alternative that builds on top of React Server Components?
It would take the good parts of Electron, Tauri, and React Native. The IPC would be replaced with the server components (React Flight)
14
9
86
Just used Vercel instant rollback for the first time. 10/10 would push critical bugs to production again
2
2
67
Perfect syntax highlighting with Shiki and React Server Components in under 50 lines of code 🤯
4
2
66
Hey look!
@tan_stack
react-location running on
@reactnative
👀
A few quirks to work out on the React side, then on to integrating react-native-screens 📺🧭
4
7
63
@IanColdwater
Great way to wake up the on call security engineer: just forward a port in vscode, much faster than raising a ticket
1
0
61
@ryanflorence
Harsh lol. The bugs aren't indicative of the amount of files/layers tho, that was my goal
8
0
56
Fetching data in the React SSR pass is simply a bad idea, soon we'll all agree on this I'm sure 😅
8
1
54
Got promoted to principal engineer and it's kinda intimidating but also very fun. Like there's this while council of principal engineers that meet
Shadow wizard money gang vibes
14
0
52
The current TypeScript discourse is so lame. Remove types if you want, I don't care
Meanwhile at
#ReactNativeEU
@tmikov
is talking about making apps 20x faster by leveraging the type information to compile JS to native
1
0
51
React server actions are coming. I don't think this is going to be a recommended pattern but you can call them inside of your client code.
Here I'm syntax highlighting some text on keypress, pretty cool!
@andrewingram
@fredkisss
In my demo I was able to actually remove the use of `use` and `cache` (probably was using it wrong anyways)
Setting the element to state feels like a better solution to me but maybe I'm still using it wrong?
1
0
2
1
5
48
There is a very radical idea in this talk that's easy to miss: when dealing with a UI, thinking of the server and client as two actors that communicate by passing messages is incorrect
Don't let that idea just float by, it has deep ramifications
Dan Abramov's "React for Two Computers" was a seminal talk. It makes the case for the inevitability of the Server and Client component paradigm.
Every time you visit a page, you're witnessing computation distributed over time and space. When a page gets server-rendered, Computer…
10
78
777
5
0
47
Not enough has been written about how React Server Components enables conditional frontend bundles (per user, region, whatever)
Many millions of dollars of investment in bundling, code delivery, and feature flagging melt away and is now replaced with flags={await getFlags()}
4
4
46
@aulneau_
@markdalgleish
Single responsibility. You have components that own layout and spacing, and components that own content. Rolling layout (show/hide affects layout) into a content component muddles this separation of concerns
2
2
41
React Server Components are kinda like monads. The closer you get to understanding their nuance, they reveal more. Also, the harder you try to explain them the more confused your audience is 😂
5
1
40
Getting closer to finishing this server actions demo, super fun to learn these new primitived first hand
Got this weird bug tho when I submit multiple actions in a row with useOptimistic. Some jank intermediate states in there. Gonna try tackle that in the morning
6
1
40
I think we can all guess what'll be announced at Next.js conf 😅
Server Actions are now in React Canary, ready for frameworks and libraries to adopt! Server Actions are functions created alongside your components that run on the server for tasks like data mutations
98
469
3K
3
1
39
Big yikes
1
0
37
@ryanflorence
I've worked on one of those local-first apps and it could have definitely still benefitted from RSC
For example there was a large amount of infra to handle feature flagging and dynamic code delivery. That becomes way easier with RSC
2
0
35
I hate Google Tag Manager so much but understand why marketeers want it, the need is real and I get that
Maybe though a server-side alternative could be made tho? One that doesn't trash the page and can't execute arbitrary JS...
8
2
34
The React Server Components paradigm shift churns through it's first library
Stitches you were great for the apps of yesterday, I'm sure your ideas will return in the apps of tomorrow 🫡
Stitches is officially no longer maintained
I'm really proud of the impact
@stitchesjs
had on the space, and how many new styling solutions were inspired by it
Alongside with Radix, it's one of the projects I'm most proud of
Thank you all for the support
Lastly, a huge…
37
34
567
1
0
34
I think Vercel need to work more in teaching their Build Output API and config stuff. Just being able to peak under the hood and see what's being configured in the platform would do well to address the "magic black box" vibe that many people have
4
3
34
I genuinely think the demos I and
@ebey_jacob
have built are a world first... first open source architecture for HTTP streaming workloads on serverless functions
AWS, GCP, and Azure all don't support streaming on their serverless offering. Solved it for all of them at once
2
3
33
@mattpocockuk
@heyImMapleLeaf
There's a TC39 proposal at stage 2 to make this function redundant, which is nice
2
1
32
So anyone figured out a way to do infinite scroll with server components yet?
I know there might be a primitive coming for this, but I wanna build something now 😂
I really don't wanna ship the list item component to the client
11
0
32
Is web dev twitter feeling especially toxic right now or is it just me?
11
0
31
What if we just like... didn't do this?
estimating tickets is my least favorite part of being a software developer
180
105
2K
7
1
29
Channeled my inner
@mattpocockuk
to add
#TypeScript
definitions to pify, a really old but still very popular Node.js library (67 million weekly downloads)
It includes some quite frankly horrifying TypeScript metaprogramming 🫠
2
2
28
Funny post but "context provider hell" has gotta be the biggest non-issue in React development
ceiling is being raised. cursor's copilot helped us write "superhuman code" for a critical feature. We can read this code, but VERY few engineers out there could write it from scratch.
115
258
5K
5
0
27
@ryanflorence
It's all good, maybe one day I'll finish the migration
I didn't expect to win against a professional demo maker 😏
2
0
28
@wesbos
@adfontes__
5 started at 11:01 on 13th July 2012, you can look forward to 7s starting on 18th July 2029 at 05:49 assuming the world as we know it still exists then
2
1
28
In React, avoid passing your props in nested structures!
<Comp data={data} /> has a performance cost by default if that data is an object
Instead, pass each key of data as separate props. It'll allow React to bail out of rerendering when those props are the same (using ===)
5
2
27
An unexpected (to me) benefit of moving to server components is that the React code I have already written becomes more reliable when ran in the server component render phase.
So many problems just disappear: browser compat, CPU/memory pressure
2
3
27
Server components present a kind of identity crisis for Remix.
How does it integrate this new primitive without just becoming Next.js? How does it maintain the Remix philosophy?
6
2
27
Is there a place where these kind of spec incompatibilities in React Native can be logged?
It's surprising that fetch is so in-compliant on React Native
Is WinterCG the right place to take this discussion?
2
0
26
@fredkisss
@andrewingram
Both of these closure values are sent to the client in the form of hidden inputs in the form
1
0
26
Are there any engineering articles from companies that have moved off of GraphQL?
I want to better understand the risks associated at scale
4
5
25
@heyruchir
To be clear, this isn't frontend code. This is a server component that will only ever run on the server
2
0
24
@agjSecond
@abhagsain
@jingggfanboy
Why would anyone buy expensive wings at hooters when better & cheaper wings can be obtained elsewhere?
2
0
24
@sherifcodes
@tannerlinsley
We do something similar but use React Context, no need for the hook factories - just useQuery wherever you want. Wrapping useQuery can become very difficult in TypeScript as the generics are quite complex
2
0
25
@andrewingram
Should be solvable with a lint I think - assuming you can encode matching heuristics into the linter and can enforce some naming convention on secret values
I don't think a feature should rely on a linter to be safe though
3
0
24
My mental model is:
Remix - a web framework
Gatsby - a static content framework
Next.js - a React framework
0
0
23
@rauchg
Here's my theory:
Image means you don't have to leave slack/twitter to see what the link is.
You don't click on the Amazon link because you know what the link is
That's a missed opportunity to get someone onto Amazon and convert them
2
1
23
@ryanflorence
Stop tracking users, it's a massive thick block of wool pulled over the eyes of this industry. It's not needed 95% of the time
6
0
24
@rossipedia
The discourse is the only way we're able to get these concise explanations, they don't come for free 😅
1
0
24
@t3dotgg
I'm not talking about the code here btw, I'm talking about closure values.
The example in that tweet doesn't leak any secrets to the client but this one does. The reason why is very subtle
@andrewingram
I think this will be a common one, doesn't seem so obvious 😬
Fetch some data using a secret (this is fine, nothing leaks - recommended RSC pattern!)
Add a server action: damn, you just closed over the secret in an attempt to save hitting your secrets DB again and leaked it...
11
14
111
3
0
21
This weekend's toy project is porting to
@partykit_io
I was surprised to not see any state machines in the examples yet!!
2
4
23
Server components are going to shift React developer's thinking of what SSR is for. It's an optimisation pass that some apps don't need.
Remix mixes the concerns of data fetching and SSR, server components give you another lever so you don't _have_ to mix those concerns
3
3
23
@thdxr
@AverageProMax
The new pricing model is 30s CPU time per request with no limit on duration
1
0
23
No replies to this means that graphql is clearly the most perfect technology and nobody has ever regretted using it
3
0
22
Ok React, interesting way to add arbitrary algebraic effects to JavaScript but we move
2
2
23
Best headless React library and it's not even close
Ariakit is in a very stable state right now. It remains in v0.x because I want to sync the official package release with the launch of the website.
It's following semver, and breaking changes are now preceded by deprecation warnings prior to the actual…
5
21
109
1
2
22
Used React Server Actions to allow anyone on the internet to control the height of desk
It went about as well as you'd expect. Bobby was very concerned
3
1
22
Oh hi Waku 👋
We have liftoff with server components running on Electron 👀
2
2
22
A side effect of this is that they force you to name things. How many times have you seen StyledNavWrapper in your codebase?
This obscured what's going on, and makes it hard to spot semantic HTML mistakes
5
0
21
When is somebody gonna front me a few million dollars to build Figma for video?
Step 1: I get
@Vjeux
onboard as a cofounder
Step 2: we build it
Every online video editor out there right now is doing it wrong. It shouldn't need an internet connection, this changes everything
5
1
20
Still get can't my head around Next.js executing server actions in serial
Still not sure if this is a Next.js decision or a React constraint
Frustrating because actions are brilliant, I just want to be able to control their execution like I can with a regular fetch()
3
1
19
@oconn518
@astuyve
@roxcoldiron
Assume your vault has been leaked. Rotate all passwords that haven't been rotated since you moved. Even if you told them to delete your data, at this point I wouldn't trust that to be reliable
1
0
20
🫡
Web standards >>>>>
So
@tomus_sherman
just refactored PartySocket (our layer on top of WebSocket that adds buffering/reconnecting/resilience logic) to be smaller (and fixed bugs), and then fixed all the flaky tests, all on a Sunday. What a complete legend 👏
1
3
29
1
2
19
@peduarte
I've found myself removing this after having it installed for a while, I'm not sure if it's the UX inside Vs code that's bad or the fact that the pretty error actually becomes harder to read than the original message on long errors (which are common)
3
0
18
We have liftoff! The multiplayer donut machine is alive
2
3
19
My take on this is that this is absolutely fine.
React is increasingly less of a library that we use directly and more of a runtime primitive.
Think of Next.js as Chrome and React as V8. This relationship was not detrimental to V8, quite the opposite
Q: Data fetching changes in react are cool, what does this mean for the ecosystem?
A: “Next 13 is the real React 18 release” 👀👀
8
14
259
1
0
18
Just discovered you can use useId inside of a server component
Is this intentional? I couldn't find any docs anywhere
@sebmarkbage
@dan_abramov
2
0
18
@tomlienard
I agree, I think it's the age old problem of trying to put expression-first APIs in JS. It's just not nice
I think though if you just use the generators everywhere it would be much nicer. No map/flatMap/etc, just composing generators
1
0
18
I'm invested in frameworks like Remix & Next because they reflect the changing definition of what "frontend" is
A HTTP API and a client rendered React app is quickly becoming less fit for purpose because fewer teams are setup in a backend & frontend split
2
2
18
People from 2011 who render to HTML on the server are like: so what? We've been fetching MBs of data from SQL and rendering it to a few kB of HTML for years
😂
3
0
18
Next.js broke layouts in 404 pages, pushed a fix, but reverted it because it broke Turborepo apps
Excuse me? Isn't turbo supposed to be alpha, why are users shipping on stable features being de-prioritised over experimental features?
2
0
17
@TkDodo
React Query can't solve the same async race conditions that React can. It has the advantage of seeing the whole world: data, resources, images, CPU intensive renders. React can coordinate it all
I think demoing that interaction can be hard because it's so involved
2
0
17
More tools should allow me to view my codebase as a graph. Call graph, import graph, render graph, dependency graph
I want to be able to delete a node and view the linked nodes that are now disconnected from my app's entrypoint.
2
2
17
Is anyone working on this?
Tailwind is not a good choice for component libraries (correct me if I'm wrong?)
When I was searching before there were no good options, here's hoping server components kick some creativity into this space
@swyx
@rauchg
@vercel
@adamwathan
@tailwindcss
There is still no easy choice for component libraries other than "classic" runtime CSS in JS. Still waiting for someone to figure this out in a nice way
5
0
12
12
0
17
If you're looking to roll this infra out yourself it's actually pretty doable with
@CloudflareDev
Durable Objects
I have a demo here
Vercel now has stable support for HTTP response streaming in both Node.js (Lambda) and Edge runtimes.
Learn more about how we implemented isomorphic streaming for Vercel Functions.
11
82
533
0
3
17
@acdlite
Need to reinvent routing in React Native first I think. The current OSS options are nowhere near as powerful as React Router 6 for example.
2
1
17
What if we could attach React devtools to server components and see their fetches and other IO?
Would let you debug waterfalls, spot fetches that could be made parallel, identify parts that could be delayed with Suspense. Combining network requests and the component graph is 🤯
3
2
17
Shoutout to
@DanielFGray
for making it possible to add proper types to
@remix_run
loader and action context, actual life saver!
It's unfortunate there are no real docs on how to take advantage of this, you have to summon unholy declaration merging to make it work 😱
1
3
16