Chapter 2: Modern Frontend Development with React
React Frontend Architecture
This is Part 2 of the Modern Frontend Development series. AI tools and trending blog posts will happily pick your entire stack in seconds, but the fastest answer isn't the same as the right answer for what you're building.
I'll break down three architectures: SPA + API Server, full-stack frameworks, and micro-frontends with BFFs, then compare them across real constraints like team size, SEO needs, and deployment cost so you can pick the one that fits your project.
Prerequisites
- Experience building React applications
- Basic understanding of REST APIs and client-server communication
- Part 1 (React Rendering Strategies) recommended but not required
Architecture is how you arrange the pieces for your constraints.
Tutorial Content
5 sections • about 45 minutes
In these modern days, AI tools can pick your entire tech stack in a single prompt. That's convenient, but it's also a trap. The fastest answer isn't the same as the right answer for what you're building.
And AI isn't the only one doing this. The community has been running the same playbook for years: a new framework launches, blog posts flood the internet, and suddenly it becomes the "obvious" choice. Then the next thing comes along and the cycle resets. It's just hard for new developers to find what actually is right for what they're building.
Why AI Usually Says "Use Next.js"
AI coding assistants have become a major source of architectural advice. You open ChatGPT, Claude, or Copilot and say "help me build a React app for [your use case]" without providing enough context, the default suggestion is usually Next.js.
That's not because Next.js is the universally correct choice. It's because of how these models are trained. The internet has a lot of tutorials, blog posts, Stack Overflow answers, and GitHub repos about Next.js, and when a model learns that "most recommendations point to X," it will recommend it. But most recommended and best fit for your situation are not the same thing.
Stop Reading the Comments
The JavaScript ecosystem has been arguing with itself for over a decade. jQuery vs Backbone. Angular vs React vs Vue. Webpack vs Vite. Next.js vs Remix. Server Components vs SPAs. The names change every couple of years, but it's just the same kind of fight.
Following these fights doesn't make you a better developer. You scroll through a 200-comment thread where most people are defending what they already use, and walk away less confident about a decision you were fine with an hour ago.
Building an internal B2B dashboard behind auth for 50 users. Thinking of just making a SPA with our existing REST API. Is that still a good choice?
What actually helps is learning to evaluate. When a new framework or pattern shows up, try to ask: What problem does this solve? Does my project have that problem? What do I give up by adopting it? If the answers don't point to a clear win for your users, move on. The tech will still be there if your needs change later.
Share this tutorial
About the author
Vu Nguyen
NAB, Lead Engineer
I'm Vu, a Lead Engineer at NAB (National Australia Bank). I started on Home Lending products and now lead a team building for HICAPS, Australia's largest point of sale claiming service for private health insurance. Before NAB, I worked at startups and across a range of teams and stacks.
Upskills is where I share practical, real-world knowledge to help you build and ship projects better. Beyond tutorials, more content is coming: project showcases, interview prep, and AI tools as resources for your learning journey. I'm excited to share what I've learned and keep learning together as we build cool things.
Hope you liked React Frontend Architecture. Want the next one in your inbox?
Practical web development deep-dives, every other week, written by an engineer who ships them. No fluff, no hot takes.
- Real-world, production-grade examples
- No spam, ever
- Unsubscribe in one click
We respect your privacy. Unsubscribe anytime.