deve.K

エンジニアが未来を切り開く。

Next.jsのデメリット【欠点】を理解する

Next.jsの欠点を理解する

Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。

決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。

本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。

Next.jsとは

Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。

Next.jsの最初の作成者は、VercelのCEOである Guillermo Rauch氏でした。

Next.jsのサーバーレスアプローチにより、Vercelを使用してWebサイトおよびアプリをデプロイできるため、ホスティングコストが大幅に削減され、パフォーマンスとサイトの読み込み速度が向上します。

Next.jsの優れた点の1つは、アプリケーションの展開段階と運用段階の両方に機能を提供することです。

静的Webサイトは、Webと同じくらい古いものです。

しかし、JavaScriptの台頭によって、静的サイトは市場でより動的になりました。

ビルド時のWebサイトまたはアプリのレンダリングは、静的な生成です。

その結果、HTMLやCSSファイル自体とJavaScriptなどのアセットを含む静的ファイルのコレクションが作成されます。

私たち開発者が知っているように、JavaScriptベースのWebアプリは、実行時にブラウザでReactやスクリプトなどのライブラリを実行することによって機能します。

静的生成では、Next.jsなどのテクノロジーを使用して、ブラウザでの表示と同様のページをコンパイル時にレンダリングし、それにより初期ロード時にコンテンツ全体を提供できます。

Next.jsは、最も人気のある静的サイトジェネレーターの1つにもなりました。

NetflixUberStarbucks、およびTwitchは、Next.jsを使用する世界最大かつ最も有名な企業のほんの一部です。

高速でSEOに適したWebサイトおよびアプリケーション(Jamstack Webサイト含む)を構築するための現在最高のフレームワークの1 つです。

Node.jsBabelに基づいて、Next.jsはReact.jsと統合してSPA開発を行い、Reactコンポーネントのサーバー側レンダリング (SSR)または静的生成(SSG)ソリューションを提供します。

Next.jsは『バックエンドですか??』と聞かれる時がありますが、これは場合によります。

Next.jsは、フロントエンドのReactとバックエンドコードRestMongoDBnodeReactの両方をサポートするフルスタックと見なすことができます。

アプリのクライアント側Viewのフロントエンドおよびサーバー側機能のバックエンド両方として機能します。

Next.jsを使用すると、サーバー側のレンダリングを使用してコンテンツをサーバーに事前に保存するReactアプリを構築できます。

事前にレンダリングされたHTMLページと完全にインタラクティブなWebサイトまたはアプリと対話します。

このアプローチにより、訪問者はインタラクティブなサイトを3秒以内に見ることができます。

このパフォーマンス結果は、ReactのCreate-React-AppアプリでのCSRとして全ページ読み込みのLighthouseの結果で比較すると分かります。

Next.jsでSSRアプリケーションでの全ページ読み込みのLighthouseでの結果では、0.8秒です。

一方でReact単体でのアプリ作成では、6.5秒です。

この結果によって、SSRCSRよりも高速にHTMLをブラウザに提供します。

Google First Meaningful Paintのドキュメントによると、この指標は『ユーザーがページの主要なコンテンツが表示されていると感じる時間を識別します』と記述されています。

Lighthouseは、これらの違いを視覚化するのにも役立ちますので是非ご自身で確認してみて下さい。

Reactを使用している開発者にとって、自然な次のステップはNext.jsです。

Next.jsを学ぶべき理由の、その主な理由はNext.jsが Reactの上で開発されているという事実です。

これには、Reactで発生する問題を解決する多くのネイティブ機能があるためです。

Next.jsは急速に開発されてます、多くの機能が追加されており、それによりNext.jsは優れたフレームワークですが、開発に関してはいくつかの欠点があります。

Next.jsは完璧なフレームワークではありません。

Next.jsの短所

Next.jsは大規模なサイトやアプリの場合ではビルド時間が長い事です。

開発者は、Next.jsがサイトをビルドするのに時間がかかり、いくつかの回避策がある一方で、一部のユーザーを思いとどまらせる可能性があると不満を漏らしております。

また、基本的な知識がないままNext.jsに入ると、必要が生じたときにフレームワークを変更する機会がなく、閉じ込められる可能性があります。

コミニュティサポート問題もございます。

開発者コミュニティは、Reactに比べて小規模です。

ですが、Next.jsの経験がある開発者が少ないと言う事は、Next.js開発者の必要性が高まっており、開発業界で際立った存在になりたいと考えている開発者にとってチャンスが訪れている事にもなります。

