Next.js 15 Server Components May End Client-Side Rendering

"After integrating Next.js 15 server components, our page load times improved by over 40%. Here's the breakdown. Transitioning from client-side to server-side rendering has undeniably transformed our app architecture. The magic? Reducing the number of client-side JavaScript files, which significantly speeds up initial load times. Here's a glance at the implementation: ```typescript // Server Component Example import { fetchData } from '@/lib/api'; export default async function ServerComponent() { const data = await fetchData(); return ( <div> <h1>Data Loaded Server-Side</h1> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); } ``` By offloading more of our rendering to the server, we leverage improved performance and SEO benefits without sacrificing interactivity. The combination of server-side rendering (SSR) and vibe coding allowed us to prototype these components quickly and efficiently. But, is client-side rendering truly obsolete with Next.js 15, or does it still have a place in your workflow? How are you adapting to these changes?" #WebDevelopment #TypeScript #Frontend #JavaScript

👀 TanStack just shipped React Server Components. And it works completely differently from what you're used to 👇 In most RSC frameworks, the server owns your component tree. You write components, they run on the server by default, and you opt into interactivity with 'use client'. The server decides the final shape of everything. TanStack Start flips that. RSCs are just streams of data that you fetch, cache, and render on your own terms from the client side. 🤔 Why does that matter? In the current model, every time you need new UI in response to user actions, you're going back to the server to rebuild and reconcile. Your app's lifecycle is constrained by the framework's conventions. With TanStack Start, you create an RSC with renderToReadableStream on the server, call it from a server function, and decode it on the client with createFromReadableStream. Three primitives, that's the whole API surface. Because they're just streams, you can cache them anywhere: in TanStack Query with explicit cache keys and staleTime, in the Router cache through loaders, behind a CDN, in memory, wherever your architecture already handles bytes. 📊 They tested it on tanstack website Blog pages dropped about 153 KB gzipped from client JS. Docs pages saw similar reductions. Total Blocking Time on one blog page went from 1,200ms to 260ms. But some landing pages were basically flat, and a few got slightly worse. Pages dominated by interactive UI don't magically get faster just because you thread a server component into the tree. 🧩 The really interesting part: Composite Components Most RSC systems let the server decide where client components render. Composite Components do the opposite; the server leaves "slots" (children, render props) where client UI can go, without needing to know what fills them. The server renders the static parts and says, "something interactive goes here." The client fills those slots with regular components; ⚠️ It's still experimental, and they intentionally don't support 'use server' actions because of recent security CVEs in other RSC stacks. All client-server communication goes through explicit createServerFn RPCs. I think treating RSCs as a cacheable data primitive instead of a framework paradigm is the right direction. Link to the announcement in the comments 👇 #react #tanstack #rsc #webdev #javascript

What if most of your 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲… shouldn’t exist at all? Not because it’s wrong— but because it’s in the wrong place. Most "state management problems" today aren't about tools. They're about 𝘄𝗵𝗲𝗿𝗲 𝘄𝗲 𝗽𝘂𝘁 𝘀𝘁𝗮𝘁𝗲. The React Server Components (RSC) shift quietly changed the question: → Not "Which state library should I use?" → But "Should this state even exist on the client?" 🧠 𝗧𝗵𝗲 𝗦𝗵𝗶𝗳𝘁: 𝗦𝘁𝗮𝘁𝗲 𝙋𝙡𝙖𝙘𝙚𝙢𝙚𝙣𝙩 > 𝗦𝘁𝗮𝘁𝗲 𝙈𝙖𝙣𝙖𝙜𝙚𝙢𝙚𝙣𝙩 For years, the default was: fetch data → useState → lift state → global store → more syncing It worked. But also created a lot of accidental complexity: re-fetching, duplication, syncing bugs etc Now we have a different option (with RSC): fetch on the server → render and stream the result → done No client state. No duplication. 📦 𝗟𝗶𝗳𝘁𝗶𝗻𝗴 𝘀𝘁𝗮𝘁𝗲 𝙫𝙨 𝗰𝗼𝗹𝗼𝗰𝗮𝘁𝗶𝗻𝗴 𝗼𝗻 𝘀𝗲𝗿𝘃𝗲𝗿 Instead of pushing state higher in the tree, we can colocate data where its used Or better, keep it on the server entirely • Less prop drilling • Less syncing • Fewer bugs ⚖️ 𝗧𝗿𝗮𝗱𝗲𝗼𝗳𝗳 𝘁𝗼 𝗯𝗲 𝗮𝘄𝗮𝗿𝗲 𝗼𝗳 Too much on the server → sluggish, less interactive UX  Too much on the client → same old complexity, syncing issues The skill now is 𝗰𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗯𝗼𝘂𝗻𝗱𝗮𝗿𝘆 𝘄𝗲𝗹𝗹. 💡 𝗙𝗶𝗻𝗮𝗹 𝗧𝗵𝗼𝘂𝗴𝗵𝘁 useState isn't obsolete. But it's no longer the default place to put everything. Modern React is shifting from: "manage state everywhere" to: "decide where state should live in first place". #ReactJS #WebDevelopment #JavaScript #NextJS #StateManagement #ReactServerComponents #SoftwareEngineering

