Discover more from This Week In React
This Week In React #80: Next.js 12, Edge Functions, useMyContext, Hermes, React-Freeze, Skia, Drispy, Bun, TC39, Cloudflare...
Next.js 12 has been announced at the Next.js conference. I advise to at least watch the 30min keynote to have a nice overview of all the announcements (some of them are not covered in this blog post). A beautiful release with a lot of exciting innovations, exposing the vision: an outstanding DX with great performances by default, and the power of dynamic with the speed of static.
The new Rust compiler SWC has been enabled to replace Babel (unless you use a custom Babel config), and improves significantly build/refresh times, particularly on large projects. Unlike esbuild, SWC is more modular and aims to expose a plugin API in the future. However we'll need to wait a bit until all our favorite Babel plugins are ported to Rust/SWC. The Next.js team plans to work first on support for Styled-Components, Emotion and Relay.
A new middleware system permits to support many use-cases: redirects, analytics, auth, feature flags, AB-testing... This is built on a new Edge Functions infrastructure (details below).
Experimental support for React 18 features
React.lazy server-side, streaming SSR (with the new Edge Functions infra), and React server components, that I didn't expect so soon 😍. They also work on a
<Data> component (similar to
<Suspense>) and a per-component caching system.
I totally agree with this article proposing to add an extra abstraction layer on top of React context, with
<MyContextProvider> . There are a lot of reasons to introduce a bit more indirection, and this article presents good examples to motivate you to do so.
🎥 Next.js conf 2021: the complete Youtube playlist. The 30min keynote is a good summary of the announcements, but there are a lot of other interesting talks (can't watch all 😅)
🎥 Next.js 12 is a Beast: Fireship's 5min video, good TLDR of all the announcements if you don't have time!
How to Use Next.js Middleware: a great interactive article presenting example usages of the new Next.js middelware system, including some funny examples like selecting the user theme according to current user sunlight
Building an effective Image Component: the Google Aurora team explains some design decisions behind the Next.js Image component, to nudge users to adopt best practices
Use Next.js 12 on Netlify: Netlify already supports the new middleware system, using its own Edge infrastructure
Next.js Stories RFC: an interesting RFC proposing to integrate Next.js with Storybook, with an interesting feature to generate stories automatically.
When using a stack navigation, screens are stacking on top of each others. But if screens consumes shared state (with Context, Redux...), it is likely that React re-render invisible screens, and updates for the screen at the top of the stack are delayed.
React-Freeze is an experimental library by Software Mansion, permitting to temporarily freeze invisible screens to avoid useless work and ensure updates of the top-level screens are done as soon as possible. This is now included in React-Native-Screens (and thus React-Navigation), and can be enabled very easily.
🧵 Rick Hanlon explains that in the futur React could natively deprioritize updates for invisible screens and components (not only stack, but also ScrollView...).
Demos Remotion + Skia: William Candillon tweeted 3 new demos of his Skia renderer working on the web through Remotion. We can deduce this renderer will have a cross-platform abstraction, enabling to render everywhere Skia is supported.
Dripsy v3: Fernando Rojo announced a new version of his lib aiming to simplify cross-platform development with React-Native (unstyled responsive UI primitives). Greatly improved TypeScript autocomplete experience. He also presented a talk about that at the Next.js conf .
Vercel is now proposing Edge Functions to complete its existing serverless offer. Those Edge Functions are based on Cloudflare Workers, using V8 isolates running at the edge, close to the users, supporting streaming, without cold boot latency. This is different from their existing Serverless Functions offer (based on AWS Lambdas and Node.js).
To sum up: Vercel builds better DX on top of Cloudflare Workers, in the same way they did with AWS. This article is a good explanation to understand the differences between the 2 function types they now offer: Vercel Serverless Functions vs Cloudflare Workers.
Note that unlike Vercel, Netlify built its own infrastructure for its Edge Handlers. 🧵 A Netlify dev comments the Vercel + Cloudflare Workers integration.
Custom Headers for Cloudflare Pages: Cloudflare Pages now uses
_headersfile like Netlify. I don't know if there's a 100% compatibility, but this look interesting to improve portability across modern cloud providers, and would be great if this became a standard.
"I want Bun": the passphrase to type if you want early access to the new trending bundler/toolchain written in Zig, with some inspirations from esbuild. Not production-ready but benchmarks looks great.
Type | Treat 2021: Orta published some spooky TypeScript code challenges for Halloween