csr-rsc-ssg-isr-ssr-ssrf

このリポジトリは、1つまたは複数のミートアップを発表するためのサポートとして使用できます。流れは次のとおりです...

"CSR" Client Side Rendering : 標準的なSPAライブラリとしてのReact
"RSC" React Server Components : Reactコンポーネントを_サーバー側でのみ_実行
"SSG" Static Site Generation : _ビルド_中にReactコンポーネントを実行
"ISR" Incremental Static Regeneration : オンデマンドでのコンポーネントの再生成
"SSR" Server Side Rendering : サーバー側での_プリレンダリング_、続いてクライアント側での実行（ハイドレーション）
"SSRF" Server Side Request Forgery : Next.JSで最近修正されたセキュリティの脆弱性

この作業は主に2つのソースに基づいています：

mind map

CSR クライアントサイドレンダリング

`1-csr-load-data` vanilla react SPA データ読み込み

mind map CSR

[!IMPORTANT] CSR（クライアントサイドレンダリング）：Reactコードがブラウザに配信され、DOMに挿入されるコンテンツを生成します。

client side rendering loading data

デモ

cd 1-csr-load-data
npm start

CSR load data gif

`2-csr-router` vanilla react SPA ルーティング

[!IMPORTANT] ページが最初に読み込まれた後、同じWebサイト内の他のページへの移動では、JavaScriptを使用してページの一部を再レンダリングするため、ページ全体のリロードは必要ありません。

デモ

cd 2-csr-router
npm start

client side rendering routing

RSC React Server Components

`3-rsc-load-data` React Server Components（Next.js実装）データ読み込み

mind map CSR

[!IMPORTANT] ブラウザではなく、サーバー上でのみ実行されるように書かれたReactコンポーネント。

React Server Components loading data

デモ

cd 3-rsc-load-data
npm run build
npm run start

client side rendering routing

`4-rsc-router` React Server Components（Next.js実装）ルーティング

mind map CSR

[!IMPORTANT] コンポーネントはサーバー上でのみ実行されます。デフォルトの動作は静的レンダリングです。つまり、コンポーネントはビルド時に実行されます。

デモ

cd 4-rsc-router
npm run build
npm run start

React server components routing

`5-SSR` SSR サーバーサイドレンダリング

mind map SSR

[!IMPORTANT] SSRは、クライアントコンポーネントをサーバー上で事前レンダリングすることを意味します。Reactコードはリクエストされた時点で実行されます。結果は将来のリクエストのためにキャッシュされる場合があります。

ベストプラクティス：'use client';コンポーネントは、コンポーネントツリーのできるだけ下の方で定義します。

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree

ハイドレーション

[!IMPORTANT] Reactにおいて、「ハイドレーション」とは、Reactがサーバー環境でレンダリング済みの既存のHTMLに「アタッチ」する仕組みのことです。ハイドレーション中、Reactは既存のマークアップにイベントリスナーをアタッチし、クライアント上でのアプリのレンダリングを引き継ごうとします。Reactで完全に構築されたアプリでは、通常、起動時にアプリ全体に対して1つの「ルート」を1回だけハイドレーションします。

https://react.dev/reference/react-dom/client/hydrateRoot

https://www.gatsbyjs.com/docs/conceptual/partial-hydration/

デモ

cd 5-ssr
npm run build
npm run start

SSR

`6-pages-router-ssg` (Next.js 実装)

mind map page router SSG

[!IMPORTANT] pagesルーターを使用したSSG（静的サイト生成）：アプリケーションのビルド時にReactコードが実行され、生成された出力は静的です。

デモ

cd 6-pages-router-ssg
npm run build
npm run start

`7-pages-router-isr` (Next.js 実装)

mind map page router ISR

[!IMPORTANT] ISR（pagesルーター使用）：「Next.jsでは、サイトをビルドした後に静的ページを作成または更新できます。インクリメンタル静的再生成（ISR）により、サイト全体を再ビルドすることなく、ページ単位で静的生成を使用できます。ISRを使用すると、静的生成の利点を維持しながら、数百万ページにスケールできます。」

デモ

cd 7-pages-router-isr
npm run build
npm run start

なぜISRなのか？

「リクエスト時にデータが古くなる可能性がある」

https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation

Server actions

https://react.dev/reference/rsc/server-actions

SSRF（NextJS v14.1.1で修正済み）

SSRFの定義

...

なぜ？

