QwikというJSフレームワークを見つけた

こんな記事が流れてきた

こんな記事が流れてきたのを見つけた。

React and Next.js is DEAD — Something New is (Finally) Replacing It (For Good)

Is this the beginning of the next revolution for JavaScript Framework? Apparently, YES!

javascript.plainenglish.io

ざっくりいうと、QwikというJSフレームワークが出てきたので、ReactとNext.jsは最終的に置き換えられる、という話。

Framework reimagined for the edge! 📚 Qwik Documentation

No hydration, auto lazy-loading, edge-optimized, and fun 🎉!

qwik.dev

ReactとNext.jsでハイドレーションが問題になる話はよく聞くし、初期ロード遅いなあ、というのは僕も気になっているし、JSファーストで、DOMを常に仮想的に管理するのはなんか違和感あるんだよなあ、とも思っていた。その辺の問題を解決してHTMLファーストになってるのが初期描画が早い。

動かしてみた

とりあえず動かしてみるかーと思って動かしてみた。

HTMLファーストなのでハイドレーションなしで描画できるから初期ロードが高速になる とのことだが、「Reactの資産使えないとキツくない？」と思いつつ触ってみたら、こんな感じでReactやMUIをインテグレーションできるらしくて、「なるほど？」となった。まだ事例少なくてアレだけど、数年後には使えるものなのかもしれない

/** @jsxImportSource react */

import { qwikify$ } from '@builder.io/qwik-react';
import { Button } from '@mui/material';

// qwikify$() takes a react component and returns
// a Qwik component that delivers zero JS
export const MUIButton = qwikify$(() => {
  return (
    <>
      <Button>Hello from React</Button>
    </>
  );
});