diff --git a/client/web/src/api.ts b/client/web/src/api.ts
index 410a71d5e..7b0425d5f 100644
--- a/client/web/src/api.ts
+++ b/client/web/src/api.ts
@@ -1,23 +1,260 @@
 // Copyright (c) Tailscale Inc & AUTHORS
 // SPDX-License-Identifier: BSD-3-Clause
 
-import { SWRConfiguration } from "swr"
+import { useCallback } from "react"
+import useToaster from "src/hooks/toaster"
+import { ExitNode, NodeData, SubnetRoute } from "src/types"
+import { assertNever } from "src/utils/util"
+import { MutatorOptions, SWRConfiguration, useSWRConfig } from "swr"
+import { noExitNode, runAsExitNode } from "./hooks/exit-nodes"
 
 export const swrConfig: SWRConfiguration = {
   fetcher: (url: string) => apiFetch(url, "GET"),
   onError: (err, _) => console.error(err),
 }
 
+type APIType =
+  | { action: "up"; data: TailscaleUpData }
+  | { action: "logout" }
+  | { action: "new-auth-session"; data: AuthSessionNewData }
+  | { action: "update-prefs"; data: LocalPrefsData }
+  | { action: "update-routes"; data: SubnetRoute[] }
+  | { action: "update-exit-node"; data: ExitNode }
+
+/**
+ * POST /api/up data
+ */
+type TailscaleUpData = {
+  Reauthenticate?: boolean // force reauthentication
+  ControlURL?: string
+  AuthKey?: string
+}
+
+/**
+ * GET /api/auth/session/new data
+ */
+type AuthSessionNewData = {
+  authUrl: string
+}
+
+/**
+ * PATCH /api/local/v0/prefs data
+ */
+type LocalPrefsData = {
+  RunSSHSet?: boolean
+  RunSSH?: boolean
+}
+
+/**
+ * POST /api/routes data
+ */
+type RoutesData = {
+  SetExitNode?: boolean
+  SetRoutes?: boolean
+  UseExitNode?: string
+  AdvertiseExitNode?: boolean
+  AdvertiseRoutes?: string[]
+}
+
+/**
+ * useAPI hook returns an api handler that can execute api calls
+ * throughout the web client UI.
+ */
+export function useAPI() {
+  const toaster = useToaster()
+  const { mutate } = useSWRConfig() // allows for global mutation
+
+  const handlePostError = useCallback(
+    (toast?: string) => (err: Error) => {
+      console.error(err)
+      toast && toaster.show({ variant: "danger", message: toast })
+      throw err
+    },
+    [toaster]
+  )
+
+  /**
+   * optimisticMutate wraps the SWR `mutate` function to apply some
+   * type-awareness with the following behavior:
+   *
+   *    1. `optimisticData` update is applied immediately on FetchDataType
+   *       throughout the web client UI.
+   *
+   *    2. `fetch` data mutation runs.
+   *
+   *    3. On completion, FetchDataType is revalidated to exactly reflect the
+   *       updated server state.
+   *
+   * The `key` argument is the useSWR key associated with the MutateDataType.
+   * All `useSWR(key)` consumers throughout the UI will see updates reflected.
+   */
+  const optimisticMutate = useCallback(
+    <MutateDataType, FetchDataType = any>(
+      key: string,
+      fetch: Promise<FetchDataType>,
+      optimisticData: (current: MutateDataType) => MutateDataType
+    ): Promise<FetchDataType | undefined> => {
+      const options: MutatorOptions = {
+        /**
+         * populateCache is meant for use when the remote request returns back
+         * the updated data directly. i.e. When FetchDataType is the same as
+         * MutateDataType. Most of our data manipulation requests return a 200
+         * with empty data on success. We turn off populateCache so that the
+         * cache only gets updated after completion of the remote reqeust when
+         * the revalidation step runs.
+         */
+        populateCache: false,
+        optimisticData,
+      }
+      return mutate(key, fetch, options)
+    },
+    [mutate]
+  )
+
+  const api = useCallback(
+    (t: APIType) => {
+      switch (t.action) {
+        /**
+         * "up" handles authenticating the machine to tailnet.
+         */
+        case "up":
+          return apiFetch<{ url?: string }>("/up", "POST", t.data)
+            .then((d) => d.url && window.open(d.url, "_blank")) // "up" login step
+            .then(() => incrementMetric("web_client_node_connect"))
+            .then(() => mutate("/data"))
+            .catch(handlePostError("Failed to login"))
+
+        /**
+         * "logout" handles logging the node out of tailscale, effectively
+         * expiring its node key.
+         */
+        case "logout":
+          // For logout, must increment metric before running api call,
+          // as tailscaled will be unreachable after the call completes.
+          incrementMetric("web_client_node_disconnect")
+          return apiFetch("/local/v0/logout", "POST").catch(
+            handlePostError("Failed to logout")
+          )
+
+        /**
+         * "new-auth-session" handles creating a new check mode session to
+         * authorize the viewing user to manage the node via the web client.
+         */
+        case "new-auth-session":
+          return apiFetch<AuthSessionNewData>("/auth/session/new", "GET").catch(
+            handlePostError("Failed to create new session")
+          )
+
+        /**
+         * "update-prefs" handles setting the node's tailscale prefs.
+         */
+        case "update-prefs": {
+          return optimisticMutate<NodeData>(
+            "/data",
+            apiFetch<LocalPrefsData>("/local/v0/prefs", "PATCH", t.data),
+            (old) => ({
+              ...old,
+              RunningSSHServer: t.data.RunSSHSet
+                ? Boolean(t.data.RunSSH)
+                : old.RunningSSHServer,
+            })
+          )
+            .then(
+              () =>
+                t.data.RunSSHSet &&
+                incrementMetric(
+                  t.data.RunSSH
+                    ? "web_client_ssh_enable"
+                    : "web_client_ssh_disable"
+                )
+            )
+            .catch(handlePostError("Failed to update node preference"))
+        }
+
+        /**
+         * "update-routes" handles setting the node's advertised routes.
+         */
+        case "update-routes": {
+          const body: RoutesData = {
+            SetRoutes: true,
+            AdvertiseRoutes: t.data.map((r) => r.Route),
+          }
+          return optimisticMutate<NodeData>(
+            "/data",
+            apiFetch<void>("/routes", "POST", body),
+            (old) => ({ ...old, AdvertisedRoutes: t.data })
+          )
+            .then(() => incrementMetric("web_client_advertise_routes_change"))
+            .catch(handlePostError("Failed to update routes"))
+        }
+
+        /**
+         * "update-exit-node" handles updating the node's state as either
+         * running as an exit node or using another node as an exit node.
+         */
+        case "update-exit-node": {
+          const id = t.data.ID
+          const body: RoutesData = {
+            SetExitNode: true,
+          }
+          if (id !== noExitNode.ID && id !== runAsExitNode.ID) {
+            body.UseExitNode = id
+          } else if (id === runAsExitNode.ID) {
+            body.AdvertiseExitNode = true
+          }
+          const metrics: MetricName[] = []
+          return optimisticMutate<NodeData>(
+            "/data",
+            apiFetch<void>("/routes", "POST", body),
+            (old) => {
+              // Only update metrics whose values have changed.
+              if (old.AdvertisingExitNode !== Boolean(body.AdvertiseExitNode)) {
+                metrics.push(
+                  body.AdvertiseExitNode
+                    ? "web_client_advertise_exitnode_enable"
+                    : "web_client_advertise_exitnode_disable"
+                )
+              }
+              if (Boolean(old.UsingExitNode) !== Boolean(body.UseExitNode)) {
+                metrics.push(
+                  body.UseExitNode
+                    ? "web_client_use_exitnode_enable"
+                    : "web_client_use_exitnode_disable"
+                )
+              }
+              return {
+                ...old,
+                UsingExitNode: Boolean(body.UseExitNode) ? t.data : undefined,
+                AdvertisingExitNode: Boolean(body.AdvertiseExitNode),
+              }
+            }
+          )
+            .then(() => metrics.forEach((m) => incrementMetric(m)))
+            .catch(handlePostError("Failed to update exit node"))
+        }
+
+        default:
+          assertNever(t)
+      }
+    },
+    [handlePostError, mutate, optimisticMutate]
+  )
+
+  return api
+}
+
 let csrfToken: string
 let synoToken: string | undefined // required for synology API requests
 let unraidCsrfToken: string | undefined // required for unraid POST requests (#8062)
 