Next.jsではプラグインが少ないのも問題の1つです。

例えば、Bootstrapやその他のDOM操作をサポートするライブラリなどの一部のJavaScriptプラグインおよびライブラリは、クライアント側でのみ実行するように設計されており、開発者はクライアント側およびサーバー側の検証を処理して、いつインポートして使用するかを決定するための追加の労力を必要とします。

Gatsby.jsと比較すると、適応しやすいプラグインの多くは使用できません。

技術的な短所

ルーティングに関して大規模なアプリ開発では、Next.jsはあまり柔軟ではありません。

デフォルトのアプローチはページベースで、これらのページをサーバー側、クライアント側、または静的のいずれかで生成するかを指定できます。

これは単純で小規模なアプリケーションには適しているので柔軟性があると言えますが、より複雑で大規模なものが必要な場合は、さらに多くのコードを記述してNode.jsサーバーを利用する必要があります。

つまり、Next.jsがファイルルーターのみを使用するように制限されていることを考慮すると、ルートでの動作方法を変更することはできません。

動的ルートを使用するためにNode.jsサーバーが常に必要です。

現在、Next.jsは、高速な応答時間、効果的なコード分割、サーバーサイドレンダリングなどを提供します。

これらすべての優れた機能は、すべての要求に応答するNode.jsサーバーの助けを借りて提供されているためです。

Reactとは異なり、Next.jsは動的ルーティングを容易にサポートしておらず、セットアップが複雑になる可能性がございます。

独自のルーター以外のルーターを使用する場合または Reduxを追加する場合では多用途ではないことがわかります。

そして、動的ルートを作成するための専門的知識を持っている必要もあります。

ですが、これらの問題は現在、日々取り組んでくれており徐々に修正されてきております。

ルーティングに関しては、将来性を考えると頭を悩ます程の問題ではなくなると思っております。

SSRでの欠点もございます。

サーバー側のレンダリングは、JavaScriptのWebサイトデフォルトではないため、コストがかかり、リソースを大量に消費します。

したがってサーバー側では、ユーザーとボットのためにコンテンツをレンダリングするという完全な負担を負います。

サーバー側のレンダリングでは、静的サイトの生成に理想的ですが、頻繁なサーバーリクエストとページ全体のリロードによって、追加の複雑なアプリケーションでのページレンダリングが遅くなる可能性がございます。

Next.jsは意見が分かれます。

開発者として、独自の方法で行っていく必要があります、これは一長一短でありどちらも含まれる可能性があります。

アプリケーションの作成方法に制限があり、回避策を余儀なくされる可能性があります。

プロジェクトにNext.jsは必要か?

この質問に対する答えは、もちろん場合によるが正解となります。

一部のプロジェクト要件では2022年には、ほとんどのアプリケーションにとって最適なフロントエンドフレームワークであると言えます。

しかし、Vue、React、WordPress、Laravel、およびその他の優れたテクノロジーを使用する場合があります。

おそらく、どのフレームワークを使用するかはすでにわかっていると思いますが、まだ急いで決定を下すことはせず、それらのユースケースを確認して、決断できるようにしてください。

最終的にはプロジェクトのニーズに依存します。

コーディング言語とフレームワークは万能ではありません。

最後に

Next.jsには、多くの素晴らしい機能がありますが、考慮すべき欠点もございます。

ですが、GitHubコミニュティチームが問題の修正に非常に積極的に取り組んでいるため、短所は日々少なくなっています。

それは、主な短所であるルーティングの問題とビルド時間の解決に取り組んでくれています。

Next.js 10以降では、起動時間を最大24%改善し、処理時間をさらに40%削減してくれました。

そこからNext.js 11では、起動時間をさらに短縮するための別の最適化が含まれています。

それだけではなく、画像の改善、スクリプトの最適化など、Next.jsを最新の状態に保つだけで、これらの驚くべき速度の改善が得られます。

Next.jsは依然としてReactに基づいています、Reactを改良しており、非常に高速なWebアプリとSPAを構築できます。

SSRおよびSSG機能は読み込み時間を短縮し、確実なパフォーマンスとSEOの向上を実現します。

ただし、Next.jsを選択した場合は、アプリをサーバーでホストする必要があり、インフラのサイズと複雑さが増すことに注意してください。

最終的に重要な事は、自分にとって意味のあるときにツールを使用することです。

ですが、選択は完全にあなた次第であり、あなたの目標と構築しているプロジェクトによって異なります。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー