TinyBase 架构选项全解析：从独立内存 Store 到云端同步的七种数据架构方案-北京尧图网络

数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载TinyBase 是一个运行在 JavaScript 环境浏览器、Worker、Node 等中的内存式响应式数据存储它本身并不负责数据的长期保存。本指南基于 TinyBase 官方《Architectural Options》文档系统梳理在真实应用中可以采用的七种架构方案从最简单的纯内存独立使用到通过 Persister 接入只读云端数据、浏览器存储、客户端数据库再到借助 MergeableStore 与 Synchronizer 实现客户端间、客户端与服务端之间的双向同步以及接入 Yjs、Automerge 等第三方同步平台。读完本文你将能根据应用的数据形态、离线需求与协作规模为自己的 TinyBase 应用选择或组合最合适的持久化与同步架构。阅读提示本文涉及的多数组件均有对应的源码实现与文档文中会给出仓库内的相对路径以便深入研读以下架构图均来自仓库根目录的arch*.svg文件。0. 独立使用Standalone TinyBase这是最朴素的架构应用启动时创建一个 TinyBaseStore运行期间数据被写入、更新并驱动 UI 渲染一旦页面刷新或应用关闭所有数据随之丢失。独立使用 TinyBase 的架构示意优点搭建极其简单非常适合小型应用的快速原型验证。缺点体验是瞬态的——用户刷新浏览器或稍后再次访问时之前的数据不会重现。TinyBase 仓库中的 Todo App v1 系列 demo见 site/demos/03_todo/v1.md就是这种开箱即用、不做任何持久化的典型示例。值得注意的是从源码看Store本身就是纯粹的内存数据结构在 createCustomPersister 中所有持久化能力都是通过外挂的 Persister 实现的Store 本身并不感知存储层的存在这也正是后面几种架构可以随意叠加的基础。1. 只读云端数据Read-Only Cloud Data在独立方案之上最简单的一步增强应用启动时用 TinyBase 的**持久化框架Persister**从服务器拉取数据装入Store。这适合数据以只读为主、体积小到能放进内存、且启动时加载足够快的数据型 / 参考型应用。从云端只读加载数据的架构示意优点搭建相对简单适合数据中心的展示型应用。缺点数据不可交互——或者说本地做的修改不会被保存当数据规模增长到挑战浏览器内存、或启动等待时间过长时就需要考虑本地持久化与分页方案。仓库中的 Movie Databasesite/demos/07_movie_database.md、Word Frequencies、Car Analysis、City Database 等 demo 都是这类只读应用的范例各自侧重 TinyBase 框架的不同能力Countries demo 也会从服务器加载其中一个 Store 的数据。负责从服务器拉取数据的接口是RemotePersister创建函数为createRemotePersister实现在 src/persisters/persister-remote/index.ts。从源码可以看清它的工作方式拉取数据时它把上次响应的ETag通过If-None-Match请求头带给服务器src/persisters/persister-remote/index.ts#L13-L21服务器返回304 Not Modified时直接复用本地缓存内容避免重复传输。监听远端变化时它每隔autoLoadIntervalSeconds默认 5 秒创建函数的第 4 个参数用HEAD请求探测一次 ETag 是否变化变了才触发重载src/persisters/persister-remote/index.ts#L67-L103。RemotePersister其实也支持把数据写回服务器save用POST提交整份内容但对绝大多数场景文档明确建议如果多个客户端都要编辑数据应改用后面介绍的 Synchronizer以避免写冲突。2. 浏览器存储Browser Storage把数据持久化到浏览器的存储中是另一种升级独立体验的方式数据或状态可以在页面重载、甚至跨会话返回时被保留。这是一种基本的仅本地local-only方案。浏览器本地存储的架构示意优点数据与状态能够在刷新、重开之间得到持久化。缺点数据只存在于某一台设备的某一个浏览器中且根据所用存储类型数据可能被浏览器限制容量甚至在存储压力下被驱逐evict。对应的接口包括SessionPersister、LocalPersister以及自 v6.7 起新增的OpfsPersister基于浏览器 Origin Private File System。它们的实现都集中在 src/persisters/persister-browser/index.tscreateLocalPersister/createSessionPersister本质是把 Store 序列化为 JSON 字符串分别写入localStorage/sessionStorage同时监听window上的storage事件实现同一浏览器不同标签页间自动同步src/persisters/persister-browser/index.ts#L31-L95。createOpfsPersister接收一个FileSystemFileHandle用createWritable()写入文件并通过FileSystemObserver观察外部对文件的修改src/persisters/persister-browser/index.ts#L97-L147容量与持久性都优于传统 Web Storage。Todo App v1 与 v3persistencedemo 是这个方案的起步范例。无论哪种 Persister都共享同一套由 createCustomPersister 提供的生命周期startAutoLoad/startAutoSave/startAutoPersisting以及Idle、Loading、Saving三态状态机src/persisters/common/create.ts#L47-L57这保证了后续所有存储方案的操作方式完全一致。3. 客户端数据库存储Client Database Storage除浏览器原生存储外如今在浏览器里还可以运行更完整的客户端数据库例如 SQLite 或 PGlite。这类方案通常依赖WASM 包提供数据库能力底层数据仍落在 IndexedDB 或 OPFS 中部分客户端环境如 React Native、Node、Bun也可能原生提供同类数据库运行时。浏览器内数据库存储的架构示意TinyBase 可以把自己的数据持久化到这类关系型数据库中有两种映射模式要么序列化为 JSON放进单行要么表格化映射——让 TinyBase 的表直接对应数据库表。优点持久化更结构化被浏览器驱逐的可能性更低关系型数据还可以脱离 TinyBase、直接用 SQL 查询或更新TinyBase 仍会对这些外部变化做出响应。缺点浏览器里需要加载 WASM 运行时增大资源体积部分这类客户端方案仍偏年轻、偏实验性。对应的浏览器端数据库接口主要有SqliteWasmPersister与PglitePersister另有面向 Expo 型 React Native 工程的ExpoSqlitePersister。它们的底层实现分别见 src/persisters/persister-sqlite-wasm/index.ts通过sqlite3_update_hook监听数据库变更与 src/persisters/persister-pglite/index.ts通过pglite.listen订阅变更。更完整的模式说明DpcJsonJSON 序列化、DpcTabular表格映射、condition子集加载、稀疏表与稠密表的往返转换等见数据库持久化指南其中也列出了 Nodesqlite3 / better-sqlite3、Bun、Capacitor、Supabase 等十余种 SQLite / PostgreSQL 系 Persister 的选型表。4. 仅客户端同步Client-Only Synchronization无论选择哪种客户端存储只要涉及单用户多设备或多用户共享数据就需要在客户端之间同步数据。这一步的关键是把数据放进 TinyBase 的MergeableStoreStore 的子类型会为每次变更记录元数据从而支持确定性的冲突合并然后每个客户端用Synchronizer例如基于 WebSocket 的WsSynchronizer与其他客户端协商变更。WebSocket 需要一个轻量级服务器来转发、广播客户端之间的消息。客户端间通过服务器转发同步的架构示意优点用户可以在设备间、或彼此之间共享数据叠加客户端存储后还能支持离线使用并在恢复连接后最终收敛eventual reconciliation。缺点技术上不存在权威数据源source of truth每个客户端都靠协商合并彼此的变化如果所有设备同时清空了各自的客户端存储数据就会丢失。TinyBase 自带的同步服务器接口是WsServer创建函数createWsServer实现在 src/synchronizers/synchronizer-ws-server/index.ts。Todo App v6collaborationdemosite/demos/03_todo/v6.md展示了最简单形态的服务端——它只做消息中转不保存数据副本import {WsServer} from tinybase/synchronizers/synchronizer-ws-server; const server createWsServer(new ws.WebSocketServer({port: 8043}));在仅客户端同步模式下createWsServer不提供第二个参数服务器不落盘协议层见 src/synchronizers/common.ts通过 HLC 时间戳与内容哈希hash tree比对来确定增量并内置了消息分片fragment、缓冲与背压保护如单条 WebSocket 负载上限MAX_WEBSOCKET_BUFFER_SIZE 16MB等机制。更系统的说明见同步指南。5. 客户端-服务端同步Client-Server Synchronization从仅客户端同步再往前走一步把服务器存储加入进来即可消除所有客户端同时清空本地数据导致丢失的风险。在这种架构中同步服务器原本只负责在客户端之间转发消息自己也扮演一个客户端——它在内存里持有 TinyBaseMergeableStore实例并把这个实例持久化到服务器端的存储方案中如 SQLite、PostgreSQL、文件系统或 Cloudflare Durable Object。客户端与服务器双向同步并落盘的架构示意优点服务器可以充当比客户端更持久的权威数据源身份认证与数据完整性也更容易落实。缺点唯一的小代价是服务器需要在内存里保留一份 Store 副本因此默认实现会在客户端连接 / 断开时把数据从持久化存储中换入换出page in / out。实现上createWsServer的第二个参数createPersisterForPath就是为这条路准备的它为每个路径path创建一个关联到服务端存储的 Persister。从 src/synchronizers/synchronizer-ws-server/index.ts#L122-L139 可见其签名返回的 Persister 既可以是Sqlite3Persister、PostgresPersister等标准实现也可以是[persister, then]元组形式then用于在启动完成后拿到 MergeableStore 做自定义处理。服务端客户端的启动流程startServerClientsrc/synchronizers/synchronizer-ws-server/index.ts#L245-L254依次执行await persister.startAutoLoad(); await persister.startAutoSave(); await synchronizer.startSync();一个可靠的一体化选择是在 Cloudflare 上同时运行同步与存储Cloudflare Durable Objects 方案也可以尝试create-tinybase工具中的 Durable Objects 选项。6. 第三方同步Third-Party Synchronization为了完整性TinyBase 还可以与第三方数据库 / 同步平台集成这种情况下TinyBase 只需在本地持久化数据由第三方服务负责把数据同步到服务器或云服务。此外TinyBase 也能通过YjsPersister与AutomergePersister两个接口把数据持久化到另外两个开源 CRDT 解决方案Yjs 与 Automerge中。接入第三方同步平台的架构示意优点可以把 TinyBase 接入已经在使用第三方同步平台的应用反过来也能把选择哪种同步平台抽象在统一的 TinyBase API 之后避免供应商锁定vendor lock-in。缺点增加了额外的活动部件、依赖库商业服务还可能按用量产生费用。相关接口包括ElectricSqlPersister、PowerSyncPersister、LibSqlPersisterTurso等它们的 API 与其他 SQLite / PostgreSQL 系 Persister 保持一致详见数据库持久化指南。源码实现上Yjs 与 Automerge 两个接口分别见 src/persisters/persister-yjs/index.ts 与 src/persisters/persister-automerge/index.ts——前者把 Store 内容映射为 Yjs 的YMap结构后者把内容写入 Automerge 的文档对象并监听change事件都是本地持久化外部引擎同步的典型形态。混合使用Mix It Up!以上七种选项并不互斥完全可以按需混搭一个应用里也可以同时存在多个 Store各自采用不同的持久化与同步策略。例如一个复杂应用可能有多种不同用途的 TinyBase Store瞬态状态只在内存中、不跨会话保留视图 / 路由 / 设置存放在浏览器的本地存储中参考数据启动时从服务器读入之后存入客户端数据库以加速后续加载用户文档在客户端与服务器之间同步由服务器作为权威数据源持久化。从工程实现角度看混搭之所以廉价正因 TinyBase 把数据与存取解耦Store/MergeableStore只负责数据与元数据所有 Persister 与 Synchronizer 都是可独立创建、销毁的外挂对象统一基于 createCustomPersister 与 createCustomSynchronizer 的工厂模式构建。这也是仓库中 TinyHub 客户端应用的做法它的多个 store 分别以不同的 persister 策略初始化。总结TinyBase 提供了非常丰富的架构选择取决于你正在构建什么类型的应用以及数据在不使用期间应当驻留在哪里架构选项数据去向关键接口 / 函数独立使用仅内存刷新即失createStore只读云端数据启动时从服务器拉取createRemotePersister浏览器存储localStorage / sessionStorage / OPFScreateLocalPersister/createSessionPersister/createOpfsPersister客户端数据库存储浏览器内 SQLite / PGlite 等createSqliteWasmPersister/createPglitePersister等仅客户端同步客户端之间协商合并MergeableStorecreateWsSynchronizercreateWsServer客户端-服务端同步服务器持久化客户端同步createWsServercreatePersisterForPathSqlite3Persister/PostgresPersister等第三方同步第三方平台负责云端同步ElectricSqlPersister/PowerSyncPersister/LibSqlPersister/YjsPersister/AutomergePersister下一篇指南将展示如何在 Store 之上快速构建用户界面——参见 Building UIs With React。赞分享数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载相关推荐React SSR Setup国际化实战使用i18next实现多语言支持的完整教程React SSR Setup国际化实战使用i18next实现多语言支持的完整教程想要为你的React SSR应用添加国际化支持吗React SSR SeGitHub镜像工程构建云端数据同步的架构艺术GitHub镜像工程构建云端数据同步的架构艺术在开源生态的浩瀚宇宙中GitHub犹如一颗璀璨的恒星承载着无数开发者的智慧结晶。然而如何高效、稳定地镜像后端开发工具Readest 多提供商云同步架构从互斥选择到多后端并行同步5062的实现解析Readest 多提供商云同步架构从互斥选择到多后端并行同步 5062的实现解析导读本文基于 Readest 仓库中关于同时向多个云同步提供商同步桌面应用跨平台前端上一篇PaddleOCR 超大图像 Slice 切分推理用滑动窗口与碎片合并处理超长文档下一篇Avito VAS 前端实习生测试任务全解从零构建可序列化的 Banner 编辑器应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

TinyBase 架构选项全解析：从独立内存 Store 到云端同步的七种数据架构方案

相关推荐

C语言深拷贝实现：从链表复制理解内存安全与算法鲁棒性

impeccable：面向生产就绪的协议驱动型前端交付守门员

愚人节编程赛制拆解：从样例反推规则与读题技巧

更多资讯

psql-srv 深入解析：用 Rust 模拟 PostgreSQL 服务器，让现有应用零改动接入你的缓存层

医学图像格式转换全指南：RGB、灰度与索引的底层逻辑

NSL-KDD联邦入侵检测工程落地避坑指南

Linux终端复用工具 screen 详解：SSH断线任务不丢失

相交链表详解：从暴力到双指针，彻底吃透链表算法面试题

Scrapy Shell调试技巧：提升爬虫开发效率的交互式工具

今日更新

声子晶体仿真：三角晶格与六角晶格的能带计算实战

度假村安保定岗定编：岗位梳理、编制测算与排班设计

COMSOL等离子体模块实战：氩气双层DBD仿真建模全解析

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？