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:
-
What is a react component, anyways?: interesting thoughts on what exactly is a React component. Not so easy to describe, even for the official docs. Suggest 4 definitions, one of them is “unite of update”.
-
Mastering the art of forms in React: Kolby believes that using controlled inputs shouldn’t be automatic, and recommends React-Hook-Form + Zod for advanced needs.
-
Sneak peek into React 18 useDeferredValue hook: permits to de-prioritize some rendering work in React, allowing urgent updates to be faster
-
Exploring React 18’s three new APIs: useId, useSyncExternalStore, useInsertionEffect
-
How Redux DevTools broke Jira for 14 hours: funny post-mortem, not so related to React
-
Vercel Platforms Starter Kit: Vercel published a template based on Next.js for those that want to create platforms (multi-tenant, one domain per tenant). Gives some examples like the Hashnode blogging platform.
-
Blitz pivot is confirmed: the meta-framework will be transformed into Blitz Toolkit, a framework-agnostic toolkit that should work nicely on top of others (Next.js first). For the “zero abstraction data layer”, a collaboration with tRPC may be possible.
- Custom Elements + React: Dan Abramov asks again for community feedback
- Storybook Addon Next
-
Remix Conf: 24-25th May
- 🐦 Daishi Kato explains how these libs work: Zustand, Jotai, Valtio
- 🐦 Props drilling: context is not the only option
- 🎥 Remix Singles: new series of videos about Remix
- 🧵 Amazon dev: “SSR React wasn’t fast enough for us.”: an Amazon employee explains how they optimized the site. Not a lot of details about React unfortunately.
- Deep dive into the new Suspense Server-side Rendering
-
Type-safe routing in React with
fp-ts-routing (part 1)
Tweet
Share