Sébastien Lorber

This Week In React #91: Remix, Next.js, Server Components, Forms, React-Native, TypeScript, Monorepos...

Sébastien Lorber's photo
Sébastien Lorber
·

7 min read

This Week In React #91: Remix, Next.js, Server Components, Forms, React-Native, TypeScript, Monorepos...

Hi everyone!

If you like this newsletter, subscribe in priority at:

Lots of great React and TypeScript articles this week!

🥳️ Today is my React anniversary 😝 I'm using it for at least 8 years!

At least it's what this old StackOverflow question tells me 😂. Funny, the answerer (Paul O'Shannessy, ex React core) made me pass the technical interview for Docusaurus 6 years later 😏

Speaking about Docusaurus, we just crossed 30k stars on Github! And we published a 2021 recap. The v2.0 stable release is around the corner. That's nice to be able to speak of my own work sometimes 😏!

🙏 Support the newsletter 🙏:

React

Remix vs Next.js

We finally have an official comparison with Next.js!

First, you should know that the Remix team really appreciates the Vercel platform, despite the competition between Next.js and Remix. But they say Remix is better obviously 😏 and there are good arguments and waterfalls to prove it.

This comparison is based on a real-world e-commerce app with a Shopify API integration, on which they essentially analyze 2 pages: a landing page with fairly static content, and a very dynamic search page. All this deployed on Vercel and Fly.

A good highlight of the advantages of server rendering: sometimes it's better to render everything on the server side rather than doing a mix of the 2 (as Next.js seems to recommend): static shell, and search results fetched on the client side.

Next.js is more complex, with life-cycle functions that run everywhere (server, browser, etc.). Remix prefers to keep it simpler, just do dynamic rendering, but do it well. By relying on the browser's native functions, this also reduces the amount of JavaScript to be sent on the client side.

Very long article, not easy to summarize, read it to make up your own mind. I haven't fully understood Remix yet, and I still have some questions about error handling if the Shopify API goes down, security, architecture complexity with Redis cache, app redeployment with invalidation of the caches... In short, a lot of things that we like about the Jamstack and that we don't necessarily want to lose.

Overall it really makes me want to try Remix on a non-critical project: luckily I need to build a website for this newsletter 😏

How React server components work: an in-depth guide

Very interesting and quite technical article on how Server Components work. A lot of details that I haven't seen anywhere else so far. Explains in particular how a server-side React tree is serialized in JSON with "module references", and presents some examples of payloads for client/server communication.

Extras:

💸 Sponsors

Stream: powerful Chat & Feeds for React & React-Native

Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Flutter, Android, Angular, Compose, Unreal and iOS. It also supports Expo managed workflow.

Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

React-Native

Announcing React Native 0.67

It's not the release with the most exciting highlights 😅 This blog post mainly talks about the improvements of the release process, that should be more robust and regular.

This process is also mentioned in another post React Native - H2 2021 Recap: this is an important step for the rollout of the New Architecture. Another reminder that React-Native is not just iOS + Android 😏.

Note: we should have some updates from Microsoft about the MacOS and Windows platforms, as they are catching up with upstream releases.

From Native to React Native to Flutter:

Quite a long but very interesting article, which fairly discusses the various problems encountered with both React-Native and Flutter.

I think their conclusion would be different if they were building for other platforms than iOS + Android (web support for example), or if they had a regular need to mix native views with Flutter view. Too bad React-Native-Skia didn't exist earlier 😄, they might have liked it.

Extras:

Partners

  • Start React Native: learn everything about gestures and animations with William Candillon
  • React-Native Weekly: stay up-to-date React-Native core updates
  • TypeScript Weekly: the best TypeScript links every week, right in your inbox.
  • ES.next News: learn about the latest in JavaScript and cross-platform tools
  • Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
  • G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
  • Infinite Red: US React-Native experts making your idea a reality
  • Software Mansion: the co-creators of React Native and the technological core of many tech companies

Other

Announcing TypeScript 4.6 Beta

A great release that keeps adding useful improvements, notably on the Control Flow Analysis that can be very useful for a React dev. The official blog post does not showcase this, but I tested and this will improve a bit on React props destructuring, but unfortunately not enough to work with {...props}: maybe for the next release?

Monorepo.tools

A well-presented page that gives you good reasons to adopt the monorepo, and compares some popular tools: Lerna, Nx, Turborepo, Bazel, Lage... Published by Nwrl (behind Nx), the comparison remains fair and quite objective.

Extras:

Aucun texte alternatif pour cette image

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!

ReactReact NativeTypeScriptJavaScript