Leo

Building — Prev. VP Product @vercel

[Leo @leo]

@bekacru @jaredpalmer 🙏

[Leo @leo]

Safari is the fastest and most efficient browser, and most people anyways use Safari on iOS, so using Chrome as default on desktop implies not having any cloud sync between devices.

[Leo @leo]

Brother from another mother. I thought I was the only one doing that. Safari is simply the best "consumption" browser, while Chrome is the best "creation" browser.

[shadcn @shadcn]

@wongmjane Same here. Safari is default. Chrome for dev work.

[Leo @leo]

@luciascarlet At least it's a lot more durable than the Aluminum phones 😁

[Signal @signalapp]

We are alarmed by reports that Germany is on the verge of a catastrophic about-face, reversing its longstanding and principled opposition to the EU’s Chat Control proposal which, if passed, could spell the end of the right to privacy in Europe.

https://t.co/015qmQnIS2

[Leo @leo]

@lgrammel @aisdk Incredible work, Lars! Exiting to continue watching your ideas take shape in the SDK!

[Leo @leo]

@rauchg @vercel Huge milestone! Congrats to the whole team! 👏

[Leo @leo]

@lachlanjc @vercel I wonder if they could instead delete most old deployments, but retain snapshots (e.g. every couple months or so), to still provide an overview of the deployment history forever. cc @tomocchino

[Leo @leo]

@roguesherlock @jitl I definitely agree! We do plan to embed data into the client eventually, as an additional optimization, but not as functionality blocker. The APIs that Blade has won't change, and the performance will only change marginally, due to our edge replicas.

[Leo @leo]

Suspense in React is a solution to a problem that should have never existed in the first place. It exists to avoid blocking the UI on slow data and data waterfalls, but it is, in my opinion, fundamentally anti dynamism, anti personalization, and anti performance.

Because the effort required to craft a clean UI with it is much greater than if it wasn't involved. A proper skeleton requires meticulous planning of all the potential states that a UI could be in, and then have those be represented as good as possible by the skeleton. It is always an approximation, and the worse the approximation is, the worse the user experience is.

Whereas, if your data is fast, the final UI is not constrained to what the skeleton looks like, which enables the best user experience (no loading states), maximum dynamism, and thereby also maximum personalization. Of course this doesn't immediately work for any app of any size, but there is a wide range of small to medium apps for which it, in my opinion, makes the most sense.

I created https://t.co/6Ss61xdb33 to make it easy to quickly build apps that offer maximum dynamism, however, without any loading states whatsoever. No skeleton, no SPA spinner, no slow TTFB. Every page render is a single database transaction, even if your layouts and page contain many dozens of queries. If you perform a write, the whole UI is updated for you, in the same transaction that performs the write.

[Leo @leo]

I agree with the common abstractions. I don't perceive them as limiting factors, however. The way I see it is that the term is also a result of how I use a given tool.

E.g. I might use S3, which is a disk, as my database for a particular use case. Similarly, I might use my database to store small chunks of binary objects for another use case, which, if you call them files, would then make it my disk. I can also place my files exclusively in memory and have a second faster memory on top, which would make the first memory the new disk.

Technically, if you use S3 over a network stream, you also can't call it a disk anymore, since it's not a part of your own compute stack. It might be a "network storage" for your application, but would use disks internally.

[Leo @leo]

I think that no technology is a silver bullet. As mentioned in the main tweet, the approach definitely breaks down at some point, especially at scale (meaning suspense is needed for those cases).

There are also many other cases, such as e.g. not having any control whatsoever about the data source, having a page that is so insanely long (like the old Vercel Usage page) that data has to be loaded based on the scroll position, and so on.

Unless those cases are met, however, it is IMO unpleasant and unnecessary for users to see loading animations.

[Leo @leo]

Memory, disk, database, a variable in code, CPU cache, or what else you like to call it are all just words for the same thing in different formats.

They can all have the same performance as each other depending on what product you pick and what you do with it. Unless you know the details of each layer, you can't make a sound argument that they are per se slower or faster than each other.

A simple Bun server that runs 10 or 20 queries with a bunch of nested joins on bun:sqlite has the same perf as any CDN. Try it. Adding React and page code on top doesn't change that. Unless you do things like offset-based pagination, no pagination at all, heavy counts, or other things that you need to avoid anyways, it will be fast.

[Leo @leo]

I would say it always depends on how fast the thing is that you need to load. I of course agree that you can't make something faster that you have no control over (like the OG image of a different website), but for most apps, there are many vectors, such as the main data source, that devs are very much in control of.

So yes, suspending something you absolutely cannot control of course makes sense, but my point is that we control a huge part of our stack, and suspense is a sledge hammer that is being used for things that it should've never been used for (first load and page transitions).

[Leo @leo]

I agree. But ultimately, the server remains the source of truth in any model. There is not just data to consider, there is also code. For example, teams deploy several times per hour, and that code has to hit the client asap, so without server components you'd frequently download tons of unnecessary code, which is especially slow on slow connections. We do plan to offer data on the client, but we can't neglect the other requirements on the way there.

[Leo @leo]

@jitl Fair enough! The database engine that Blade imports is a separate project of ours that will get its own docs. Will try to get more details landed on the Blade docs until then.

[Leo @leo]

Whether or not you use suspense doesn't change how much HTML you need to download. Even if you use suspense, you still have to serve the static shell. If the static shell is already populated instead of empty, that's better for users, especially for users on slow connections.

Blocking a page render on 10, 20, or many more queries is absolutely fine. Any database executes that amount of queries in microseconds from memory, given that you don't write poorly optimized queries. Executing 1 or 20 queries won't change the perf. The main penalty is the network, and there is only a single request to the DB.

What you said about code vs static isn't valid. The perf of a Node server responding is the same as any CDN responding. They both need to run code and both have that code already evaluated in memory. Native code or not might change the request throughput, but not the perf of a single request.

I wrote Vercel's first prod static file server, which has been used for years, and `serve`, which has 2M+ weekly npm downloads and is Create-React-App's suggested prod server (CRA is being killed ofc).

[Leo @leo]

@jitl You are correct that the network conditions dominate the speed of every page render in Blade. We rolled our own DB replicas in the same 18 AWS regions where Vercel is, which is sufficient for serving almost any user anywhere in around 20ms. Replication happens ahead of time.

[Leo @leo]

@roguesherlock @jitl Correct. Data sits at the edge, just like your application code. That's essential for a fast TTFB with slow connections, since there's no bandwidth to download lots of code or data. We will make data available in the browser too, but the edge is currently almost equally fast.

[Leo @leo]

@ImSh4yy @timolins That's where it always is. Anything has a TTFB. A Blade page render with 10 queries is not slower than the TTFB of a static CDN asset. Because it uses only a single DB transaction, and the perf of a DB doesn't change with the amount of queries, assuming good queries.

[Leo @leo]

@jitl Sorry for that! Will get that fixed. In the meantime, did you see the docs link in my first post?