Using of React Router v7 as fullstack framework

Version

wip

Status

ACCEPTED

Revision Comment

Initial Version

Commit

(worktree)

Repository

https://github.com/rattermeyer/rr-mantine-template.git

Last Re-evaluation

25.1 - 11.03.2025

Last Reviewers

Richard Attermeyer

Contributors

Richard

Informed

Team

Keywords

react, react-router, framework

Superseded by

Context and Problem Statement

We want to simplify the creation of modern Web apps and use a fullstack approach that does not require the separate definition of an API between frontend and backend. We target smaller web applications or parts of a bigger application that have more CRUD like requirements.

Architectural Drivers

  • Well-established solution

  • Solution where know-how is beneficial also for building real Single-Page-Applications (SPA) in other contexts

  • Should provide a minimal set of features to build a full-stack application with focus on database access.

Decision

Using React Router v7 in a framework configuration

React Router is well-established. Remix has been the full-stack framework before from the same team, but has merged again with React Router. React Router is mentioned as one of the recommended frameworks supporting the React vision of a full stack vision.

Relationship to other Architectural Decisions

No other decisions where influenced by or have influenced this decision.

Consequences

Next.js has a broader developer community. It might not as easy as with next.js to find support and documentation. Using React Router as a fullstack framework can make it more difficult to deploy it as progressive web app (PWA) if at all possible. There is a project for Remix that provides PWA capabilities. However, this is currently not migrated to react router.

Next.js provides PWA capabilities. Thus, if this is required, next.js might be a valid alternative

Remix describes itself as:

Remix is an edge native, full stack JavaScript framework for building modern, fast, and resilient user experiences. It unifies the client and server with web standards so you can think less about code and more about your product.

Basically, we have the feeling, that Remix / React Router provides a better developer experience, when building form-heavy, dynamic websites that prefer SSR. It pushes the use of web-standards, instead of inventing custom solutions (using stale-while-revalidate instead of custom-solution for incremental static regeneration).

However, next.js might be better if you have a more content-centric website.

Considered Alternatives

Next.js

Next.js provides more features, but not all are required and can be addressed more directly using other means.

React Router automatically handles errors, interruptions, and race conditions, Next.js does not.

Next.js encourages client side JavaScript for serving dynamic content, React Router does not.

Next.js requires client side JavaScript for data mutations, React Router does not.