Next.js をマスターする: 試行錯誤を経て SSG から SSR に至る私の旅

皆さん、こんにちは！このブログでは、私がかなりの時間をかけて取り組んできた次の新しいプロジェクトを皆さんと共有したいと思います。 MERN スタックを使い始めたときのことを思い出します。当時は自分が作成したすべてのプロジェクトで苦労していましたが、すべての困難を経験した後でも、いくつかのトピックで行き詰まると、今でも少し怖がると言えます。 。

SSG と SSR の違いについて皆さんと共有したいと思います。
私はブログ サイトを作成するマイナー プロジェクトを行っており、ビルド時にブログを生成したいと思っていましたが、生成されず、違いについて学びながら 1 週間インターネットで検索しさまよった後、ようやく違いが何であるかを理解しました。

導入

Next.js は、vercel によって開発された強力な React フレームワークです。開発とユーザーエクスペリエンスを強化するためのいくつかの組み込み機能があります。
機能の一部は次のとおりです:

• ハイブリッド静的レンダリングとサーバー レンダリング: SSR と SSG の両方をサポートしているため、開発者はユースケースに応じて最適なものを選択できます。
• API ルート: nextjs アプリ自体に API エンドポイントを構築できるため、単純な API タスク用に別のバックエンド サービスが必要なくなります。
• 自動コード分割と最適化: コードを分割し、必要な Javasript のみをブラウザに送信し、画像の最適化、ビルドの高速化など、多くの最適化機能が組み込まれています。
• ファイル システム ルーティング: ファイル システム ルーティング (アプリまたはページ ルーターを使用しているもの) があり、ルートが自動的に作成されます。
• TypeScript のサポート: TypeScript は実行時のみに多くのエラーを検出するため、TypeScript でコーディングすることをお勧めします。TypeScript を使用しないとビルド時に問題が発生する可能性があります。

SSG VS SSR

サーバー側生成 (SSG)

SSG はビルド時に静的 HTML ページを生成します。コンテンツは事前にレンダリングされるため、サイトを再構築するまで変更されません。
あまり頻繁に変更されないマーケティング ページやドキュメントなど、あまり頻繁に変更されないページに最適です。
これは基本的にビルド時に生成され、静的であるため非常に速く読み込まれます。

ビルド時にレンダリングしたい動的パスを取得するには、getStaticParams を使用します。詳細については、こちらをご覧ください。リンク

サーバーサイドレンダリング(SSR)

SSR はリクエストごとに HTML ページを生成します。サーバーは、受信リクエストごとに HTML を動的にレンダリングします。これは、リクエストごとに動的で最新である必要があるページに最適です。これには、ユーザー ダッシュボード、ニュース フィード、および頻繁に変更されるコンテンツやユーザー固有のその他のコンテンツが含まれます。
HTML はリクエストごとに生成されるため、SSG よりも遅くなりますが、コンテンツが常に新鮮で最新であることが保証されます。

最終的な考え

Next.js、SSG、SSR を使った私の旅は、学習の機会に満ちていました。それぞれの間違いや課題によって理解が深まり、問題解決スキルが向上しました。プロジェクトで SSG と SSR の両方を試して、ニーズに最もよく応える方法を確認することをお勧めします。

読んでいただきありがとうございます!私の経験があなたの Next.js の旅に役立つことを願っています。あなた自身の経験を共有したり、以下のコメント欄で質問したりしてください。コミュニティとして一緒に学び、成長し続けましょう。コーディングを楽しんでください!

以上がNext.js をマスターする: 試行錯誤を経て SSG から SSR に至る私の旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。