csr-rsc-ssg-isr-ssr-ssrf

Este repositório pode servir de suporte para apresentar um ou mais meetup(s). O percurso é o seguinte…

• "CSR" Client Side Rendering : React como biblioteca SPA padrão
• "RSC" React Server Components : execução de componentes React apenas no lado do servidor
• "SSG" Static Site Generation : execução de componentes React durante o build
• "ISR" Incremental Static Regeneration : regeneração de componentes sob demanda
• "SSR" Server Side Rendering : pre-rendering no lado do servidor e depois execução (hydration) no lado do cliente
• "SSRF" Server Side Request Forgery : uma falha de segurança corrigida recentemente no Next.JS

Este trabalho é baseado principalmente em duas fontes:

• 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 loading data

[!IMPORTANT] CSR (Client-Side Rendering): o código React é entregue ao navegador, que gera conteúdo que é inserido no DOM.

demonstração

cd 1-csr-load-data
npm start

2-csr-router vanilla react SPA routing

[!IMPORTANT] Após a página ser carregada pela primeira vez, navegar para outras páginas no mesmo site usa JavaScript para re-renderizar partes da página sem exigir uma atualização completa da página.

demonstração

cd 2-csr-router
npm start

RSC React Server Components

3-rsc-load-data React Server Components (Next.js impl) loading data

[!IMPORTANT] Componentes React que são escritos para executar apenas no servidor, e não no navegador.

demonstração

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

4-rsc-router React Server Components (Next.js impl) routing

[!IMPORTANT] Os componentes são executados apenas no servidor. O comportamento padrão é a renderização estática: os componentes são executados no momento da construção.

demonstração

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

5-SSR SSR Server Side Rendering

[!IMPORTANT] SSR significa pré-renderizar componentes do cliente no servidor. O código React é executado no momento em que é solicitado. O resultado pode ser armazenado em cache para requisições futuras.

Melhor prática: definir componentes 'use client'; o mais abaixo possível na árvore de componentes.

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

Hydration

[!IMPORTANT] "Em React, “hydration” é como React “anexa” ao HTML existente que já foi renderizado pelo React em um ambiente de servidor. Durante a hidratação, o React tentará anexar ouvintes de eventos à marcação existente e assumir a renderização do aplicativo no cliente. Em aplicativos totalmente construídos com React, você geralmente hidratará apenas uma “raiz”, uma vez na inicialização para todo o aplicativo."

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

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

demonstração

cd 5-ssr
npm run build
npm run start

6-pages-router-ssg (Next.js impl)

[!IMPORTANT] SSG (Static Site Generation) usando o pages router: o código React é executado quando você constrói seu aplicativo, e a saída gerada é estática.

demonstração

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

7-pages-router-isr (Next.js impl)

[!IMPORTANT] ISR (usando pages router): "O Next.js permite que você crie ou atualize páginas estáticas depois de construir seu site. A Regeneração Estática Incremental (ISR) permite que você use geração estática por página, sem precisar reconstruir o site inteiro. Com ISR, você pode manter os benefícios do estático enquanto escala para milhões de páginas."

demonstração

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

Por que ISR?

"os dados podem se tornar obsoletos no momento da requisição"

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

Server actions

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

SSRF (fixed in NextJS v14.1.1)

Definição SSRF

...

Por quê?

• Se você tem acesso a um servidor vulnerável, mas não ao servidor alvo diretamente (DMZ, Firewall...)
• Se você deseja executar requisições ocultando sua própria origem
• ...

Demonstração 8-ssrf-14.1.0

Contexto

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

Objetivo

Condições para explorar a CVE-2024-34351

• Uma aplicação baseada em Next.JS em versão inferior a 14.1.1
• O uso da função redirect, com um caminho absoluto. Na demonstração, em addTodo.js: redirect(/blog/${inputValue});