Open6

App Router, RSCなど

tttoltttol

Server Side Rendering(SSR)とClient Side Rendering(CSR)

  • SSR
    • サーバーサイドでHTMLをレンダリングする
    • メリット
      • HTMLをサーバーで構築するのでクライアントに負荷がかからない。ページにアクセスしたのに数秒真っ白な画面が続く、とかがなくなる（CSRにはこの問題があった）
      • SEO的に有利（要調査）
    • デメリット
      • サーバーが必要
  • CSR
    • クライアントサイドでHTMLをレンダリングする
    • メリット
      • ブラウザ側でリッチな操作が可能。ユーザーのクリック操作に応じて画面を動的に変化させるなど。
    • デメリット
      • クライアント側の負荷が高い。重いページなどを読み込むときなど。
tttoltttol

App Router

  • Next.js v13.4で追加された新しいルーティング方式
  • app/配下にファイル・ディレクトリを配置していきながらアプリケーションを構築する
  • 例
    • app/page.tsxを作成→http://localhost:3000/にページが表示される
    • app/sample/page.tsxを作成→http://localhost:3000/sampleにページが表示される
  • App Routerは、全てのコンポーネントにデフォルトでSC(Server Component)が採用される
  • App Routerができる前はPage Routerが利用されていた
  • Page Routerはpages/配下にファイル・ディレクトリを構築していく