Skip to main content

📨 #121: Next.js, experimental_cache, CSS-in-JS, Qwikify, Typesafety, 3D, Vitest Preview, Outstatic, Remix, React-Native...

· 8 min read
Sébastien Lorber
Sébastien Lorber
Newsletter Editor - Docusaurus maintainer

Hi everyone!

Last week I made a mistake, I sent out the 220 edition instead of 120 😅 No one noticed, probably not a big deal!

It's the conference season: the ViteConf replay is available, React Advanced just finished, and more to come.

The Next.js conference starts in a few hours. We'll probably get a Next.js 13 announcement, along with nested layouts, and some other super cool stuff that starts with Turbo 🤭. Let's discuss that next week.

We also have all the hosts agreeing to improve their Next.js support at the same time: Netlify, Cloudflare, Microsoft...

Don't miss William Candillon's React-Native video season 5 which starts today!

I recorded a podcast episode about Docusaurus 2.0 with PodRocket last month. Totally forgot to mention it 😅 I want to do more podcast episodes in the future, so please invite me! 😉

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

Don't miss the next email!

    💸 Sponsor​

    Sizzy - the browser for developers

    How come professionals in every other industry have specialized tools, but web developers are still stuck using the browser that their grandma is using for shopping on Amazon?

    If you're opening localhost:3000 in any other browser except Sizzy, you're wasting hours of your precious time.

    Before Sizzy: web development is stressing you out, responsive design is hard, you have an overwhelming amount of opened tabs and apps.

    After Sizzy: all the tools you need are in one place, responsive design is a breeze, no more context switching.

    You can download it here and try it for free for 14 days!

    ⚛️ React​

    Why We're Breaking Up with CSS-in-JS

    Sam is a maintainer of Emotion, one of the most popular CSS-in-JS libs. He explains the advantages and disadvantages of CSS-in-JS, with a focus on runtime libraries problems. For his company Spot, the cost of serializing styles was too high. They replaced Emotion by Sass modules (CSS modules + Sass) with a CSS utility system. On Docusaurus, we use CSS modules and I confirm that it is a good no-runtime and relatively simple alternative. DX is not as good but still quite acceptable.

    This article has started many interesting discussions. It has been known for a while that CSS-in-JS libraries with runtime cause performance problems. Dan Abramov confirms and does not want to use any runtime on the new React doc site. Ryan Florence mentions performance problems with Chakra, which uses Emotion.

    Tailwind remains a good alternative. For me, it can be put in the CSS-in-JS no-runtime category, especially in a React context where Tailwind styling is done via JSX. Some question its maintainability, but in practice it works quite well.

    Qwik React

    Qwik is an innovative SPA framework that avoids performance issues related to client-side hydration. It can now integrate with React through a qwikify$() function to wrap any existing React component. client: directives (inspired by Astro) allow to control when the React component will be hydrated with a lot of granularity. The demo integrates Material UI in a Qwik app. See also this video. I think it's a good solution to avoid doing an all-in on this new framework, and try it gradually. We can also keep the cross-platform properties of React, while adopting Qwik to improve performance on the web.

    Fully Typed Web Apps

    Kent C. Dodds explains the interest of having end to end type-safety, from the DB to the UI, through the different boundaries: network, localstorage, DB... He talks about validation (schema, type guards), type generation (Prisma) and conventions (Remix). He explains how this experience is possible with Remix, thanks to inference: it is better to use typeof than as.

    Building an interactive WebGL experience in Next.js

    Vercel explains how they created an impressive immersive signup experience for the Next.js conf, based on React-Three-Fiber. It's still complex to understand without 3D / WebGL / Three.js experience, but the deconstruction in successive steps is interesting and gives an insight into the mindset of doing creative dev.

    Don't miss the next email!

      💸 Sponsor​

      Sunsama - How 1000s of software engineers stay productive without burning out

      How 1000s of software engineers stay productive without burning out

      You know that the output of your work matters more than the number of hours you put in. Sunsama has been the insider secret of 1000s of developers who use it to work less but achieve more.

      Eliminate endless tab-switching with their JIRA, Github, and Notion integration. Timebox your day and create space for your hobbies and side-projects.

      The best part? They're offering a 14-day free trial (no card needed) so you can start achieving more, today.

      📱 React-Native​

      🧑‍💻 Jobs​

      🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

      Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

      🧑‍💼 G2i - 100% Remote React Native Jobs

      We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

      💡 How to publish an offer?

      🔀 Other​

      🤭 Fun​

      Meme - VSCode running on iWatch


      Don't miss the next email!