csr-rsc-ssg-isr-ssr-ssrf

Этот репозиторий может служить материалом для одного или нескольких митапов. Маршрут следующий...

• «CSR» (Client Side Rendering) — рендеринг на стороне клиента: React как стандартная SPA-библиотека
• «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

Эта работа основана в основном на двух источниках:

• https://demystifying-rsc.vercel.app/
• https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

---

CSR (Client Side Rendering)

1-csr-load-data — загрузка данных в vanilla React SPA

[!IMPORTANT] CSR (Client-Side Rendering): код React доставляется в браузер, который генерирует контент, вставляемый в DOM.

демо

cd 1-csr-load-data
npm start

2-csr-router — маршрутизация в vanilla React SPA

[!IMPORTANT] После первой загрузки страницы навигация по другим страницам того же сайта использует JavaScript для повторного рендеринга частей страницы без полной перезагрузки.

демо

cd 2-csr-router
npm start

RSC (React Server Components)

3-rsc-load-data — загрузка данных в React Server Components (реализация Next.js)

[!IMPORTANT] Компоненты React, предназначенные для выполнения только на сервере, а не в браузере.

демо

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

4-rsc-router — маршрутизация в React Server Components (реализация Next.js)

[!IMPORTANT] Компоненты выполняются только на сервере. Поведение по умолчанию — статический рендеринг: компоненты выполняются на этапе сборки.

демо

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

5-SSR — SSR (Server Side Rendering)

[!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 пытается прикрепить обработчики событий к существующей разметке и взять на себя рендеринг приложения на клиенте. В приложениях, полностью построенных на React, обычно гидратируется только один „корень“, один раз при запуске всего приложения.»

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

6-pages-router-ssg (реализация Next.js)

[!IMPORTANT] SSG (Static Site Generation) с использованием pages router: код React выполняется при сборке приложения, а сгенерированный вывод статичен.

демо

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

7-pages-router-isr (реализация Next.js)

[!IMPORTANT] ISR (с использованием pages router): «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

Серверные действия

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

SSRF (исправлено в NextJS v14.1.1)

Определение SSRF

...

Почему?

• Если есть доступ к уязвимому серверу, но нет прямого доступа к целевому серверу (DMZ, FireWall...)
• Если требуется выполнять запросы, скрывая собственное происхождение
• ...

Демо 8-ssrf-14.1.0

Контекст

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

Цель

Условия эксплуатации CVE-2024-34351

• Приложение на Next.JS версии ниже 14.1.1
• Использование функции redirect с абсолютным путём. В демо: в addTodo.js — redirect(\/blog/${inputValue}`);`

Работа функции redirect