csr-rsc-ssg-isr-ssr-ssrf

यह रिपॉजिटरी किसी एक या अधिक meetup(s) को प्रस्तुत करने के लिए सहायक सामग्री के रूप में काम कर सकती है। क्रम इस प्रकार है...

"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 में हाल ही में ठीक की गई एक सुरक्षा कमजोरी

यह कार्य मुख्य रूप से दो स्रोतों पर आधारित है:

mind map

CSR Client Side Rendering

`1-csr-load-data` vanilla react SPA loading data

mind map CSR

[!IMPORTANT] CSR (Client-Side Rendering): 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] पहली बार पेज लोड होने के बाद, उसी वेबसाइट पर अन्य पेजों पर नेविगेट करने के लिए JavaScript का उपयोग करके पेज के कुछ भागों को पुनः रेंडर किया जाता है, बिना पूर्ण पेज रिफ्रेश की आवश्यकता के।

डेमो

cd 2-csr-router
npm start

client side rendering routing

RSC React Server Components

`3-rsc-load-data` React Server Components (Next.js impl) डेटा लोड करना

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 impl) रूटिंग

mind map CSR

[!IMPORTANT] कम्पोनेंट केवल सर्वर पर निष्पादित होते हैं। डिफ़ॉल्ट व्यवहार स्थैतिक रेंडरिंग है: कम्पोनेंट बिल्ड समय पर निष्पादित होते हैं।

डेमो

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

React server components routing

`5-SSR` SSR Server Side Rendering

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 मौजूदा मार्कअप पर इवेंट लिसनर जोड़ने और क्लाइंट पर ऐप को रेंडर करने का प्रयास करेगा। पूरी तरह से 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

SSR

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

mind map page router SSG

[!IMPORTANT] SSG (Static Site Generation) पेजेज़ राउटर का उपयोग करके: React कोड तब चलता है जब आप अपना एप्लिकेशन बनाते हैं, और उत्पन्न आउटपुट स्थैतिक होता है।

डेमो

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

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

mind map page router ISR

[!IMPORTANT] ISR (पेजेज़ राउटर का उपयोग करके): "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`

संदर्भ

SSRF A

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

उद्देश्य

SSRF B, objectif

CVE-2024-34351 के शोषण के लिए शर्तें

Next.JS पर आधारित एक एप्लिकेशन जिसका संस्करण 14.1.1 से कम है
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 पहले URL को HTTP HEAD के साथ अनुरोध करता है।
यदि प्रतिक्रिया में Content-Type: text/x-component हेडर लौटता है, तो Next.JS URL को HTTP GET के साथ अनुरोध करता है।

SSRF C, intro

शोषण

लक्ष्य सर्वर पर SSRF प्राप्त करने के लिए, एक अन्य सर्वर चलाना आवश्यक है:

जो सभी रूट्स (query path) पर सुनता है
जो किसी भी 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

नोट्स

"सर्वर से अतिरिक्त विशेषताएँ"

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

"getStaticProps" app/ में समर्थित नहीं है। अधिक जानकारी: 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 निर्देशिका में पेज डिफ़ॉल्ट रूप से सर्वर कम्पोनेंट होते हैं। यह पेजेज़ निर्देशिका से भिन्न है जहाँ पेज क्लाइंट कम्पोनेंट होते हैं।

Next.js 13 में अपग्रेड करने के लिए नए App Router का उपयोग आवश्यक नहीं है। आप पेजेज़ का उपयोग जारी रख सकते हैं जिसमें नई सुविधाएँ दोनों निर्देशिकाओं में काम करती हैं।

प्रदर्शन

यदि आप विभिन्न समाधानों के लिए लोडिंग प्रदर्शन की तुलना करना चाहते हैं, तो आप console.log में web core vital मीट्रिक्स जोड़ सकते हैं।

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

ISR using App router ?

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

In the Next.js App Router, all fetched data is now static by default, rendered at build time. However, this can be changed easily: Next.js extends the fetch options object to provide flexibility in caching and revalidating rules. You can use the {next: {revalidate: number}} option to refresh static data at set intervals or when backend changes occur (Incremental Static Regeneration), while the {cache: 'no-store'} option can be passed in the fetch request for dynamic data (server-side rendering).

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