Learned Basics of Next.js

Next.jsの基本を一通り学習してみました。サイトはこちら。サイトは英語ですが、重要な概念をクイズを通して実践できて、非Web系の私にとっても分かりやすかったです。

React on SSRと聞いたときの第一印象は「Reactを使いながらHTMLも返せるから、検索エンジンにとって親切なのかな」という程度の認識でした。しかし実際に触ってみると、従来のwebアプリ開発手法を完全に置き換えられるのではないかと驚きました。

サーバーサイドReactが面白いのは、JSXで記述したDOMをサーバー側だけでなく、クライアント側でも利用できる点です。サーバーサイドVueであるNuxt.jsも多分同じだと思います)。例えば、二つのエンドポイント/A/BのページをJSXで記述したとします。このとき、Next.jsの<Link>タグ(コンポーネント)を使うことで、ユーザは/Aから/BへSPAのように遷移することができます。仮に後者の機能を一切使わなかったとしても、テンプレートエンジンと同等のことが実現できていますから、サーバーサイドReactは従来のwebアプリのフロントエンドよりも優位性があるように思います。

欠点は、おそらくフレームワークの難易度でしょう。例えば/BにURIで直接アクセスした場合と/BにSPA的にアクセスした場合で結果が異なることがあるので、そのあたりをうまく作らなければなりません。サーバ側とクライアント側の二重開発をうまく書くノウハウがないと、いろいろ苦労しそうです。また、個人開発なら良くても、集団開発するときにどのような問題が起こるかは予想できません。

ただ、従来通り、まずはバックエンドのサーバでリクエストを処理をして、その結果をNext.jsに渡すこともできるみたいなので、React.js/JSXをテンプレートエンジン代わりに気軽に使っていけそうな予感がしています。難しいフレームワークですが、もう少しとっついてみようと思います。