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?
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
@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...
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
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
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)
Suspense is for reading data not fetching it.
Suspense is for reading data not fetching it.
Suspense is for reading data not fetching it.
Suspense is for reading data not fetching it.
Suspense is for reading data not fetching it.
Suspense is for reading data not fetchin
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 📺🧭
I wish shadcn/ui used
@ariakitjs
instead of Radix
I love Radix but there are so many times where I want to drop down to eg. a Composite role to build something custom
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
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
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?
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()}
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
@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
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
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
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 😂
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...
@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
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
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
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
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
@acemarke
This comment from
@phry
has truly blown my mind. The state of online developer education is fundamentally broken, something needs to change. I can't even call out Udemy or that author specifically here because it's a problem that's completely widespread
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.
@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
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 🫠
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?
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
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 ===)
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?
@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
@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
@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
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
@t3dotgg
@nextjs
> Not having access to the url in server components is really annoying sometimes
I still don't get this. Why can't I do `request().url`? Makes no sense to me
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
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
@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...
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
In the latest `swr
@beta
`, you can seamlessly move data fetching between client-side and server-side, or both, in an RSC framework like Next.js:
🔸Client only: useSWR(key, fetcher)
🔹Mixed: useSWR(key, fetcher) + RSC-provided data
🔸Server only: useSWR(key) + RSC-provided data
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()
@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
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
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 👏
@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)
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
😂
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
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
@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
@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
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?
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.
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 🤯