When Sarah, the lead dev at a fast-growing e-commerce startup called Aurora Goods, first suggested moving their product catalog to an architecture built on React Server Components (RSCs), the team was intrigued but wary. Their current client-side rendered (CSR) React app, a mashup of serverless functions and a GraphQL API, was just not keeping up with traffic and the complex data fetches required. Product detail pages were often taking 3.5 seconds to load, and their analytics team showed that number was directly responsible for a 7% customer drop-off rate. Sarah was convinced RSCs, combined with their AWS Amplify backend, could get them sub-second load times and a much better dev experience, but the path there looked steep. Was it actually possible to make such a big change without rewriting everything from scratch?

The Client-Side Conundrum at Aurora Goods

Aurora Goods had blown up in the past two years, going from a small niche vendor to a serious name in sustainable home goods. Their engineering team ballooned from three to fifteen people. The original architecture, fine for their early days, was creaking under the load. Every product detail page (PDP) had to pull data from multiple places: product info from DynamoDB, reviews from another service, and inventory from a third-party API. All this happened on the client, which meant users saw spinners and hydration delays. “We were constantly battling waterfall requests,” Sarah said in a team meeting last year. “The browser would download the JS bundle, then fetch the product ID, then the product details, then the reviews. It was a serial bottleneck.”

They were already using AWS Amplify for hosting, auth, and API management. Their GraphQL API on AWS AppSync was solid, but the client-side fetching meant users were stuck waiting for multiple API calls to resolve. This was both a user experience and an SEO problem. Even though modern search engines can render JavaScript, they still give a big advantage to a fully-formed HTML page on the first request. A recent Semrush audit showed their biggest competitor had PDP load times under 1.5 seconds, which was helping them rank higher for the same keywords.

The Promise of React Server Components

Sarah had been watching React Server Components since they were announced. The core idea, offloading data fetching and rendering to the server, was the exact solution they needed for their waterfall request problems. “Imagine the server just hands us the complete HTML and CSS, ready to go, and we only layer on the client-side interactivity we need,” she pitched to the team. “That’s what this gives us.” RSCs let you write React components that run only on the server, hitting databases or internal APIs directly without ever sending credentials to the browser. This speeds things up by shipping less JavaScript and makes the whole setup more secure.

This idea of full-stack React, where server logic and client UI live in the same component tree, was a big shift. It meant they could move all their complicated data aggregation logic out of client-side useEffect hooks and Redux thunks and put it right into server components, next to the rendering logic. Sarah argued that this co-location would make the codebase much easier for anyone to understand and maintain, especially when they needed to add new data sources down the line.

Integrating RSCs with AWS Amplify: The Initial Hurdles

First, they had to figure out how AWS Amplify would even handle this new architecture. Amplify Hosting is mostly set up for static site generation (SSG) and server-side rendering (SSR) with frameworks like Next.js. RSCs add another server-side processing step that has to be orchestrated just right. The team chose to experiment with the Next.js App Router, which has built-in support for RSCs, and started with a proof-of-concept on a single, high-traffic product category page.

Getting Amplify Hosting to build and deploy an app with the Next.js App Router and RSCs took some tweaks to their amplify.yml build spec. The main challenge was making sure the build process could tell the difference between server components (which become HTML on the server) and client components (which get hydrated in the browser). “We spent a solid week debugging build failures because environment variables weren’t available at the right time,” said David, a senior engineer on the team. “The trick was to ensure server-only variables, like database connection strings, were only exposed during the server component build phase and never got bundled with the client code.”

Their amplify.yml started out fairly standard:

version: 1
frontend: phases: preBuild: commands:

npm ci
 build: commands:

npm run build
 artifacts: baseDirectory: .next files:

'*/'
 cache: paths:

