View profile

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

This Week In React #91: Remix, Next.js, Server Components, Forms, React-Native, TypeScript, Monorepos...
By Sébastien Lorber • Issue #91 • View online
Hi everyone!
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
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 😏
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 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 ReactReact-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
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.
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
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?
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:
Did you enjoy this issue?
Sébastien Lorber

📨 For React and React-Native developers ⚛️ I filter out the noise 🔊 You save time ⏱️ Stop losing your time scrolling on Twitter! 🐦

⚠️ The newsletter has moved!
➡️ Go to ThisWeekInReact.com

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue