SvijetSvijetSvijetSvijet SSR (Rendering na strani poslužitelja)SvijetSvijet Serveri Svijet Svijet Svijet Svijet Zahtijeva hidrataciju Ne ✅ Da ✅ DaSvijetInteraktivnost Ne ✅ Cijeli ✅ Cijeli Pristup resursima poslužitelja ✅ Izravno ✅ Preko getServerSideProps ❌ Potreban je poziv API-ja On-Demand ili StreamedSvijetNa zahtjev Idealni slučajevi korištenja Static ili data-bound pogledi Personalizirani ili dinamični UI Interaktivni tokovi, lokalni UXSvijet SSR (Rendering na strani poslužitelja)Svijet Svijet Serveri Svijet Svijet Svijet Svijet Svijet Svijet Interaktivnost Ne ✅ Cijeli ✅ Cijeli Svijet Pristup resursima poslužitelja ✅ Izravno ✅ Preko getServerSideProps ❌ Potreban je poziv API-jaSvijet izravno ✅ preko getServerSideProps On-Demand ili StreamedSvijetNa zahtjev Svijet Na zahtjev Idealni slučajevi korištenja Static ili data-bound pogledi Personalizirani ili dinamični UI Interaktivni tokovi, lokalni UX Svijet Interaktivni tokovi, lokalni UX Svijet Funkcija Server Client Component Korištenje Učinak SvijetSvijetSvijetSvijet (treba obložiti u efekte)SvijetSvijetDogađajiSvijetFunkcija Server Client ComponentSvijet Svijet Komponente klijenta Korištenjekorištenje Svijet Svijet Svijet Svijet Svijet ✅ (ako je statično) Svijet SvijetSvijet (treba obložiti u efekte)SvijetSvijet DogađajiSvijet Svijet Komponente Rendering Strategy Razlog ProizvodDetails RSC Pronađeno iz DB-a, bez interaktivnosti, bez potrebe za hidratacijom PriceWithPersonalization SSR Ovisno o korisničkoj sesiji, dinamično po zahtjevu AddToCartButton CSR Zahtijeva interaktivnost i lokalno stanjeRelatedProizvodi SSG (s ISR-om) Sigurno se cache u vrijeme izgradnje, može se ponovno validirati svakih 24 sata ili po oznaki StockStatusBanner RSC + streaming Često se mijenja, prenosi se s suspenzijom kako ne bi blokirao TTFB Komponente Rendering Strategy Razlog ProizvodDetails RSC Pronađeno iz DB-a, bez interaktivnosti, bez potrebe za hidratacijom PriceWithPersonalization SSR Ovisno o korisničkoj sesiji, dinamično po zahtjevu AddToCartButton CSR Zahtijeva interaktivnost i lokalno stanjeRelatedProizvodi SSG (s ISR-om) Sigurno se cache u vrijeme izgradnje, može se ponovno validirati svakih 24 sata ili po oznaki StockStatusBanner RSC + streaming Često se mijenja, prenosi se s suspenzijom kako ne bi blokirao TTFB komponentiSvijet Svijet SvijetPreuzeto iz DB-a, bez interaktivnosti, bez potrebe za hidratacijom Svijet Svijet Povezani proizvodiSvijet SvijetSigurno se pohranjuje tijekom izgradnje, može se ponovno validirati svakih 24 sata ili po oznaki Svijet Svijet SvijetSvijet (*Ako želite preskočiti naprijed i uroniti izravno u tehnički raspad, preskočite na 1. zašto su predstavljene komponente React Servera.) In the early 2010s, React revolutionized frontend development with its declarative component model and efficient virtual DOM diffing. What began as a simple view library soon became the backbone for large-scale single-page applications (SPAs). These SPAs predominantly used Client-Side Rendering (CSR), meaning the browser would download a JavaScript bundle, execute it, and construct the UI entirely on the client. This client-centric model was flexible and highly interactive, and it defined “modern” web apps for years. However, as applications grew more complex and feature-rich, the CSR approach started to show its cracks: Svijet Svijet Svijet Hefty JavaScript bundles and client-side work meant users waited longer before they could actually interact with the page. Longer Time-to-Interactive (TTI): Converting server-rendered HTML into an interactive app (hydration) became a performance choke point, especially as the amount of dynamic content increased. Hydration bottlenecks: Napuhani paketi: Aplikacije često isporučuju mnogo više JavaScript-a nego što je potrebno, opterećujući preglednike kodom za značajke ili sadržaj koji bi se mogao isporučiti učinkovitije. Izvrsnost koja se ne povećava: Što je aplikacija veća i složenija, to je teže održavati brzu izvedbu na svim uređajima i mrežnim uvjetima. Next.js se pojavio kako bi riješio neke od tih bolnih točaka uvođenjem Server-Side Rendering (SSR), Static Site Generation (SSG) i drugih optimizacija. Te tehnike poboljšale su početno vrijeme učitavanja i odložile dio UI renderinga na poslužitelju. S Next.js 15 koji se pokreće na React 19, nova paradigma prikazivanja preuzela je središnju fazu: . RSCs allow developers to seamlessly blend server-rendered and client-rendered components in a single React tree. The implications are significant. Static parts of the UI can now be delivered as pure HTML with Drugim riječima, za te odjeljke nije potrebna hidracija na strani klijenta. Logika prikupljanja podataka također se pojednostavljuje pokretanjem unutar komponenti poslužitelja, eliminirajući mnoge nepotrebne API pozive iz preglednika. Rezultat: tanji paketi na strani klijenta, brže interakcije i aplikacija koja je mnogo učinkovitija i skalabilnija. React Server Components (RSC) zero JavaScript overhead Ovaj članak nije pregled na površini RSC-a.Kada sam odlučio napisati o učinkovitom korištenju Next.js-a 2025. godine, brzo je postalo jasno da React Server Components zaslužuje posvećeno duboko uronjenje.Što slijedi je tehnički strogo istraživanje kako RSC radi pod poklopcem, kako ga iskoristiti u projektu Next.js 15 i zašto predstavlja temeljnu promjenu u frontend arhitekturi. By the end, I hope you come away with the same clarity and appreciation for RSC that I did through the process of researching and writing this piece. Intro: From CSR to RSC — How Rendering Evolved in React Intro: From CSR to RSC — How Rendering Evolved in React Over the past decade, the way we build React applications has fundamentally evolved and with it, the way we think about rendering. Kratka povijest Client-Side Rendering (CSR) u React-u React gained its popularity through — a model where the browser downloads JavaScript, executes it, and builds the entire UI on the client. This approach gave developers full control over interactivity and state, and made it easy to build dynamic single-page applications (SPAs). Client-Side Rendering (CSR) Međutim, CSR je došao s značajnim kompromisima: Svijet Svijet Svijet , especially on mobile or poor networks Slower initial loads for content-driven pages Poor SEO — even for pages with minimal interactivity JavaScript-heavy bundles Potreban je korak hidracije nakon učitavanja HTML-a, odgađajući vrijeme interaktivnosti For a while, these limitations were just “how things were.” Then Next.js changed the game. 🚀 How Next.js brought SSR and SSG to mainstream React development When Nakon što je ušao u scenu, uveo je rendering sa strane poslužitelja (SSR) i static site generation (SSG) kao građane prve klase za React. Next.js SSR je omogućio da se stranice generiraju po zahtjevu, poboljšavajući SEO i brzinu učitavanja za dinamični sadržaj. SSG je omogućio pretvaranje sadržaja u vrijeme implementacije, savršeno za blogove, dokumente i marketinške stranice. Incremental Static Regeneration (ISR) pomogao je ukloniti rupu tako što je omogućio ažuriranje statičkih stranica nakon implementacije. Ova fleksibilnost pomogla je programerima postići bolju ravnotežu između performansi, SEO-a i iskustva programera. But even with SSR and SSG, there was still a lingering issue: – čak i za komponente koje nisu trebale biti interaktivne. we were still sending too much JavaScript to the browser Porast React Server Components (RSC) u 2025. godini Uz oslobađanje and , we’ve entered a new era: To je sada ključni dio načina na koji gradimo aplikacije. Next.js 15 React 19 React Server Components (RSC) Unlike SSR, which still requires hydration and ships JavaScript to the client, . u RSC allows you to render components on the server — without sending any JavaScript to the browser at all To je velika promjena: Components can now access server-side data directly Static content doesn’t require hydration You can mix server and client components in a single React tree, composing your rendering strategy per component RSC ne zamjenjuje SSR ili SSG. , unlocking finer-grained control over performance, bundle size, and rendering behavior. complements them In 2025, RSC is a foundational concept that every senior React engineer needs to master. 1. Why React Server Components Were Introduced 1. Why React Server Components Were Introduced As React applications became more complex, the industry began to feel the weight of its success. While Client-Side Rendering (CSR), Server-Side Rendering (SSR), and Static Site Generation (SSG) offered different strategies for building performant web apps, each of them carried trade-offs that grew more apparent at scale. 🚧 Limitations of CSR, SSR, and SSG 1. Hydration overhead Even with SSR or SSG, once HTML reaches the browser, React needs to “hydrate” the page — attach event listeners, reinitialize components, and effectively rebuild the app in memory. For large component trees, hydration can be a major bottleneck for Time-To-Interactive (TTI). 2. JavaScript bundle bloat S CSR-om, svaka komponenta, korisnička oprema i API poziv koji je dio stranice mora biti poslan u preglednik – bez obzira je li interaktivan ili ne. SSR i SSG to malo smanjuju, ali većina paketa još uvijek mora biti izvršena na klijentu. 3. Disconnected data-fetching logic In the pre-RSC world, data lived outside the components that rendered it. You had to use ili (or call APIs in ) to fetch data, then pass it into components via props. This separation added cognitive overhead and made code harder to co-locate and reuse. getServerSideProps getStaticProps useEffect Koje probleme je RSC dizajniran za rješavanje React Server Components (RSC) stvoreni su za rješavanje tih rastućih bolnih točaka s jednostavnom, ali snažnom idejom: . let components execute on the server by default, and only send JavaScript to the browser when it’s absolutely necessary Eliminate unnecessary JavaScript RSC allows components to be rendered server-side shipping any of their logic to the client. If a component doesn’t require interactivity, there’s no need to hydrate or load its JS bundle at all. without ✅ Server-side data access within the component tree RSC uklanja umjetnu granicu između prikupljanja i prikazivanja podataka. to directly access databases, file systems, or APIs — co-locating data and view logic naturally, with no need for API routes or prop drilling. async/await ✅ Improve rendering efficiency and developer experience By moving non-interactive logic to the server, developers can build lighter apps with smaller bundles and better performance. RSC also simplifies the mental model — you just write components, and let the framework handle where they run and how they ship. RSC doesn’t aim to replace SSR or SSG, instead, it complements them. It lets you think , not just the page level, about what should run on the server and what belongs in the browser. at the component level In short: React Server Components were designed to bring modern frontend development back to its lean, fast, and maintainable roots without compromising interactivity. 2. Rendering Strategies in Next.js 15: RSC vs SSR vs CSR 2. Rendering Strategies in Next.js 15: RSC vs SSR vs CSR Next.js 15 offers developers a granular rendering model that goes far beyond traditional page-level strategies. With becoming a first-class concept, it’s essential to understand how they compare to two familiar models: i . React Server Components (RSC) Server-Side Rendering (SSR) Client-Side Rendering (CSR) While SSG (Static Site Generation) is still valuable in specific cases, it can be viewed as a izgrađen na vrhu SSR-a. represent distinct runtime rendering paths, and understanding them is crucial for making performance- and architecture-aware decisions in 2025. caching strategy RSC vs SSR vs CSR 💡 Before We Compare: What Do We Mean by "Interactive Component"? In the context of React and Next.js, an To je bilo koji element koji . interactive component requires client-side JavaScript to respond to user input or browser events This includes (but is not limited to): Buttons that update state on click Oblici s validacijom ili kontroliranim ulazima Dropdowns i modali koji se prebacuju otvoreno/zatvoreno Animations triggered by scrolling or hover Kartuše, karoserije, filteri i slajdovi Komponente koje koriste useState, useEffect ili useReducer If a component has , internal , or relies on the , it must run on the client. event handlers state DOM or browser APIs Interactivity = Browser-side behavior + JS event listeners + local state. Understanding this distinction helps clarify : to avoid shipping JavaScript for UI pieces that don’t need to be interactive. why RSC exists 🧩 Rendering Models at a Glance Feature RSC (React Server Components) SSR (Server-Side Rendering) CSR (Client-Side Rendering) Render location Server Server Client JavaScript sent to browser ❌ None ✅ Yes ✅ Yes Requires hydration ❌ No ✅ Yes ✅ Yes Interactivity ❌ No ✅ Full ✅ Full Access to server resources ✅ Direct ✅ Via getServerSideProps ❌ Needs API calls When it runs On-demand or streamed Per request On load in browser Ideal use case Static or data-bound views Personalized or dynamic UI Interactive flows, local UX Feature RSC (react server komponente) CSR (Rendering sa strane klijenta) Povjerite lokaciju Server Klijent JavaScript sent to browser ❌ None ✅ Yes Da Kad teče Preuzimanje u browser Feature RSC (React Server Components) CSR (Rendering sa strane klijenta) Feature Feature RSC (react server komponente) RSC (React Server Components) SSR (Server-Side Rendering) SSR (Server-Side Rendering) CSR (Rendering sa strane klijenta) CSR (Rendering sa strane klijenta) Povjerite lokaciju Server Client Povjerite lokaciju Povjerite lokaciju Server Serveri Server Server Client Klijent JavaScript sent to browser ❌ None ✅ Yes Da JavaScript sent to browser JavaScript upućen u browser ❌ None ❌ None ✅ Yes ✅ Yes Da Da Requires hydration ❌ No ✅ Yes ✅ Yes Potrebna je hidratacija Potrebna je hidratacija ❌ No ❌ No ✅ Yes Da ✅ Yes ✅ Yes interaktivnost interaktivnost Ne Ne punim punim ✅ Full ✅ Full Pristup resursima servera Pristup resursima servera ✅ Direct ✅ Via getServerSideProps Treba vam vatreni poziv Treba vam vatreni poziv Kad teče Preuzimanje u browser Kad teče Kad teče On-Demand ili Streamed On-demand or streamed Na zahtjev Preuzimanje u browser Preuzimanje u browser Ideal use case Ideal use case Static or data-bound views Static ili data-bound pogledi Personalizirani ili dinamični UI Personalizirani ili dinamični UI Interaktivni tokovi, lokalni UX 🔍 Think in Components, Not Just Pages In earlier versions of Next.js, rendering strategies were applied at the . You had , Što god odabrali, primijenili su na . This made sense in a world where rendering happened all-or-nothing — either statically at build time, or dynamically on each request. page level getServerSideProps getStaticProps Cijela stranica But with and the Direktorija je uvedena u Next.js 13+ i standardizirana u 15, . It becomes a that unlocks a new mindset. React Server Components (RSC) app/ rendering is no longer a top-down, one-size-fits-all decision per-component concern 🧠 A New Way of Thinking: Declarative and Composable Rendering This shift is more than an API change, it's a conceptual shift in how you architect your frontend. Declarative Instead of orchestrating and komponente se ručno prikazuju, sada jednostavno — React and Next.js take care of the rest. how where declare what each component does and what it needs You don’t manually wire up API endpoints or pass props from SSR to components. You can just write: // Server Component export default async function ProductInfo() { const product = await db.getProduct(slug) return <div>{product.name}</div> } Ova komponenta: Svijet Svijet Svijet Trčanje na serveru Doesn’t send JS to the client Ne zahtijeva bilo koji getServerSideProps ili API sloj Je li “samo komponenta” – nema potrebe za dodatnom abstrakcijom Opišite UI i njegove potrebe za podacima , a rendering motor izračunava ostatak. declaratively Composable Različiti dijelovi vašeg UI-a mogu koristiti različite strategije prikazivanja - , , and . on the same page at the same time with minimal overhead Na primjer: // Product page layout <ProductInfo /> // Server Component (no JS, rendered on the server) <AddToCartButton /> // Client Component (interactive) <SimilarProducts /> // Static Component (SSG with revalidation) Ove komponente žive zajedno u istom drvetu, ali svaka od njih: Svijet Radi u različitom okruženju (server, klijent, build) Koristi samo podatke i kod koji mu je potreban Brodovi točno ono što je potrebno za preglednik - ne više, ne manje To make this more concrete, I created a To pokazuje kako različite strategije prikazivanja mogu koegzistirati na jednoj stranici. minimal demo 3. How React Server Components Work Under the Hood Kako React Server komponente rade pod kapom React Server Components (RSC) nisu samo nova strategija prikazivanja, već u osnovi mijenjaju način na koji se komponente drveća grade, prikazuju i prenose. i kako to utječe na granice države, interaktivnosti i podataka. how it works behind the scenes Granica poslužitelja i klijenta: Split React Tree React aplikacije koje koriste RSC više nisu u potpunosti prikazane na klijentu. : component tree is split into two worlds Svijet Svijet Sastavni dijelovi poslužitelja: Izvodite samo na poslužitelju. JavaScript se nikad ne šalje pregledniku. Ne može držati lokalno stanje ili pričvrstiti slušalice događaja. Savršeno za renderiranje statičkog sadržaja i logike vezane za poslužitelj (npr. pristup DB-u). Komponente klijenta: moraju biti izričito označene "koristite klijenta". Oni su kompilirani u preglednik-prijateljski JavaScript i podržavaju punu interaktivnost, lokalno stanje, useEffect i upravljanje događajima. U fazi izgradnje ili vođenja, React gradi stablo u kojem su komponente poslužitelja i klijenta koegzistirane i spaja ih tijekom renderiranja. Što Zapravo čini "use client" When you add na datoteku, označava da cijeli modul i njegovi izvozi kao U pozadini scene, to upućuje Next.js izgradnju cijevi na: "use client" client-only Svijet Svijet Svijet Compile that file (and its dependencies) into a separate JavaScript bundle Exclude that component from being run on the server Treat it like a classic React CSR component with hydration logic This directive acts as a between the two sides of the tree. All components above it can be server-rendered; all components below it must be rendered in the browser. boundary marker Streaming: prikazivanje u komadima, a ne sve odjednom RSC embraces as a native rendering strategy. Instead of waiting for the full React tree to be built before sending it to the browser, the server of UI to the client as they become ready. streaming streams serialized fragments Svijet Svijet Svijet Komponente poslužitelja prikazuju se i šalju što je prije moguće Placeholders (e.g. via ) fill in temporarily <Suspense> Komponente klijenta povećavaju hidrataciju, samo kada se napune ✅ How is this possible? RSC introduces a concept called selective hydration. When a Client Component is rendered within a Server Component tree, React inserts a placeholder (<div data-rsc-placeholder />) and defers hydration. Nakon što je klijent učitao odgovarajući JS paket: Svijet Svijet Svijet React lazily loads that specific component Finds the placeholder and stitches it into the live tree Hidrira ga u izolaciji, bez ponovnog prikazivanja cijele stranice Ovaj dizajn je Vaša aplikacija brzo započinje, a interaktivnost dolazi na mrežu postupno. decoupled and progressive <Suspense fallback={<LoadingDetails />}> <ProductDetails /> // Server Component </Suspense> <AddToCartButton /> // Client Component (hydrated later) Prikupljanje podataka i dijeljenje koda u RSC-u Još jedna ključna "magija" RSC-a: Svijet Bez oslanjanja na , , or manual prop-passing. you can fetch data directly inside components with async/await getServerSideProps useEffect // Server Component export default async function Dashboard() { const stats = await getStatsForUser() return <StatsView data={stats} /> } Why is this possible? Svijet Svijet RSC komponente rade kao stvarne server funkcije, a ne kao moduli kompilirani od strane klijenta They can access , or anything your server runtime supports databases, internal APIs, file systems The result is rendered HTML (not JS) and streamed to the client Also: Svijet , since the result is static No hydration needed in the component itself — everything resolves before it hits the browser No loading UI logic Kod za ovu komponentu se ne šalje klijentu – osim ako nije unutar granice klijenta To značajno smanjuje veličinu boilerplate i paketa, a logiku zadržava u interfejsu korisnika - dugogodišnji cilj React-a koji je konačno realiziran na razini. 🚫 State, Hooks, and Lifecycle Considerations RSC traditional React hooks like , , or , because they . does not support useState useEffect useRef don’t run in the browser Feature Server Component Client Component korištenje ❌ ✅ useEffect ❌ ✅ useContext ✅ (if static) ✅ async/await ❌ (should wrap in effects) Event handlers ❌ ✅ useContext ✅ (ako je statično) async/await Feature Feature Servisna komponenta Server Component Client Component useState ❌ ❌ ✅ ✅ useEffect ❌ ✅ Učinak useEffect ❌ ❌ ✅ ✅ useContext useContext useContext ✅ (ako je statično) ✅ (ako je statično) ✅ ✅ async/await async/await async/await ✅ ❌ (should wrap in effects) ❌ (should wrap in effects) Event handlers Event handlers ❌ ❌ ✅ To osigurava čistu podjelu odgovornosti: Svijet Server Components: data and layout Client Components: interactivity and local state React Server Components are designed to simplify your app. Once you internalize the boundary rules, the streaming model, and async data access, you can with far less boilerplate than before. compose fast, personalized, and minimal-JS apps 4. What’s the Best Practice? Combining RSC, SSR, and SSG 4. What’s the Best Practice? Combining RSC, SSR, and SSG One of the most common questions React engineers face in Next.js 15 isn’t “should I use RSC?” — it’s “how do I combine RSC with SSR and SSG in a maintainable, high-performance way?” The beauty of Next.js 15 is that you’re no longer limited to one rendering strategy per page. Instead, you can now , applying the most appropriate approach to each part of the UI. compose rendering strategies at the component level This section introduces a practical framework for making that decision based on actual architectural needs. 🧭 Start with the Core Question: What does this component need? Postavite ova četiri pitanja za svaku komponentu: Svijet Svijet Svijet Svijet Does it need to be interactive? ✅ Yes → Use a Client Component Does it need secure, request-specific, or real-time data? ✅ Yes → Consider SSR Can it be precomputed or infrequently updated? ✅ Yes → Prefer SSG Does it fetch server data but never need to run on the client? ✅ Yes → Use RSC 🧩 Example: Product Page Strategy Breakdown Evo kako se tipična stranica e-trgovine može sastaviti koristeći sva tri strategije: Rendering Strategy Reason komponenti komponenti Rendering Strategy Rendering Strategy Razlog Reason ProductDetails RSC ProductDetails ProductDetails RSC RSC Fetched from DB, no interactivity, no need to hydrate Fetched from DB, no interactivity, no need to hydrate PriceWithPersonalization SSR Depends on user session, dynamic per request PriceWithPersonalization PriceWithPersonalization SSR SSR Depends on user session, dynamic per request Ovisno o korisničkoj sesiji, dinamično na zahtjev AddToCartButton CSR Requires interactivity and local state AddToCartButton AddToCartButton CSR CSR Requires interactivity and local state Requires interactivity and local state SSG (with ISR) RelatedProducts RelatedProducts SSG (with ISR) SSG (with ISR) Safe to cache at build-time, can revalidate every 24h or per tag Sigurno se pohranjuje tijekom izgradnje, može se ponovno validirati svakih 24 sata ili po oznaki StockStatusBanner RSC + prijenos Frequently changing, streamed in with Suspense to not block TTFB StockStatusBanner StockStatusBanner RSC + prijenos RSC + streaming Frequently changing, streamed in with Suspense to not block TTFB Frequently changing, streamed in with Suspense to not block TTFB Each component is doing — no more, no less. No full-page hydration, no global data fetching, no unnecessary JavaScript. just what it needs to do 📐 Design Best Practices for Combining Strategies ✅ 1. početak Server-First Design every component as a Server Component by default. Opt into interactivity ( ) only when necessary. This keeps bundles smaller and simplifies testing. "use client" ✅ 2. Keep boundaries clear Use folder naming or filename suffixes to make boundaries explicit: /components /server/ProductDetails.tsx /client/AddToCartButton.tsx /shared/ReviewStars.tsx ✅ 3. Embrace Suspense for progressive delivery Koristiti to stream in non-critical RSCs without blocking the whole page: <Suspense> <Suspense fallback={<LoadingReviews />}> <ReviewList /> </Suspense> ✅ 4. Co-locate logic with components Don’t split data-fetching and UI across files unless necessary. In RSC, you can colocate logic directly inside the component tree — the framework takes care of the rest. async ISR (Incremental Static Regeneration) – povećana statička regeneracija Za stranice s visokim prometom, kao što su članci na blogu ili marketinški odjeljci, koristite SSG + ponovnu validaciju: export const revalidate = 3600 // regenerate every hour ⚠️ Common Mistakes to Avoid Svijet ❌ by default — you’ll end up with CSR all over again Using "use client" ❌ Fetching data in client components when it could be server-fetched ❌ — instead, let client components be focused, isolated, and stateful Passing too much data between RSC and client components via props ❌ logic inside RSC — no need, RSC server-side Recreating SSR-style getServerSideProps is ✅ Odluka drvo sažetak Here’s a simplified guide: Is it interactive? │ ├── Yes → Client Component (CSR) │ └── No │ ├── Needs per-request data? → SSR │ ├── Can be pre-rendered? → SSG │ └── Otherwise → RSC Nakon što internalizirate kako prikazivati karte na odgovornost, . u the decisions become intuitive Najbolja praksa nije odabrati "najbolju strategiju prikazivanja". Riječ je o — with clarity, purpose, and performance in mind. designing rendering as an intentional part of your component architecture 6. Looking Ahead: Why RSC Is More Than Just a Feature 6. Looking Ahead: Why RSC Is More Than Just a Feature React Server komponente nisu samo optimizacija performansi ili poboljšanje DX-a . Much like React Hooks in 2019, RSC in 2025 is . u they represent a foundational shift in how we build React applications redefining the baseline for frontend architecture RSC mijenja mentalni model izgradnje u reakciji Tradicionalni React razvoj je uvijek bio izgrađen na ovoj pretpostavci: “The browser owns the runtime. We hydrate everything. Every piece of logic and data must live in the client, or be fetched via API.” RSC breaks that assumption. With RSC, you now ask: Svijet Mogu li u potpunosti preskočiti hidrataciju? Can this component run purely on the server? Can I colocate backend logic with my UI? Ona nam vraća , not with wrappers and workarounds, but with . the ability to separate display logic and interactivity cleanly first-class architectural boundaries It’s no longer “client-first.” It’s “purpose-first.” Svaki dio vašeg korisničkog interfejsa postoji tamo gdje je najučinkovitiji - server, klijent ili statički. 🌐 Ecosystem Shift Toward Server-First Rendering RSC isn’t happening in isolation. The broader frontend ecosystem is undergoing a . server-first rendering renaissance Frameworks like: Svijet lean heavily into server data loading and form actions. Remix Astro privremeno prihvaća zero-JS, isporučujući samo otoke interaktivnosti. takes hydration to the extreme — deferring all JS until explicitly needed. Qwik , with RSC and App Router, now puts of the developer experience. Next.js 15 per-component rendering at the center This isn’t a coincidence. It’s a reflection of a hard truth we’ve all felt: Sending less JavaScript is the only way to scale interactivity and performance on the modern web. React Server Components are the React-native answer to that challenge — deeply integrated, ergonomic, and production-ready. 🔮 What to Expect Next The evolution is still ongoing. As React 19 and the ecosystem mature, we can expect: Svijet More granular for RSC trees debugging and profiling tools to show boundaries and hydration timelines Better DevTools integration Vrste višeg reda do strategije abstraktnog prikazivanja (npr. obloge <ServerOnly>, <DeferredClient>) Broader adoption in design systems, frameworks, and libraries (e.g., RSC-aware UI kits) 💬 Enjoyed the read? Ako vam je ovaj članak pomogao drugačije razmišljati o React i Next.js 👉 for more deep dives Follow me on HackerNoon Hakeri 👉 razgovarati o React, arhitekturi ili migraciji RSC-a Or connect with me on LinkedIn LinkedIn