-// apiFetch wraps the standard JS fetch function with csrf header
-// management and param additions specific to the web client.
-//
-// apiFetch adds the `api` prefix to the request URL,
-// so endpoint should be provided without the `api` prefix
-// (i.e. provide `/data` rather than `api/data`).
+/**
+ * apiFetch wraps the standard JS fetch function with csrf header
+ * management and param additions specific to the web client.
+ *
+ * apiFetch adds the `api` prefix to the request URL,
+ * so endpoint should be provided without the `api` prefix
+ * (i.e. provide `/data` rather than `api/data`).
+ */
 export function apiFetch<T>(
   endpoint: string,
   method: "GET" | "POST" | "PATCH",
@@ -73,6 +310,10 @@ export function apiFetch<T>(
         return r.json()
       }
     })
+    .then((r) => {
+      r?.UnraidToken && setUnraidCsrfToken(r.UnraidToken)
+      return r
+    })
 }
 
 function updateCsrfToken(r: Response) {
@@ -86,12 +327,14 @@ export function setSynoToken(token?: string) {
   synoToken = token
 }
 
-export function setUnraidCsrfToken(token?: string) {
+function setUnraidCsrfToken(token?: string) {
   unraidCsrfToken = token
 }
 
-// incrementMetric hits the client metrics local API endpoint to
-// increment the given counter metric by one.
+/**
+ * incrementMetric hits the client metrics local API endpoint to
+ * increment the given counter metric by one.
+ */
 export function incrementMetric(metricName: MetricName) {
   const postData: MetricsPOSTData[] = [
     {
diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index 58769913b..20761a4e4 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Tailscale Inc & AUTHORS
 // SPDX-License-Identifier: BSD-3-Clause
 
-import React, { useEffect } from "react"
+import React from "react"
 import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
 import LoginToggle from "src/components/login-toggle"
 import DeviceDetailsView from "src/components/views/device-details-view"
@@ -11,12 +11,9 @@ import SSHView from "src/components/views/ssh-view"
 import SubnetRouterView from "src/components/views/subnet-router-view"
 import { UpdatingView } from "src/components/views/updating-view"
 import useAuth, { AuthResponse } from "src/hooks/auth"
-import useNodeData, {
-  Feature,
-  featureDescription,
-  NodeData,
-} from "src/hooks/node-data"
+import { Feature, featureDescription, NodeData } from "src/types"
 import LoadingDots from "src/ui/loading-dots"
+import useSWR from "swr"
 import { Link, Route, Router, Switch, useLocation } from "wouter"
 
 export default function App() {
@@ -40,53 +37,38 @@ function WebClient({
   auth: AuthResponse
   newSession: () => Promise<void>
 }) {
-  const { data, refreshData, nodeUpdaters } = useNodeData()
-  useEffect(() => {
-    refreshData()
-  }, [auth, refreshData])
+  const { data: node } = useSWR<NodeData>("/data")
 
-  return !data ? (
+  return !node ? (
     <LoadingView />
-  ) : data.Status === "NeedsLogin" ||
-    data.Status === "NoState" ||
-    data.Status === "Stopped" ? (
+  ) : node.Status === "NeedsLogin" ||
+    node.Status === "NoState" ||
+    node.Status === "Stopped" ? (
     // Client not on a tailnet, render login.
-    <LoginView data={data} refreshData={refreshData} />
+    <LoginView data={node} />
   ) : (
     // Otherwise render the new web client.
     <>
-      <Router base={data.URLPrefix}>
-        <Header node={data} auth={auth} newSession={newSession} />
+      <Router base={node.URLPrefix}>
+        <Header node={node} auth={auth} newSession={newSession} />
         <Switch>
           <Route path="/">
-            <HomeView
-              readonly={!auth.canManageNode}
-              node={data}
-              nodeUpdaters={nodeUpdaters}
-            />
+            <HomeView readonly={!auth.canManageNode} node={node} />
           </Route>
           <Route path="/details">
-            <DeviceDetailsView readonly={!auth.canManageNode} node={data} />
+            <DeviceDetailsView readonly={!auth.canManageNode} node={node} />
           </Route>
-          <FeatureRoute path="/subnets" feature="advertise-routes" node={data}>
-            <SubnetRouterView
-              readonly={!auth.canManageNode}
-              node={data}
-              nodeUpdaters={nodeUpdaters}
-            />
+          <FeatureRoute path="/subnets" feature="advertise-routes" node={node}>
+            <SubnetRouterView readonly={!auth.canManageNode} node={node} />
           </FeatureRoute>
-          <FeatureRoute path="/ssh" feature="ssh" node={data}>
-            <SSHView
-              readonly={!auth.canManageNode}
-              node={data}
-              nodeUpdaters={nodeUpdaters}
-            />
+          <FeatureRoute path="/ssh" feature="ssh" node={node}>
+            <SSHView readonly={!auth.canManageNode} node={node} />
           </FeatureRoute>
           <Route path="/serve">{/* TODO */}Share local content</Route>
-          <FeatureRoute path="/update" feature="auto-update" node={data}>
+          <FeatureRoute path="/update" feature="auto-update" node={node}>
             <UpdatingView
-              versionInfo={data.ClientVersion}
-              currentVersion={data.IPNVersion}
+              versionInfo={node.ClientVersion}
+              currentVersion={node.IPNVersion}
             />
           </FeatureRoute>
           <Route>
@@ -111,7 +93,7 @@ function FeatureRoute({
   children,
 }: {
   path: string
-  node: NodeData // TODO: once we have swr, just call useNodeData within FeatureView
+  node: NodeData
   feature: Feature
   children: React.ReactNode
 }) {
diff --git a/client/web/src/components/control-components.tsx b/client/web/src/components/control-components.tsx
index d961e0684..ffb0a2999 100644
--- a/client/web/src/components/control-components.tsx
+++ b/client/web/src/components/control-components.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
-import { NodeData } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 
 /**
  * AdminContainer renders its contents only if the node's control
diff --git a/client/web/src/components/exit-node-selector.tsx b/client/web/src/components/exit-node-selector.tsx
index 3199ad923..aa8eef018 100644
--- a/client/web/src/components/exit-node-selector.tsx
+++ b/client/web/src/components/exit-node-selector.tsx
@@ -2,32 +2,32 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import cx from "classnames"
-import React, { useCallback, useMemo, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useAPI } from "src/api"
 import { ReactComponent as Check } from "src/assets/icons/check.svg"
 import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
 import useExitNodes, {
-  ExitNode,
   noExitNode,
   runAsExitNode,
   trimDNSSuffix,
 } from "src/hooks/exit-nodes"
-import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import { ExitNode, NodeData } from "src/types"
 import Popover from "src/ui/popover"
 import SearchInput from "src/ui/search-input"
 
 export default function ExitNodeSelector({
   className,
   node,
-  nodeUpdaters,
   disabled,
 }: {
   className?: string
   node: NodeData
-  nodeUpdaters: NodeUpdaters
   disabled?: boolean
 }) {
+  const api = useAPI()
   const [open, setOpen] = useState<boolean>(false)
   const [selected, setSelected] = useState<ExitNode>(toSelectedExitNode(node))
+  useEffect(() => setSelected(toSelectedExitNode(node)), [node])
 
   const handleSelect = useCallback(
     (n: ExitNode) => {
@@ -35,11 +35,9 @@ export default function ExitNodeSelector({
       if (n.ID === selected.ID) {
         return // no update
       }
-      const old = selected
-      setSelected(n) // optimistic UI update
-      nodeUpdaters.postExitNode(n).catch(() => setSelected(old))
+      api({ action: "update-exit-node", data: n })
     },
-    [nodeUpdaters, selected]
+    [api, selected]
   )
 
   const [
diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
index fe0811f14..011aa2f8b 100644
--- a/client/web/src/components/login-toggle.tsx
+++ b/client/web/src/components/login-toggle.tsx
@@ -7,7 +7,7 @@ import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg
 import { ReactComponent as Eye } from "src/assets/icons/eye.svg"
 import { ReactComponent as User } from "src/assets/icons/user.svg"
 import { AuthResponse, AuthType } from "src/hooks/auth"
-import { NodeData } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Popover from "src/ui/popover"
 import ProfilePic from "src/ui/profile-pic"
diff --git a/client/web/src/components/update-available.tsx b/client/web/src/components/update-available.tsx
index 51105876f..f0a284bb3 100644
--- a/client/web/src/components/update-available.tsx
+++ b/client/web/src/components/update-available.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
-import { VersionInfo } from "src/hooks/self-update"
+import { VersionInfo } from "src/types"
 import Button from "src/ui/button"
 import { useLocation } from "wouter"
 
diff --git a/client/web/src/components/views/device-details-view.tsx b/client/web/src/components/views/device-details-view.tsx
index 83f431a4a..eb54d9b77 100644
--- a/client/web/src/components/views/device-details-view.tsx
+++ b/client/web/src/components/views/device-details-view.tsx
@@ -3,12 +3,12 @@
 
 import cx from "classnames"
 import React from "react"
-import { apiFetch, incrementMetric } from "src/api"
+import { useAPI } from "src/api"
 import ACLTag from "src/components/acl-tag"
 import * as Control from "src/components/control-components"
 import NiceIP from "src/components/nice-ip"
 import { UpdateAvailableNotification } from "src/components/update-available"
-import { NodeData } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import QuickCopy from "src/ui/quick-copy"
 import { useLocation } from "wouter"
@@ -20,6 +20,7 @@ export default function DeviceDetailsView({
   readonly: boolean
   node: NodeData
 }) {
+  const api = useAPI()
   const [, setLocation] = useLocation()
 
   return (
@@ -40,13 +41,9 @@ export default function DeviceDetailsView({
             {!readonly && (
               <Button
                 sizeVariant="small"
-                onClick={() => {
-                  // increment metrics before logout as we don't gracefully handle disconnect currently
-                  incrementMetric("web_client_node_disconnect")
-                  apiFetch("/local/v0/logout", "POST")
-                    .then(() => setLocation("/"))
-                    .catch((err) => alert("Logout failed: " + err.message))
-                }}
+                onClick={() =>
+                  api({ action: "logout" }).then(() => setLocation("/"))
+                }
               >
                 Disconnect…
               </Button>
diff --git a/client/web/src/components/views/home-view.tsx b/client/web/src/components/views/home-view.tsx
index 97eb9ebb2..26ec466d5 100644
--- a/client/web/src/components/views/home-view.tsx
+++ b/client/web/src/components/views/home-view.tsx
@@ -8,18 +8,16 @@ import { ReactComponent as ArrowRight } from "src/assets/icons/arrow-right.svg"
 import { ReactComponent as Machine } from "src/assets/icons/machine.svg"
 import AddressCard from "src/components/address-copy-card"
 import ExitNodeSelector from "src/components/exit-node-selector"
-import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import { pluralize } from "src/utils/util"
 import { Link, useLocation } from "wouter"
 
 export default function HomeView({
   readonly,
   node,
-  nodeUpdaters,
 }: {
   readonly: boolean
   node: NodeData
-  nodeUpdaters: NodeUpdaters
 }) {
   const [allSubnetRoutes, pendingSubnetRoutes] = useMemo(
     () => [
@@ -62,12 +60,7 @@ export default function HomeView({
         </div>
         {(node.Features["advertise-exit-node"] ||
           node.Features["use-exit-node"]) && (
-          <ExitNodeSelector
-            className="mb-5"
-            node={node}
-            nodeUpdaters={nodeUpdaters}
-            disabled={readonly}
-          />
+          <ExitNodeSelector className="mb-5" node={node} disabled={readonly} />
         )}
         <Link
           className="link font-medium"
diff --git a/client/web/src/components/views/login-view.tsx b/client/web/src/components/views/login-view.tsx
index 8537a662d..257412a04 100644
--- a/client/web/src/components/views/login-view.tsx
+++ b/client/web/src/components/views/login-view.tsx
@@ -1,10 +1,10 @@
 // Copyright (c) Tailscale Inc & AUTHORS
 // SPDX-License-Identifier: BSD-3-Clause
 
-import React, { useCallback, useState } from "react"
-import { apiFetch, incrementMetric } from "src/api"
+import React, { useState } from "react"
+import { useAPI } from "src/api"
 import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
-import { NodeData } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Collapsible from "src/ui/collapsible"
 import Input from "src/ui/input"
@@ -13,26 +13,11 @@ import Input from "src/ui/input"
  * LoginView is rendered when the client is not authenticated
  * to a tailnet.
  */
-export default function LoginView({
-  data,
-  refreshData,
-}: {
-  data: NodeData
-  refreshData: () => void
-}) {
+export default function LoginView({ data }: { data: NodeData }) {
+  const api = useAPI()
   const [controlURL, setControlURL] = useState<string>("")
   const [authKey, setAuthKey] = useState<string>("")
 
-  const login = useCallback(
-    (opt: TailscaleUpOptions) => {
-      tailscaleUp(opt).then(() => {
-        incrementMetric("web_client_node_connect")
-        refreshData()
-      })
-    },
-    [refreshData]
-  )
-
   return (
     <div className="mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
       <TailscaleIcon className="my-2 mb-8" />
@@ -45,7 +30,7 @@ export default function LoginView({
             </p>
           </div>
           <Button
-            onClick={() => login({})}
+            onClick={() => api({ action: "up", data: {} })}
             className="w-full mb-4"
             intent="primary"
           >
@@ -70,7 +55,9 @@ export default function LoginView({
             </p>
           </div>
           <Button
-            onClick={() => login({ Reauthenticate: true })}
+            onClick={() =>
+              api({ action: "up", data: { Reauthenticate: true } })
+            }
             className="w-full mb-4"
             intent="primary"
           >
@@ -97,10 +84,13 @@ export default function LoginView({
           </div>
           <Button
             onClick={() =>
-              login({
-                Reauthenticate: true,
-                ControlURL: controlURL,
-                AuthKey: authKey,
+              api({
+                action: "up",
+                data: {
+                  Reauthenticate: true,
+                  ControlURL: controlURL,
+                  AuthKey: authKey,
+                },
               })
             }
             className="w-full mb-4"
@@ -141,19 +131,3 @@ export default function LoginView({
     </div>
   )
 }
-
-type TailscaleUpOptions = {
-  Reauthenticate?: boolean // force reauthentication
-  ControlURL?: string
-  AuthKey?: string
-}
-
-function tailscaleUp(options: TailscaleUpOptions) {
-  return apiFetch<{ url?: string }>("/up", "POST", options)
-    .then((d) => {
-      d.url && window.open(d.url, "_blank")
-    })
-    .catch((e) => {
-      console.error("Failed to login:", e)
-    })
-}
diff --git a/client/web/src/components/views/ssh-view.tsx b/client/web/src/components/views/ssh-view.tsx
index 0ec0946f2..60c7c7bc2 100644
--- a/client/web/src/components/views/ssh-view.tsx
+++ b/client/web/src/components/views/ssh-view.tsx
@@ -2,20 +2,21 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
+import { useAPI } from "src/api"
 import * as Control from "src/components/control-components"
-import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Card from "src/ui/card"
 import Toggle from "src/ui/toggle"
 
 export default function SSHView({
   readonly,
   node,
-  nodeUpdaters,
 }: {
   readonly: boolean
   node: NodeData
-  nodeUpdaters: NodeUpdaters
 }) {
+  const api = useAPI()
+
   return (
     <>
       <h1 className="mb-1">Tailscale SSH server</h1>
@@ -36,9 +37,12 @@ export default function SSHView({
           <Toggle
             checked={node.RunningSSHServer}
             onChange={() =>
-              nodeUpdaters.patchPrefs({
-                RunSSHSet: true,
-                RunSSH: !node.RunningSSHServer,
+              api({
+                action: "update-prefs",
+                data: {
+                  RunSSHSet: true,
+                  RunSSH: !node.RunningSSHServer,
+                },
               })
             }
             disabled={readonly}
diff --git a/client/web/src/components/views/subnet-router-view.tsx b/client/web/src/components/views/subnet-router-view.tsx
index b1b81f953..7e76474fe 100644
--- a/client/web/src/components/views/subnet-router-view.tsx
+++ b/client/web/src/components/views/subnet-router-view.tsx
@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { useCallback, useMemo, useState } from "react"
+import { useAPI } from "src/api"
 import { ReactComponent as CheckCircle } from "src/assets/icons/check-circle.svg"
 import { ReactComponent as Clock } from "src/assets/icons/clock.svg"
 import { ReactComponent as Plus } from "src/assets/icons/plus.svg"
 import * as Control from "src/components/control-components"
-import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Card from "src/ui/card"
 import EmptyState from "src/ui/empty-state"
@@ -15,12 +16,11 @@ import Input from "src/ui/input"
 export default function SubnetRouterView({
   readonly,
   node,
-  nodeUpdaters,
 }: {
   readonly: boolean
   node: NodeData
-  nodeUpdaters: NodeUpdaters
 }) {
+  const api = useAPI()
   const [advertisedRoutes, hasRoutes, hasUnapprovedRoutes] = useMemo(() => {
     const routes = node.AdvertisedRoutes || []
     return [routes, routes.length > 0, routes.find((r) => !r.Approved)]
@@ -70,12 +70,15 @@ export default function SubnetRouterView({
               <Button
                 intent="primary"
                 onClick={() =>
-                  nodeUpdaters
-                    .postSubnetRoutes([
-                      ...advertisedRoutes.map((r) => r.Route),
-                      ...inputText.split(","),
-                    ])
-                    .then(resetInput)
+                  api({
+                    action: "update-routes",
+                    data: [
+                      ...advertisedRoutes,
+                      ...inputText
+                        .split(",")
+                        .map((r) => ({ Route: r, Approved: false })),
+                    ],
+                  }).then(resetInput)
                 }
                 disabled={!inputText}
               >
@@ -124,11 +127,12 @@ export default function SubnetRouterView({
                       <Button
                         sizeVariant="small"
                         onClick={() =>
-                          nodeUpdaters.postSubnetRoutes(
-                            advertisedRoutes
-                              .map((it) => it.Route)
-                              .filter((it) => it !== r.Route)
-                          )
+                          api({
+                            action: "update-routes",
+                            data: advertisedRoutes.filter(
+                              (it) => it.Route !== r.Route
+                            ),
+                          })
                         }
                       >
                         Stop advertising…
diff --git a/client/web/src/components/views/updating-view.tsx b/client/web/src/components/views/updating-view.tsx
index b6c76d072..63b9090c0 100644
--- a/client/web/src/components/views/updating-view.tsx
+++ b/client/web/src/components/views/updating-view.tsx
@@ -5,11 +5,8 @@ import React from "react"
 import { ReactComponent as CheckCircleIcon } from "src/assets/icons/check-circle.svg"
 import { ReactComponent as XCircleIcon } from "src/assets/icons/x-circle.svg"
 import { ChangelogText } from "src/components/update-available"
-import {
-  UpdateState,
-  useInstallUpdate,
-  VersionInfo,
-} from "src/hooks/self-update"
+import { UpdateState, useInstallUpdate } from "src/hooks/self-update"
+import { VersionInfo } from "src/types"
 import Button from "src/ui/button"
 import Spinner from "src/ui/spinner"
 import { useLocation } from "wouter"
diff --git a/client/web/src/hooks/exit-nodes.ts b/client/web/src/hooks/exit-nodes.ts
index c488bf690..b3ce0a9fa 100644
--- a/client/web/src/hooks/exit-nodes.ts
+++ b/client/web/src/hooks/exit-nodes.ts
@@ -1,44 +1,18 @@
 // Copyright (c) Tailscale Inc & AUTHORS
 // SPDX-License-Identifier: BSD-3-Clause
 
-import { useEffect, useMemo, useState } from "react"
-import { apiFetch } from "src/api"
-import { NodeData } from "src/hooks/node-data"
-
-export type ExitNode = {
-  ID: string
-  Name: string
-  Location?: ExitNodeLocation
-  Online?: boolean
-}
-
-type ExitNodeLocation = {
-  Country: string
-  CountryCode: CountryCode
-  City: string
-  CityCode: CityCode
-  Priority: number
-}
-
-type CountryCode = string
-type CityCode = string
-
-export type ExitNodeGroup = {
-  id: string
-  name?: string
-  nodes: ExitNode[]
-}
+import { useMemo } from "react"
+import {
+  CityCode,
+  CountryCode,
+  ExitNode,
+  ExitNodeLocation,
+  NodeData,
+} from "src/types"
+import useSWR from "swr"
 
 export default function useExitNodes(node: NodeData, filter?: string) {
-  const [data, setData] = useState<ExitNode[]>([])
-
-  useEffect(() => {
-    apiFetch<ExitNode[]>("/exit-nodes", "GET")
-      .then((r) => setData(r))
-      .catch((err) => {
-        alert("Failed operation: " + err.message)
-      })
-  }, [])
+  const { data } = useSWR<ExitNode[]>("/exit-nodes")
 
   const { tailnetNodesSorted, locationNodesMap } = useMemo(() => {
     // First going through exit nodes and splitting them into two groups:
diff --git a/client/web/src/hooks/node-data.ts b/client/web/src/hooks/node-data.ts
deleted file mode 100644
index f0237a6d1..000000000
--- a/client/web/src/hooks/node-data.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-// Copyright (c) Tailscale Inc & AUTHORS
-// SPDX-License-Identifier: BSD-3-Clause
-
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { apiFetch, incrementMetric, setUnraidCsrfToken } from "src/api"
-import { ExitNode, noExitNode, runAsExitNode } from "src/hooks/exit-nodes"
-import { VersionInfo } from "src/hooks/self-update"
-import { assertNever } from "src/utils/util"
-import useSWR from "swr"
-
-export type NodeData = {
-  Profile: UserProfile
-  Status: NodeState
-  DeviceName: string
-  OS: string
-  IPv4: string
-  IPv6: string
-  ID: string
-  KeyExpiry: string
-  KeyExpired: boolean
-  UsingExitNode?: ExitNode
-  AdvertisingExitNode: boolean
-  AdvertisedRoutes?: SubnetRoute[]
-  TUNMode: boolean
-  IsSynology: boolean
-  DSMVersion: number
-  IsUnraid: boolean
-  UnraidToken: string
-  IPNVersion: string
-  ClientVersion?: VersionInfo
-  URLPrefix: string
-  DomainName: string
-  TailnetName: string
-  IsTagged: boolean
-  Tags: string[]
-  RunningSSHServer: boolean
-  ControlAdminURL: string
-  LicensesURL: string
-  Features: { [key in Feature]: boolean } // value is true if given feature is available on this client
-  ACLAllowsAnyIncomingTraffic: boolean
-}
-
-type NodeState =
-  | "NoState"
-  | "NeedsLogin"
-  | "NeedsMachineAuth"
-  | "Stopped"
-  | "Starting"
-  | "Running"
-
-export type UserProfile = {
-  LoginName: string
-  DisplayName: string
-  ProfilePicURL: string
-}
-
-export type SubnetRoute = {
-  Route: string
-  Approved: boolean
-}
-
-export type Feature =
-  | "advertise-exit-node"
-  | "advertise-routes"
-  | "use-exit-node"
-  | "ssh"
-  | "auto-update"
-
-export const featureDescription = (f: Feature) => {
-  switch (f) {
-    case "advertise-exit-node":
-      return "Advertising as an exit node"
-    case "advertise-routes":
-      return "Advertising subnet routes"
-    case "use-exit-node":
-      return "Using an exit node"
-    case "ssh":
-      return "Running a Tailscale SSH server"
-    case "auto-update":
-      return "Auto updating client versions"
-    default:
-      assertNever(f)
-  }
-}
-
-/**
- * NodeUpdaters provides a set of mutation functions for a node.
- *
- * These functions handle both making the requested change, as well as
- * refreshing the app's node data state upon completion to reflect any
- * relevant changes in the UI.
- */
-export type NodeUpdaters = {
-  /**
-   * patchPrefs updates node preferences.
-   * Only provided preferences will be updated.
-   * Similar to running the tailscale set command in the CLI.
-   */
-  patchPrefs: (d: PrefsPATCHData) => Promise<void>
-  /**
-   * postExitNode updates the node's status as either using or
-   * running as an exit node.
-   */
-  postExitNode: (d: ExitNode) => Promise<void>
-  /**
-   * postSubnetRoutes updates the node's advertised subnet routes.
-   */
-  postSubnetRoutes: (d: string[]) => Promise<void>
-}
-
-type PrefsPATCHData = {
-  RunSSHSet?: boolean
-  RunSSH?: boolean
-}
-
-type RoutesPOSTData = {
-  UseExitNode?: string
-  AdvertiseExitNode?: boolean
-  AdvertiseRoutes?: string[]
-}
-
-// useNodeData returns basic data about the current node.
-export default function useNodeData() {
-  const { data, mutate } = useSWR<NodeData>("/data")
-  const [isPosting, setIsPosting] = useState<boolean>(false)
-
-  useEffect(
-    () => setUnraidCsrfToken(data?.IsUnraid ? data.UnraidToken : undefined),
-    [data]
-  )
-
-  const prefsPATCH = useCallback(
-    (d: PrefsPATCHData) => {
-      setIsPosting(true)
-      if (data) {
-        const optimisticUpdates = data
-        if (d.RunSSHSet) {
-          optimisticUpdates.RunningSSHServer = Boolean(d.RunSSH)
-        }
-        // Reflect the pref change immediatley on the frontend,
-        // then make the prefs PATCH. If the request fails,
-        // data will be updated to it's previous value in
-        // onComplete below.
-        mutate(optimisticUpdates, false)
-      }
-
-      const onComplete = () => {
-        setIsPosting(false)
-        mutate() // refresh data after PATCH finishes
-      }
-      const updateMetrics = () => {
-        // only update metrics if values have changed
-        if (data?.RunningSSHServer !== d.RunSSH) {
-          incrementMetric(
-            d.RunSSH ? "web_client_ssh_enable" : "web_client_ssh_disable"
-          )
-        }
-      }
-
-      return apiFetch("/local/v0/prefs", "PATCH", d)
-        .then(() => {
-          updateMetrics()
-          onComplete()
-        })
-        .catch((err) => {
-          onComplete()
-          alert("Failed to update prefs")
-          throw err
-        })
-    },
-    [data, mutate]
-  )
-
-  const routesPOST = useCallback(
-    (d: RoutesPOSTData) => {
-      setIsPosting(true)
-      const onComplete = () => {
-        setIsPosting(false)
-        mutate() // refresh data after POST finishes
-      }
-      const updateMetrics = () => {
-        // only update metrics if values have changed
-        if (data?.AdvertisingExitNode !== d.AdvertiseExitNode) {
-          incrementMetric(
-            d.AdvertiseExitNode
-              ? "web_client_advertise_exitnode_enable"
-              : "web_client_advertise_exitnode_disable"
-          )
-        }
-        // useExitNode is the ID of the exit node to use
-        if (data?.UsingExitNode?.ID !== d.UseExitNode) {
-          incrementMetric(
-            d.UseExitNode
-              ? "web_client_use_exitnode_enable"
-              : "web_client_use_exitnode_disable"
-          )
-        }
-      }
-
-      return apiFetch("/routes", "POST", d)
-        .then(() => {
-          updateMetrics()
-          onComplete()
-        })
-        .catch((err) => {
-          onComplete()
-          alert("Failed to update routes")
-          throw err
-        })
-    },
-    [mutate, data?.AdvertisingExitNode, data?.UsingExitNode?.ID]
-  )
-
-  const nodeUpdaters: NodeUpdaters = useMemo(
-    () => ({
-      patchPrefs: prefsPATCH,
-      postExitNode: (node) =>
-        routesPOST({
-          AdvertiseExitNode: node.ID === runAsExitNode.ID,
-          UseExitNode:
-            node.ID === noExitNode.ID || node.ID === runAsExitNode.ID
-              ? undefined
-              : node.ID,
-          AdvertiseRoutes: data?.AdvertisedRoutes?.map((r) => r.Route), // unchanged
-        }),
-      postSubnetRoutes: (routes) =>
-        routesPOST({
-          AdvertiseRoutes: routes,
-          AdvertiseExitNode: data?.AdvertisingExitNode, // unchanged
-          UseExitNode: data?.UsingExitNode?.ID, // unchanged
-        }).then(() => incrementMetric("web_client_advertise_routes_change")),
-    }),
-    [
-      data?.AdvertisingExitNode,
-      data?.AdvertisedRoutes,
-      data?.UsingExitNode?.ID,
-      prefsPATCH,
-      routesPOST,
-    ]
-  )
-
-  return { data, refreshData: mutate, nodeUpdaters, isPosting }
-}
diff --git a/client/web/src/hooks/self-update.ts b/client/web/src/hooks/self-update.ts
index 6fd6ab44c..eb10463c1 100644
--- a/client/web/src/hooks/self-update.ts
+++ b/client/web/src/hooks/self-update.ts
@@ -3,13 +3,7 @@
 
 import { useCallback, useEffect, useState } from "react"
 import { apiFetch } from "src/api"
-
-// this type is deserialized from tailcfg.ClientVersion,
-// so it should not include fields not included in that type.
-export type VersionInfo = {
-  RunningLatest: boolean
-  LatestVersion?: string
-}
+import { VersionInfo } from "src/types"
 
 // see ipnstate.UpdateProgress
 export type UpdateProgress = {
diff --git a/client/web/src/types.ts b/client/web/src/types.ts
new file mode 100644
index 000000000..bd72935ee
--- /dev/null
+++ b/client/web/src/types.ts
@@ -0,0 +1,112 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+
+import { assertNever } from "src/utils/util"
+
+export type NodeData = {
+  Profile: UserProfile
+  Status: NodeState
+  DeviceName: string
+  OS: string
+  IPv4: string
+  IPv6: string
+  ID: string
+  KeyExpiry: string
+  KeyExpired: boolean
+  UsingExitNode?: ExitNode
+  AdvertisingExitNode: boolean
+  AdvertisedRoutes?: SubnetRoute[]
+  TUNMode: boolean
+  IsSynology: boolean
+  DSMVersion: number
+  IsUnraid: boolean
+  UnraidToken: string
+  IPNVersion: string
+  ClientVersion?: VersionInfo
+  URLPrefix: string
+  DomainName: string
+  TailnetName: string
+  IsTagged: boolean
+  Tags: string[]
+  RunningSSHServer: boolean
+  ControlAdminURL: string
+  LicensesURL: string
+  Features: { [key in Feature]: boolean } // value is true if given feature is available on this client
+  ACLAllowsAnyIncomingTraffic: boolean
+}
+
+export type NodeState =
+  | "NoState"
+  | "NeedsLogin"
+  | "NeedsMachineAuth"
+  | "Stopped"
+  | "Starting"
+  | "Running"
+
+export type UserProfile = {
+  LoginName: string
+  DisplayName: string
+  ProfilePicURL: string
+}
+
+export type SubnetRoute = {
+  Route: string
+  Approved: boolean
+}
+
+export type ExitNode = {
+  ID: string
+  Name: string
+  Location?: ExitNodeLocation
+  Online?: boolean
+}
+
+export type ExitNodeLocation = {
+  Country: string
+  CountryCode: CountryCode
+  City: string
+  CityCode: CityCode
+  Priority: number
+}
+
+export type CountryCode = string
+export type CityCode = string
+
+export type ExitNodeGroup = {
+  id: string
+  name?: string
+  nodes: ExitNode[]
+}
+
+export type Feature =
+  | "advertise-exit-node"
+  | "advertise-routes"
+  | "use-exit-node"
+  | "ssh"
+  | "auto-update"
+
+export const featureDescription = (f: Feature) => {
+  switch (f) {
+    case "advertise-exit-node":
+      return "Advertising as an exit node"
+    case "advertise-routes":
+      return "Advertising subnet routes"
+    case "use-exit-node":
+      return "Using an exit node"
+    case "ssh":
+      return "Running a Tailscale SSH server"
+    case "auto-update":
+      return "Auto updating client versions"
+    default:
+      assertNever(f)
+  }
+}
+
+/**
+ * VersionInfo type is deserialized from tailcfg.ClientVersion,
+ * so it should not include fields not included in that type.
+ */
+export type VersionInfo = {
+  RunningLatest: boolean
+  LatestVersion?: string
+}
diff --git a/client/web/web.go b/client/web/web.go
index 812bfe9b1..c592a4155 100644
--- a/client/web/web.go
+++ b/client/web/web.go
@@ -745,9 +745,11 @@ func (s *Server) serveGetExitNodes(w http.ResponseWriter, r *http.Request) {
 }
 
 type postRoutesRequest struct {
+	SetExitNode       bool // when set, UseExitNode and AdvertiseExitNode values are applied
+	SetRoutes         bool // when set, AdvertiseRoutes value is applied
 	UseExitNode       tailcfg.StableNodeID
-	AdvertiseRoutes   []string
 	AdvertiseExitNode bool
+	AdvertiseRoutes   []string
 }
 
 func (s *Server) servePostRoutes(w http.ResponseWriter, r *http.Request) {
@@ -758,6 +760,27 @@ func (s *Server) servePostRoutes(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
+	prefs, err := s.lc.GetPrefs(r.Context())
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	var currNonExitRoutes []string
+	var currAdvertisingExitNode bool
+	for _, r := range prefs.AdvertiseRoutes {
+		if r == exitNodeRouteV4 || r == exitNodeRouteV6 {
+			currAdvertisingExitNode = true
+			continue
+		}
+		currNonExitRoutes = append(currNonExitRoutes, r.String())
+	}
+	// Set non-edited fields to their current values.
+	if data.SetExitNode {
+		data.AdvertiseRoutes = currNonExitRoutes
+	} else if data.SetRoutes {
+		data.AdvertiseExitNode = currAdvertisingExitNode
+		data.UseExitNode = prefs.ExitNodeID
+	}
 
 	// Calculate routes.
 	routesStr := strings.Join(data.AdvertiseRoutes, ",")