はじめに
こんにちわ、dtakkiyです!
私は、フロントエンドの開発をvue.jsをベースとするNuxt.jsからはじめました。
そして現在、React.jsをベーズとするNext.jsの開発を学んでいるのですが、
Next.jsのドキュメントを読み進めるにあたって、どうしてもNuxt.jsと比較し技術を理解しようする自分がいました。
ただプロダクトが異なるので当然のことなのですが、似ている概念があるにも関わらず、両者で使われる言葉はかなり違っています。
そこで今回は、私がドキュメントを読み進めるにあたって、特に理解が難しかったサーバサイドレンダリングに絞り、Next.jsとNuxt.jsで使用している言葉を比較表としてまとめてみました。
またSPAなどの誤解しやすい関連用語の解説もいれてみました。
なお比較表で使用した単語は、各々の公式ドキュメントの表記を利用しています。
公式ドキュメント
執筆時のバージョン
- next.js: version 10.2
- nuxt.js: version 2.14
比較表と関連用語
比較表
かなりシンプルにまとまりました。
なおNext.jsではデフォルトでStatic Generationが選択されるのに対し、Nuxt.jsではSSRが選択されます。
関連用語の解説
続いて誤解しやすい関連用語の解説をします。
rendering(レンダリング): 何らかのデータを元に表示内容を生成すること。
Pre-rendering(プレレンダリング): 事前にサーバ側でHTMLを生成すること。導入することにより、一般的にクライアント側で表示が高速化する。プレーンなReact.jsやVue.jsではプレレンダリングは行われず、クライアントでのレンダリングとなる。
SPA: Single page Applicationの略。一般的には、複数ページではなく、単一のページで構成されたwebアプリケーションのことを意味する。代表的なアプリとして、Facebookのメッセンジャーなどがある。
PWA: Progressive Web Appsの略。Webアプリでありながら、ネイティブアプリと同じ様に動作するアプリケーションのこと。プッシュ通知やオフラインでの動作など、ネイティブアプリ特有の機能を利用できる。
おわりに
いかがだったでしょうか？
読者の方のサーバサイドレンダリングの技術理解の一助になれば幸いです。