Frontend/Backend Page-State Architecture

May 19, 2023

One coherent state packet per screen

A page-state response lets the interface act on the business reality that exists now.

The backend sends current data, permissions, available actions, navigation targets, and workflow context together. The frontend renders that complete decision surface without reconstructing it from unrelated resources and stale local assumptions.

One Screen Must Tell One Truth

Modern frontends handle transitions, drawers, validation, routing, and local interaction with remarkable fluency. The backend controls business rules, data joins, permissions, and workflow transitions.

Trouble enters through the gap. A browser may assemble one screen from many resource calls, cache merges, permission checks, and guesses about available actions. That polished screen can still present a decision that no longer matches the business state.

Let the URL Name the View

Vue, Quasar, and Vue-router still render the interface. The backend still sends JSON. The architecture changes the request and response around the visible page.

The frontend names a page, panel, list, detail view, or workflow step. The backend answers with one state packet for that view. The URL Is A Camera supplies the wider geometry: the path names the subject, authenticated authority selects a legitimate viewpoint, and the backend projects the business world that belongs inside the frame.

Turn an Order List Into a Complete Decision Surface

An order-list packet can carry rows, selected filters, pagination, visible fulfillment states, permission flags, available actions, detail-panel links, and warnings that affect the next choice.

The frontend receives the whole decision surface at once. It no longer needs to stitch generic order, user, permission, and action resources into an answer that the backend already understands.

Keep Authority With the Business Rules

The backend decides authorization, workflow rules, current action availability, joins across business data, and the transitions behind buttons and links. Browser code never needs to infer authority from fragments.

The server does not render templates. It defines the business shape that this user can see and act on now.

Give the Frontend Room to Move

The frontend controls rendering, interaction, transitions, layout, local form editing, and movement between views. A coherent state packet frees it to concentrate on those strengths.

The browser stays expressive while one authoritative backend continues to own application behavior.

Stop Partial Truths Before They Reach the User

Cached data from one request, authority from another, workflow state from a third, and locally inferred actions can disagree at the moment of decision.

A page-state response forces one precise question: what can this user see and do on this screen right now? One answer keeps every visible control in the same business moment.

Choose Page State When Workflow Drives the Product

Public integration APIs still benefit from stable resource contracts. Independent clients may share reusable entity models, and long-running offline clients need their own reconciliation strategy.

Page state shines when workflow drives the product: internal tools, business dashboards, operational screens, admin panels, approval flows, and any system where authority and available actions define the page.

Make the Screen a Useful Contract

Classic server pages could ask directly for the data that one page needed. A modern frontend can keep that useful alignment without mixing SQL and HTML or abandoning client-side interaction.

Let the screen name its need. Let the backend answer with the data and actions that belong together. Then let the frontend turn that coherent state into an interface people can trust and use.