node_modules/*/

While that’s a normal config for Next.js, RSCs required them to also get their next.config.js set up correctly to export the necessary server bundles. They also found that the Amplify build environment absolutely had to be on Node.js version 18 or higher to support the newer Next.js features for RSCs, a detail that was causing some really cryptic build errors at first.

Data Fetching Reimagined with AppSync and RSCs

One of the biggest wins for Aurora Goods was how much simpler their data fetching became. Before, a product page might have had several client-side GraphQL queries running through Apollo Client. With RSCs, those queries could run directly on the server. Their AWS AppSync GraphQL API was perfect for this. Instead of client-side useQuery hooks, server components just used a simple fetch call or a light GraphQL client to hit AppSync directly. This completely removed the need to ship large GraphQL libraries and client-side caching logic to the browser for the initial render.

“We moved all the data aggregation for our PDPs into a single server component,” Sarah explained. “It now fetches product details, reviews, and inventory from different AppSync resolvers before a single byte of HTML is sent to the browser. The result is a fully populated page on the first paint.” Their pattern was to have a top-level server component fetch everything and then pass down only the necessary props to its children, which were client components responsible for interactivity. This separation of data fetching on the server and interactivity on the client made their application logic far less prone to bugs.

For instance, a simplified server component looked something like this:

// app/products/[id]/page.tsx (Server Component)
import { getProductDetails, getProductReviews } from '@/lib/api'. Export default async function ProductDetailPage({ params }) { const productId = params.id. Const product = await getProductDetails(productId). Const reviews = await getProductReviews(productId). Return ( <div> <h1>{product.name}</h1> <p>{product.description}</p> <ProductImageGallery images={product.images} /> {/* Client Component /} <ReviewList reviews={reviews} /> {/ Client Component /} <AddToCartButton productId={productId} /> {/ Client Component */} </div> );
}

The getProductDetails function here makes a direct HTTP call to their AppSync endpoint using an API key that’s never exposed to the client. This kind of direct server-to-server communication provides tangible gains in both security posture and initial load performance.

Performance Metrics and Developer Experience

After a three-month phased rollout on their busiest product categories, the results were clear. Average Largest Contentful Paint (LCP) for the new pages dropped from 2.8 seconds to just 0.9 seconds, a 68% improvement. Total Blocking Time (TBT) fell sharply too, making the site feel much faster. “Our Core Web Vitals are now consistently in the ‘Good’ range for these pages,” Sarah reported in their quarterly review, pulling up a chart from Google PageSpeed Insights. That improvement led directly to a 4% increase in conversion rates on the migrated pages.

The dev experience got better, too. It was just easier to reason about how data flowed through the app. The hard separation between server and client code, enforced by the "use client" directive, forced them into better architectural habits (no more fetching data in weird places). New hires could look at a component and immediately see where the data was coming from. Because they could now render complex UI on the server, like dynamically generated spec tables, the client-side JavaScript bundle for these pages shrunk by about 30%. Smaller bundles mean faster downloads and less work for the browser.

One hurdle they ran into was state management between server and client components. While RSCs are great for the initial data load, any complex user interactions that require frequent updates still need client-side state management. They settled on a strategy of passing initial data down as props and then using React Context or Zustand on the client side when needed. RSCs aren’t a silver bullet for all client-side complexity, but they are a massive improvement for the initial load.

What Aurora Goods Learned: A Blueprint for Full-Stack React on Amplify

Aurora Goods’ success with React Server Components and AWS Amplify showed that this kind of modern, full-stack React architecture is not only possible but also delivers huge benefits. Their win came down to a few key decisions:

• Phased Migration: They didn’t do a “big bang” rewrite. They started with their most important pages which let them learn as they went.
• Using Existing Backend: They didn’t have to rebuild their backend. Their AppSync GraphQL API was perfectly suited for RSCs to fetch data from the server.
• Build Process Refinement: They put in the work to get their amplify.yml configured correctly and understand the Next.js build outputs for RSCs.
• Clear Component Boundaries: Being strict about data fetching on the server and interactivity on the client made the whole development process simpler.

The Aurora Goods team now builds new features with an RSC-first approach as their default for building performant web apps. Their project shows what’s possible when you combine these new React patterns with a strong backend platform like AWS.

By adopting React Server Components with AWS Amplify, the team at Aurora Goods delivered sub-second initial page loads and created a much cleaner full-stack workflow, which directly boosted user engagement and sales. For other developers, keeping up with these architectural shifts is becoming essential for career growth and staying relevant, it’s part of what building resilience for 2026 looks like. This focus on performance through efficient architecture also shares principles with other modern tech trends, like optimizing resource use for hybrid AI performance.