脆弱なサーバーにはアクセスできるが、ターゲットサーバーには直接アクセスできない場合（DMZ、ファイアウォールなど）
自分の発信元を隠してリクエストを実行したい場合
...

デモ `8-ssrf-14.1.0`

コンテキスト

SSRF A

https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

目的

SSRF B, objectif

CVE-2024-34351 を悪用するための条件

14.1.1 より前のバージョンのNext.JSベースのアプリケーション
絶対パスを指定したredirect関数の使用。デモでは、addTodo.js内で：redirect(/blog/${inputValue});

redirect 関数の動作

出典：https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

Next.JSのredirect関数は、ブラウザにHTTP 302レスポンスを返しません。

Next.JSはサーバー側でリクエストを実行し、その結果をブラウザに返します：

リクエストを実行するには、Next.JSが呼び出すURLを構築する必要があります。デモでは、addTodo.js内で： redirect('/blog/123');関数はURL http://207.154.209.99/blog/123 を構築します。このURLを構築するために、Next.JSは初期リクエストのHTTPヘッダーからホスト 207.154.209.99 を取得します。
Next.JSは最初にHTTP HEADでURLをリクエストします。
レスポンスが Content-Type: text/x-component ヘッダーを返した場合、Next.JSはHTTP GETでURLをリクエストします。

SSRF C, intro

悪用

ターゲットサーバーに対するSSRFを実現するには、別のサーバーを実行する必要があります：

すべてのルート（クエリパス）でリッスンする
すべてのHEADリクエストに対して、Content-Type: text/x-component ヘッダー付きのHTTP 200を返す
すべてのGETリクエストに対して、ターゲットサーバーへのHTTP 302を返す

SSRF D, exploit

CSR load data gif

`8-ssrf-14.1.0` の脆弱性の修正

解決策1（恒久的ではない）：ホストを強制するためのnginx設定

/etc/nginx/sites-available/nextjs 内

変更前：

server {
  listen 80 default_server;
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

変更後：

server {
  listen 80;
  server_name 207.154.209.99;
  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host 207.154.209.99;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

副作用のリスク...

https://nginxtutorials.com/nginx-proxy_set_header-directive/

解決策2：Next.jsのアップデート

https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g

メモ

"Extra attributes from the server"

https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops

create-next-app

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-4-migrating-pages

appディレクトリ内のページはデフォルトでServer Componentsです。これは、ページがClient Componentsであるpagesディレクトリとは異なります。

Next.js 13へのアップグレードで、新しいApp Routerを使用する必要はありません。両方のディレクトリで動作する新機能を使用して、pagesを引き続き使用できます。

パフォーマンス

さまざまなソリューションの読み込みパフォーマンスを比較したい場合は、Core Web Vitalsのメトリクスを console.log で追加できます。

https://web.dev/articles/fcp?hl=fr

その他のソース / 参考

https://rsc-parser.vercel.app/

https://stackoverflow.com/questions/76325862/what-is-the-difference-between-react-server-components-rsc-and-server-side-ren

https://github.com/reactjs/server-components-demo?tab=readme-ov-file#should-i-use-this-demo-for-benchmarks

https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#does-this-replace-ssr

https://www.youtube.com/watch?v=jEJEFAc8tSI

AppルーターでのISR？

https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration

Next.js App Routerでは、フェッチされたすべてのデータはデフォルトで静的になり、ビルド時にレンダリングされます。ただし、これは簡単に変更できます。Next.jsはfetchオプションオブジェクトを拡張して、キャッシュと再検証ルールに柔軟性を提供します。{next: {revalidate: number}} オプションを使用すると、設定した間隔で、またはバックエンドの変更時に静的データを更新でき（インクリメンタル静的再生成）、動的データ（サーバーサイドレンダリング）にはfetchリクエストで {cache: 'no-store'} オプションを渡すことができます。

https://www.telerik.com/blogs/current-state-react-server-components-guide-perplexed

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components

https://github.com/reactjs/server-components-demo

https://dev.to/vteacher/let-s-make-a-web-application-with-react-server-components-5dmg

https://react.dev/blog/2024/04/25/react-19

https://react.dev/reference/rsc/server-components

https://www.youtube.com/watch?v=ePAPd9qzGyM

https://www.joshwcomeau.com/react/server-components/

https://nextjs.org/docs/app/building-your-application/rendering/server-components#server-rendering-strategies

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

https://react.dev/reference/rsc/server-components#server-components-without-a-server