Your landing page fetches data from 20+ APIs. The user expects it to load in 2 seconds. Most frontend engineers would reach for Promise.all and call it a day. That approach is wrong and I wrote 4,000 words explaining why. (It's a very very deep dive and solution oriented) HTTP 103 Early Hints. The RSC Flight Protocol. WHATWG Streams with backpressure. Transferable ReadableStreams piped through Web Workers. Origin Private File System. scheduler.yield(). Speculation Rules API. These are all shipping browser capabilities. Today. Right now. Most of us have never used them. I wrote a deep-dive system design on how to architect a frontend that fetches massive data from N sources and still paints meaningful content in under 500ms. No bullet-point listicle. Just the actual engineering. check the link in the comment! #React #Javascript #Frontend #SystemDesign

If there’s one thing I’ve learned while building out large-scale, modular applications, it’s that component bloat will quietly ruin your codebase. React components usually start small, but once you add data fetching, sorting, and state management, they become monstrous. I just published a new article on Medium breaking down my favorite solution to this: Custom Hooks. I explain the golden rule of clean React architecture—separating the "Brains" (logic) from the "Looks" (UI)—and how to actually implement it. If you want to write cleaner, more testable code, give it a read: "https://lnkd.in/gnZ44Hgu" #ReactJS #WebDevelopment #SoftwareArchitecture #CleanCode #FrontendDeveloper

👉🏻 Stop guessing where your Next.js code actually runs. - Most developers use Next.js… but many overlook the fundamental shift that makes it powerful: 👉 The execution boundary — Server vs Client. And that gap quietly leads to: - Slower applications - Bloated JavaScript bundles - Avoidable security risks If you want to move from just using the framework to mastering it, you need to understand this mental model. ⚡ Server Components — The Heavy Lifters Server Components run exclusively on the server. They are built for: • Data fetching → retrieve data at the source • Security → keep secrets and business logic protected • Performance → send zero JavaScript to the browser 👉 The result: faster load times and leaner applications. ⚡ Client Components — The Interactive Layer Client Components run in the browser. Use them only when necessary: • Interactivity → clicks, forms, UI behavior • State & lifecycle → useState, useEffect • Browser APIs → window, localStorage 👉 They power the experience—but add to your bundle. 💡 The Golden Rule ▪️Server Components → Data, Security, Performance ▪️Client Components → Interaction, State, Experience 📌 Practical Example Think of a dashboard: • Data fetching, layout → Server • Search, filters, actions → Client This separation ensures the browser only handles what truly requires interaction. 🚀 Why this matters Modern applications are judged by speed and efficiency. The more logic you keep on the server, the less JavaScript your users need to download, parse, and execute. #NextJS #WebDevelopment #ReactJS #FullStack #Clientside #Serverside #ReactFramework #Rendering #SIRISAPPS

🚀 Stop Dumping Everything in /src: The Blueprint for Production-Ready Frontend We've all been there: a project starts small, and suddenly your src folder is a graveyard of 50+ files with no clear home. The secret to a maintainable codebase isn't just the code you write-it's where you put it. A standardized folder structure like the one in this image is a gift to your future self (and your teammates). Why this specific setup works: 📂 api & services: Separation of concerns. Your api folder handles the raw Axios/Fetch calls, while services handles the logic of how that data is transformed for your Ul. 📂 components (ui vs. layout): Distinguishing between atomic Ul elements (buttons, inputs) and structural layouts (navbars, footers) makes finding components 10x faster. 📂 hooks & utils: If logic is used more than once, extract it. Custom hooks keep your components lean and focused on the view. 📂 context & redux: Clear boundaries for state management. Use context for global themes/auth and redux (or Zustand) for complex, data-heavy state. The "Scale" Test: Ask yourself: "If a new developer joined the team today, could they find the login API call in under 10 seconds?" If the answer is no, it might be time for a refactor. The Bottom Line: You don't build a house without a blueprint. Don't build an enterprise app without a structured directory. What does your "gold standard" frontend folder structure look like? Do you prefer "feature-based" folders or "type-based" ones? Let's debate in the comments! 👇 #webdevelopment #ReactJS #FrontendDevelooment #API #FullstackDevelopment

🚀 Frontend vs Backend — both different, yet equally powerful! Frontend is what users see and feel — design, buttons, and interactions. Backend is what works behind the scenes — logic, servers, and data handling.  #A great product is not about choosing one over the other, but mastering how they work together. From login forms to data processing — every click you make is a perfect collaboration between frontend and backend. #Tip for beginners: Don’t just learn theory, start building projects that combine both! #WebDevelopment #Frontend #Backend #FullStack #CodingJourney #JavaScript

We shipped 847KB of JavaScript to render a page that displays 3 paragraphs of text. In 2024. Last week, I rebuilt it with React Server Components. The client bundle dropped to 12KB. That is not a typo. 847 to 12. React Server Components are the biggest architectural shift in front-end development since the move from jQuery to React itself. And most teams are still ignoring them because the migration looks scary. Here is what actually changed: components can now run entirely on the server. No JavaScript ships to the browser for them. The data fetching happens where the data lives. The rendering happens before the response even leaves the server. The result? Pages load in under 200ms on 3G connections. Core Web Vitals go green overnight. And your users stop rage-clicking buttons that have not hydrated yet. But here is the part that makes senior engineers nervous: your entire mental model of React has to change. State does not work the same way. Context does not cross the server-client boundary. Your favorite libraries might not be compatible. The teams I see winning are not waiting for the ecosystem to catch up. They are drawing a clear line — server components for data display, client components for interactivity. Simple rule, massive impact. The front-end performance problem was never about slow browsers. It was about shipping too much code. What is stopping your team from adopting server components? #React #ServerComponents #FrontEnd #WebPerformance

"WebAssembly for compute-heavy web apps?" Everyone's jumping on the bandwagon without understanding the real deal. Here's where they miss the point. 1. **Optimize Performance**: Use WebAssembly to run CPU-intensive tasks like image processing directly in the browser. I've seen apps achieve near-native speed, reducing server load significantly. 2. **Enhance User Experience**: Build applications that can handle real-time data manipulation without breaking a sweat. WebAssembly enables smoother animations and interactions by offloading heavy computations from JavaScript. 3. **Boost Compatibility**: Integrate existing C/C++ libraries into web apps seamlessly. This lets you leverage mature, battle-tested code while developing in a modern web environment. 4. **Improve Security**: Avoid common JavaScript pitfalls with WebAssembly's sandboxed execution. It inherently minimizes attack surfaces and offers a more secure option for sensitive computations. 5. **Streamline Development**: Try vibe coding to quickly prototype features with AI assistance. WebAssembly allows faster iterations by decoupling heavy logic from the main application flow. 6. **Scale Applications**: Avoid bottlenecks during peak loads by distributing compute tasks efficiently. WebAssembly helps in parallelizing tasks to take full advantage of multicore processors. ```typescript const importWasm = async (path: string) => { const response = await fetch(path); const buffer = await response.arrayBuffer(); const module = await WebAssembly.compile(buffer); const instance = await WebAssembly.instantiate(module); return instance.exports; }; (async () => { const wasmModule = await importWasm('path/to/module.wasm'); console.log(wasmModule.someHeavyFunction()); })(); ``` How are you integrating WebAssembly in your projects? What real-world challenges have you faced? Looking forward to hearing your experiences. #WebDevelopment #TypeScript #Frontend #JavaScript