Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【初心者向け】30分でわかる『Reactサーバーコンポーネント』の仕組み
Rating: 4.8 out of 5(6 ratings)
61 students

【初心者向け】30分でわかる『Reactサーバーコンポーネント』の仕組み

「Reactサーバーコンポーネント」の仕組みがイマイチ腹落ちしていない人向けのコース。コースを終えた30分後には、「なぜそうなるの?」というReactサーバーコンポーネントの疑問がすっかり晴れて、自信をもって使えるようになります。
Created by三好 アキ
Last updated 5/2025
Japanese

What you'll learn

  • Reactサーバーコンポーネントの類似テクノロジー
  • シングルページアプリケーション、SPA、サーバーサイトレンダリング、SSR
  • Next.js、Reactについて
  • Reactサーバーコンポーネント(RSC)の基本概念と仕組み
  • クライアントコンポーネントとの違い
  • サーバーサイドレンダリング(SSR)との比較
  • Next.jsでのRSCの利用方法
  • RSCを使うメリット(パフォーマンス向上、SEO改善、セキュリティ強化など)
  • RSCのデメリットや制限事項
  • コンポーネントの分割方法と役割の分担
  • Reactの最新技術トレンドの理解
  • RSCを活用した効率的なフロントエンド開発の方法
  • 実際のコード例を通してRSCの動きを体感
  • 既存のReactアプリにRSCを導入するためのポイント
  • RSCがどのようにネットワーク負荷を軽減するか

Course content

1 section13 lectures30m total length
  • 本コースで学ぶこと1:04
  • Reactサーバーコンポーネントとクライアントコンポーネント1:21
  • Reactサーバーコンポーネント以前のテクノロジー1:04
  • シングルページ・アプリケーションのメリット/デメリット2:47
  • サーバーサイド・レンダリングのメリット/デメリット3:02
  • Reactサーバーコンポーネントの仕組み2:33
  • Reactサーバーコンポーネントの仕組み(データベース連携時)5:31
  • Reactサーバーコンポーネントのメリット1:54
  • Reactサーバーコンポーネントのデメリット2:34
  • 今後の勉強のお役立ち情報0:20
  • Reactサーバーコンポーネントをコードで確認(データ取得)5:43
  • Reactサーバーコンポーネントをコードで確認(データサイズ削減)2:27
  • 本講座終了後の学習について0:25

Requirements

  • 前提知識は特にありません

Description

Reactサーバーコンポーネント(RSC)は、Reactの最新機能の一つであり、サーバー側でコンポーネントをレンダリングすることで、パフォーマンスの向上やセキュリティの強化を実現します。


この30分の無料コースでは、RSCの基本的な仕組みや、従来のクライアントコンポーネントとの違い、Next.jsでの利用方法などを初心者向けにわかりやすく解説します。


SPA(シングルページアプリケーション)、SSR(サーバーサイドレンダリング)といった、Reactサーバーコンポーネントとの違いがわかりにくいテクノロジーの説明もするので、この短い動画を見るだけで、次のようなことが理解できるようになります。


• ハイドレーション

• マルチページアプリケーション

• MPA

• ストリーミング

• パーシャルレンダリング

• SSR

• SPA

• シングルページアプリケーション

• サーバーサイドレンダリング

•  クライアントコンポーネント

•  Next.jsのインストール方法

•  Reactサーバーコンポーネントのデータ取得方法

•  Reactサーバーコンポーネントでのデータサイズ削減


講座の終盤では、Next.jsを使って、実際にコードを書きながらReactサーバーコンポーネントの動作の確認を行います。

Who this course is for:

  • React、Next.jsのビギナー
  • Reactサーバーコンポーネントの理解を深めたい人
  • Next.jsを使っているがRSCの仕組みがよくわからない開発者
  • Reactを学んだことがあるがサーバーコンポーネントは初めての方
  • 最新のReact機能を知りたいフロントエンドエンジニア
  • Reactのパフォーマンス最適化に興味がある方
  • Reactアプリの構造を理解し直したい方
  • サーバーサイドレンダリングやレンダリング全般に関心がある方
  • 将来的にReactのスキルアップを目指している初心者
  • JavaScriptやReactの基礎は理解しているが、応用を学びたい方