Thread by @cramforce

So excited to be at #nextjsconf! Follow along on this 🧵for some background technical info on the things being announced at the keynote today!

Releasing Turbopack!
With the alpha version of Turbopack the team at @vercel led by @wSokra, the creator of webpack, is shipping something that has long been a dream of mine: A JS bundler designed from the ground up to support incremental compilation
turbo.build/pack

@vercel @wSokra While other bundlers support incremental compilation at dev time, Turbopack is designed to extend the same incremental processing model to production! Fix a typo on your login page–Turbopack will only do the absolute minimal amount of work to actually update your site

Systems like Google’s bazel can do cached compilation with massive concurrency–but once it comes to compiling the JavaScript of massive apps like Gmail it still comes down to a single machine running a single process that does all the work…

…and does it from scratch every time a build is started. With Turbopack we are exploring towards a future where even the largest apps can compile quickly and deploy at a moment's notice.

Next.js 13!
Next 13 is built on React Server Components (RSC) from the ground up. RSC is such a game changer for the web. React components execute only on the server by default.

https://twitter.com/vercel/status/1584964835984703491

Your page has 10, 100, or 1000 components–the JavaScript size stays the same. And if you need client-side behavior for individual components, they seamlessly upgrade to run on the client–all fully integrated into a single render-tree rather than independent islands.

I’m excited about the new data fetching in Next.js based on the use hook. If you want to picture how this is different from traditional Next.js and other mainstream frameworks, then think of how we did data-fetching in PHP.

I know this sounds a little crazy but there is something magical about the composition you get from components fetching their own data, rather than routes having to supply the data for all nested components on the page or layout at the root.

Of course, PHP being non-concurrent had performance problems, but Suspense in React takes care of this by avoiding the dreaded backend request waterfalls between components.

I think we as dev-community have overcorrected from some of the PHP UI-data-mishmash. During my time at Google we worked with similar co-colocation of components & data (Known as Wiz Component to my friends at big G) & I’m excited to see this adopted by the wider React community

As an example, this just allows you to add components like <RecommendedProducts productId=”123”/>. Note, how I’m not passing in the actual data. The component knows how to get it, itself, and so the data fetching doesn’t leak to the composing component.

In old-school React you could do this by fetching the data on the client, but in Next 13 the data-fetching happens at render-time on the server with streaming.

Streaming!
With the launch of Next 13 @vercel is shipping streaming support for rendering of React Server Components (RSC) for both our edge and serverless functions.

It’s no big secret that our serverless functions are running on AWS Lambda, and, uhm, AWS Lambda does not support streaming. I’m not going to reveal how we made it work, but maybe you can guess.

Super proud of the team for getting this out of the door. For the longest time most frameworks & certainly React, just didn’t support streaming for SSR–but with RSC streaming is now actually a thing. Excited that streaming will just work when you deploy RSC to Vercel.

A new next/image!
Brought to you by the Chrome team and @vercel is the next generation of next/image. A lighter replacement for the component that is all in on #useThePlatform

- Native lazy-loading
- Native layout-shift-free aspect-ratio
- SVG-based blurry placeholder (lower CPU usage over CSS techniques)
- Easier styling with CSS

@​next/font!
Loading fonts on the web is genuinely difficult to get right. @​next/font puts all the best practices together by default and with minimal effort:

- Layout shift is eliminated through the use of the new CSS props size-adjust, ascent-override, etc.
- These properties are automatically extracted from the font files. No manual tuning created.
- Supports Google Fonts without any data going to Google

- Fonts are downloaded at build time
- All files are served from your own origin (perf++, privacy++)
- Automatic subsetting to your locale (smaller size)
- Prefers variable fonts (smaller size, easier to use)
- Automatic preloading
- Built by the Chrome team and @vercel

Finally! We’re shipping a beta of Vercel Analytics. A web-analytics product designed for the post-GDPR world.

- 0 third-party requests: Better performance, security, and privacy
…

https://twitter.com/vercel/status/1584968128915771426

- Not a pure server-side analytics solution: Can understand client-side navigation and events
- Tiny JavaScript payload (again served by your own domain, and only communicating with your domain)