@rsc-kit/mcp 0.28.0 → 0.28.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/recipes.js +33 -0
- package/dist/recipes.js.map +1 -1
- package/guides/deployment.md +2 -2
- package/guides/go.md +1 -1
- package/guides/index.json +5 -0
- package/guides/laravel.md +1 -1
- package/guides/live-data.md +738 -0
- package/guides/sections.md +4 -607
- package/guides/where-it-runs.md +8 -0
- package/package.json +1 -1
|
@@ -0,0 +1,738 @@
|
|
|
1
|
+
# Live data
|
|
2
|
+
|
|
3
|
+
> Keep what a page shows current as the data changes - refreshOn, events, polling.
|
|
4
|
+
|
|
5
|
+
A page rendered on the server shows the data as it was. When it changes
|
|
6
|
+
while someone is looking - a teammate edits it, a webhook lands, a job
|
|
7
|
+
finishes - there are three ways to show the change, and which to use depends
|
|
8
|
+
on where the change comes from.
|
|
9
|
+
|
|
10
|
+
| | The change comes from | What travels | Use it for |
|
|
11
|
+
| --- | --- | --- | --- |
|
|
12
|
+
| [`refreshOn`](#refresh-a-section-when-its-data-changes) | your backend: a webhook, a job, another visitor's action | a one-line signal; the section re-renders through its own queries and guards | almost everything - dashboards, inboxes, build status, anything a backend can say changed |
|
|
13
|
+
| [`events()` + `useEvents`](/guides/api-routes#a-route-that-streams) | a stream of values: prices, progress, logs | each value, as it is produced | data that *is* a stream, rendered on the client |
|
|
14
|
+
| [`usePolling`](/guides/queries#live-data) | nowhere you can hook: a third-party API | the whole answer, every interval | values with no change signal at all |
|
|
15
|
+
|
|
16
|
+
Inside the tab that made a change, none of these is needed: an action says
|
|
17
|
+
what it changed, and its answer carries those sections back -
|
|
18
|
+
[revalidate](/guides/sections#refreshing-it).
|
|
19
|
+
|
|
20
|
+
## Refresh a section when its data changes
|
|
21
|
+
|
|
22
|
+
An action can say what it changed because it is the thing changing it. A
|
|
23
|
+
webhook, a job finishing in a worker, another visitor's action - none of
|
|
24
|
+
those is in the tab that is showing the data. For those a section says what
|
|
25
|
+
it depends on, by name:
|
|
26
|
+
|
|
27
|
+
```tsx title="src/app/t/[team]/repos.section.tsx"
|
|
28
|
+
export default section('repos', Repos, {
|
|
29
|
+
refreshOn: ({ params }) => [`team:${params.team}:repos`],
|
|
30
|
+
})
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
and whatever changes the data says so, from wherever it is:
|
|
34
|
+
|
|
35
|
+
```ts title="src/app/api/github/webhook/route.ts"
|
|
36
|
+
import { changed } from '@rsc-kit/core/changed'
|
|
37
|
+
|
|
38
|
+
export async function POST(request: Request) {
|
|
39
|
+
const { team, repos } = await request.json()
|
|
40
|
+
await saveRepos(team, repos)
|
|
41
|
+
await changed(`team:${team}:repos`)
|
|
42
|
+
return new Response(null, { status: 204 })
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Every open tab showing the section refreshes it - the same refresh as above,
|
|
47
|
+
with nothing polling and no client code. `refreshOn` is a list of names, or a
|
|
48
|
+
function of the section's props - the page's `params` and `searchParams` -
|
|
49
|
+
that makes them. A page can declare its own with `export const refreshOn`,
|
|
50
|
+
and a change refreshes the page as `refresh('page')` does.
|
|
51
|
+
|
|
52
|
+
The function is given the page's `params` and `searchParams` already awaited,
|
|
53
|
+
and runs per request, so it can read the request too - a name for the person
|
|
54
|
+
signed in is the usual one on a dashboard:
|
|
55
|
+
|
|
56
|
+
```tsx title="src/app/dashboard/page.tsx"
|
|
57
|
+
import { cookies } from '@rsc-kit/core/request'
|
|
58
|
+
|
|
59
|
+
export const refreshOn = async () => [`inbox:${(await cookies()).get('agent')?.value}`]
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
That is the whole feature for an app that is only JavaScript. With a Go or
|
|
63
|
+
Laravel backend the backend says it instead -
|
|
64
|
+
[`reg.Changed(ctx, …)`](/hosts/go#saying-data-changed) or
|
|
65
|
+
[`Rsc::changed(…)`](/hosts/laravel#saying-data-changed) - and the page is the same.
|
|
66
|
+
|
|
67
|
+
## Whose data a name shows
|
|
68
|
+
|
|
69
|
+
A name is a signal, not data and not a permission. Hearing that
|
|
70
|
+
`conversation:42` changed tells a tab only to ask for its section again; what
|
|
71
|
+
comes back is rendered for that tab's visitor, through their own session, by
|
|
72
|
+
the same queries and guards as the first render. So two people never see each
|
|
73
|
+
other's data through a name - they see whatever their own render shows.
|
|
74
|
+
|
|
75
|
+
A chat between Ada and Ben:
|
|
76
|
+
|
|
77
|
+
```tsx title="src/app/chats/[id]/messages.section.tsx"
|
|
78
|
+
export default section('messages', async function Messages({ params }) {
|
|
79
|
+
const { id } = await params
|
|
80
|
+
const messages = await rpc('Chats.messages', id) // the backend checks the viewer is in it
|
|
81
|
+
|
|
82
|
+
return <Thread messages={messages} />
|
|
83
|
+
}, { refreshOn: ({ params }) => [`conversation:${params.id}`] })
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
```tsx title="src/app/inbox/page.tsx"
|
|
87
|
+
// Each person's own list of conversations, with unread counts.
|
|
88
|
+
export const refreshOn = async () => [`inbox:${await currentUserId()}`]
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
```go
|
|
92
|
+
// Ada sends a message.
|
|
93
|
+
reg.Changed(ctx, "conversation:42", "inbox:"+ben.ID, "inbox:"+ada.ID)
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
- Both have conversation 42 open, so both tabs refresh it, and each render
|
|
97
|
+
asks `Chats.messages` as its own visitor. If the thread shows "you" and
|
|
98
|
+
"them", each sees it from their side.
|
|
99
|
+
- Ben's inbox refreshes; so does Ada's. Nobody else's does: their pages were
|
|
100
|
+
rendered with their own `inbox:` names.
|
|
101
|
+
- Someone who is not in the conversation cannot open the page - its guards
|
|
102
|
+
refuse - so no render ever hands them `conversation:42` to listen for. A
|
|
103
|
+
tab can only listen for names its page was rendered with: the renderer
|
|
104
|
+
signs them, and a name a browser makes up is refused.
|
|
105
|
+
|
|
106
|
+
**Name the data, as narrowly as the data.** One name per thing that changes
|
|
107
|
+
together: `conversation:{id}`, `inbox:{userId}`, `team:{id}:repos`. Two
|
|
108
|
+
different things sharing one name only refresh too often; one thing split
|
|
109
|
+
across names refreshes too little. Use ids, not emails or titles - a name
|
|
110
|
+
sits in the page and in the stream's url, and its version says when it last
|
|
111
|
+
changed, so a name must not be something its visitor should not see.
|
|
112
|
+
|
|
113
|
+
A section that shows anything per visitor - "you", their unread count, what
|
|
114
|
+
they may do - must never be `shared`: that is the one place a render is
|
|
115
|
+
handed from one visitor to another.
|
|
116
|
+
|
|
117
|
+
## How a tab finds out
|
|
118
|
+
|
|
119
|
+
Each name has a version, a number that moves when something says the name
|
|
120
|
+
changed. Nothing else travels - not what changed, not the data.
|
|
121
|
+
|
|
122
|
+
1. The page renders, reads the version of each name it shows, and hands them
|
|
123
|
+
to the tab, signed.
|
|
124
|
+
2. The tab opens one stream, `/_rsc/changes`, for every name on the page. Only
|
|
125
|
+
a page with `refreshOn` opens one, and only while the tab is visible.
|
|
126
|
+
3. The server asks where the versions live - "which of these differ from what
|
|
127
|
+
I hold?" - once for every open tab it is serving, and again on an interval.
|
|
128
|
+
4. When a version has moved, the stream says so in one line, and the tab asks
|
|
129
|
+
for exactly the sections showing that name, the way `refresh('repos')` does.
|
|
130
|
+
|
|
131
|
+
A name belongs to the data, not to a section or a page. Any number of
|
|
132
|
+
sections, on any number of pages, can refresh on the same name: one
|
|
133
|
+
`changed('team:1:repos')` moves its version once, and every open tab showing
|
|
134
|
+
any of them refreshes the ones it has. Section *names* are separate - two
|
|
135
|
+
pages may both have a section called `stats`; each is resolved through its own
|
|
136
|
+
page, and a shared render is never handed from one page to the other.
|
|
137
|
+
|
|
138
|
+
The data is never pushed: the section is rendered fresh, through its own
|
|
139
|
+
queries and its own guards, as any refresh is. That is also why this runs
|
|
140
|
+
on a Worker - the stream holds no state, and a version is a read.
|
|
141
|
+
|
|
142
|
+
## Where the versions live
|
|
143
|
+
|
|
144
|
+
**One server, no backend:** in that server's memory. Nothing to set up - but
|
|
145
|
+
in production rsc-kit says so in its log, once, because the same default
|
|
146
|
+
fails silently the moment there are two instances. If the deploy really is
|
|
147
|
+
one instance, say so and the warning goes:
|
|
148
|
+
|
|
149
|
+
```ts title="src/instrumentation.ts"
|
|
150
|
+
import { installVersionSource, memoryVersions } from '@rsc-kit/core/changed'
|
|
151
|
+
|
|
152
|
+
export function register() {
|
|
153
|
+
installVersionSource(memoryVersions()) // one instance, on purpose
|
|
154
|
+
}
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
**More than one instance, or a worker process:** this is the case to
|
|
158
|
+
plan for. In-memory versions fail silently the moment a load balancer adds a
|
|
159
|
+
second instance - a change made on one never reaches the tabs held by the
|
|
160
|
+
other - and a job finishes in a process that serves no pages at all. Keep
|
|
161
|
+
the versions somewhere they all share - any database you already have, through
|
|
162
|
+
the client you already use. rsc-kit ships no driver; you hand it yours:
|
|
163
|
+
|
|
164
|
+
| Your database | The store | Another instance's change arrives |
|
|
165
|
+
| --- | --- | --- |
|
|
166
|
+
| Postgres, with postgres.js or `Bun.sql` (Bun 1.4+) - or the one under Drizzle | `postgresVersions(sql)`, or `postgresVersions(db.$client)` | at once, through LISTEN/NOTIFY; one statement per change |
|
|
167
|
+
| Postgres, with another client | `sqlVersions({ query, placeholder: (n) => '$' + n })` | within a second |
|
|
168
|
+
| MySQL, MariaDB | `sqlVersions({ query, dialect: 'mysql' })` | within a second; one statement per change |
|
|
169
|
+
| SQLite, libSQL, Turso, D1 | `sqlVersions({ query, dialect: 'sqlite' })` | within a second; one statement per change |
|
|
170
|
+
| Redis | `createVersions({ read, bump, listen, notify })` | at once, through pub/sub |
|
|
171
|
+
| An ORM: Drizzle, Prisma, Kysely, Knex | `createVersions` over its query builder, or `sqlVersions` over its raw query | as its database |
|
|
172
|
+
|
|
173
|
+
`sqlVersions` takes your driver as one function of SQL text and parameters.
|
|
174
|
+
Say which database with `dialect`, and a change is one upsert of every name it
|
|
175
|
+
moves; leave it out and it uses only SQL every database has, a read and a
|
|
176
|
+
write per name:
|
|
177
|
+
|
|
178
|
+
```ts title="src/versions.ts"
|
|
179
|
+
import { sqlVersions } from '@rsc-kit/core/changed'
|
|
180
|
+
|
|
181
|
+
// MySQL, mysql2
|
|
182
|
+
export const versions = sqlVersions({ dialect: 'mysql', query: async (text, params) => (await pool.query(text, params))[0] })
|
|
183
|
+
|
|
184
|
+
// SQLite, bun:sqlite or better-sqlite3
|
|
185
|
+
export const versions = sqlVersions({ dialect: 'sqlite', query: async (text, params) => db.query(text).all(...params) })
|
|
186
|
+
|
|
187
|
+
// libSQL / Turso
|
|
188
|
+
export const versions = sqlVersions({ dialect: 'sqlite', query: async (sql, args) => (await client.execute({ sql, args })).rows })
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
and with postgres.js it is one line:
|
|
192
|
+
|
|
193
|
+
```ts title="src/versions.ts"
|
|
194
|
+
import postgres from 'postgres'
|
|
195
|
+
import { postgresVersions } from '@rsc-kit/core/changed'
|
|
196
|
+
|
|
197
|
+
// A function, so the store - and its database client - is made on first use.
|
|
198
|
+
export const versions = () => postgresVersions(postgres(process.env.DATABASE_URL!))
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
A SQLite file is shared by the processes on one machine - a web server and a
|
|
202
|
+
worker on the same box. Instances on several machines need a database they
|
|
203
|
+
all reach over the network. The table every one of these reads is described
|
|
204
|
+
[below](#the-table).
|
|
205
|
+
|
|
206
|
+
postgres.js and `Bun.sql` both LISTEN, and `postgresVersions` uses it when the
|
|
207
|
+
client has it: a change on one instance - or in a worker - reaches the tabs on
|
|
208
|
+
every other at once. A listening server still reads the table now and then, in
|
|
209
|
+
case its listening connection dropped without a word; it is not how changes
|
|
210
|
+
normally arrive.
|
|
211
|
+
|
|
212
|
+
**Any database, any ORM, or no SQL at all.** rsc-kit needs three things from
|
|
213
|
+
your storage - read some versions, move some versions, and, if it can,
|
|
214
|
+
say the moment one moved - and does the comparing, waiting and waking itself.
|
|
215
|
+
`createVersions` takes exactly those:
|
|
216
|
+
|
|
217
|
+
With Drizzle, use its query builder rather than raw SQL - the table is one
|
|
218
|
+
more table in your schema:
|
|
219
|
+
|
|
220
|
+
```ts title="src/db/schema.ts"
|
|
221
|
+
import { bigint, pgTable, text } from 'drizzle-orm/pg-core'
|
|
222
|
+
|
|
223
|
+
export const rscVersions = pgTable('rsc_versions', {
|
|
224
|
+
name: text('name').primaryKey(),
|
|
225
|
+
version: bigint('version', { mode: 'number' }).notNull(),
|
|
226
|
+
})
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
```ts title="src/versions.ts"
|
|
230
|
+
import { inArray, sql } from 'drizzle-orm'
|
|
231
|
+
import { createVersions } from '@rsc-kit/core/changed'
|
|
232
|
+
import { db } from './db'
|
|
233
|
+
import { rscVersions } from './db/schema'
|
|
234
|
+
|
|
235
|
+
export const versions = createVersions({
|
|
236
|
+
read: async (names) =>
|
|
237
|
+
Object.fromEntries(
|
|
238
|
+
(await db.select().from(rscVersions).where(inArray(rscVersions.name, names)))
|
|
239
|
+
.map((row) => [row.name, Number(row.version)]),
|
|
240
|
+
),
|
|
241
|
+
bump: async (names) => {
|
|
242
|
+
await db.insert(rscVersions)
|
|
243
|
+
.values(names.map((name) => ({ name, version: Date.now() })))
|
|
244
|
+
.onConflictDoUpdate({
|
|
245
|
+
target: rscVersions.name,
|
|
246
|
+
set: { version: sql`GREATEST(${rscVersions.version} + 1, excluded.version)` },
|
|
247
|
+
})
|
|
248
|
+
},
|
|
249
|
+
})
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
```ts title="Prisma"
|
|
253
|
+
import { sqlVersions } from '@rsc-kit/core/changed'
|
|
254
|
+
|
|
255
|
+
// Raw SQL through Prisma; the table is a model in its schema - see "The table" below.
|
|
256
|
+
export const versions = sqlVersions({
|
|
257
|
+
query: (text, params) => prisma.$queryRawUnsafe(text, ...params),
|
|
258
|
+
placeholder: (n) => '$' + n, // Postgres; leave out for MySQL and SQLite
|
|
259
|
+
})
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
```ts title="Redis"
|
|
263
|
+
import { createVersions } from '@rsc-kit/core/changed'
|
|
264
|
+
|
|
265
|
+
const key = (name: string) => 'rsc:' + name
|
|
266
|
+
const BUMP = `local v = math.max(tonumber(redis.call('GET', KEYS[1]) or '0') + 1, tonumber(ARGV[1]))
|
|
267
|
+
redis.call('SET', KEYS[1], v, 'EX', ARGV[2])
|
|
268
|
+
return v`
|
|
269
|
+
|
|
270
|
+
export const versions = createVersions({
|
|
271
|
+
read: async (names) => {
|
|
272
|
+
const values = await redis.mget(names.map(key))
|
|
273
|
+
return Object.fromEntries(names.map((name, i) => [name, Number(values[i] ?? 0)]))
|
|
274
|
+
},
|
|
275
|
+
// One past where it was, or now if that is larger - see "Cleaning up".
|
|
276
|
+
bump: async (names) => {
|
|
277
|
+
await Promise.all(names.map((name) => redis.eval(BUMP, 1, key(name), Date.now(), 30 * 86400)))
|
|
278
|
+
},
|
|
279
|
+
// Instant across instances: a subscriber connection hears every bump.
|
|
280
|
+
listen: (wake) => subscriber.subscribe('rsc:versions', wake),
|
|
281
|
+
notify: () => redis.publish('rsc:versions', ''),
|
|
282
|
+
})
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
`sqlVersions({ query })` takes any SQL driver as a function of text and
|
|
286
|
+
parameters - node-postgres, mysql2, Kysely, Knex, D1 - and `createVersions`
|
|
287
|
+
takes anything else.
|
|
288
|
+
|
|
289
|
+
Install it in every process - the web server once, before the first request.
|
|
290
|
+
Pass the function, not a store: `register()` also runs during the build,
|
|
291
|
+
usually without the database's settings, and a store made there makes its
|
|
292
|
+
client there too. Given a function, rsc-kit makes the store the first time
|
|
293
|
+
versions are read - which a build never does.
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
```ts title="src/instrumentation.ts"
|
|
297
|
+
import { installVersionSource } from '@rsc-kit/core/changed'
|
|
298
|
+
import { versions } from './versions'
|
|
299
|
+
|
|
300
|
+
export function register() {
|
|
301
|
+
installVersionSource(versions)
|
|
302
|
+
}
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
and the worker, which then says what it finished:
|
|
306
|
+
|
|
307
|
+
```ts title="worker.ts"
|
|
308
|
+
import { changed, installVersionSource } from '@rsc-kit/core/changed'
|
|
309
|
+
import { versions } from './src/versions'
|
|
310
|
+
|
|
311
|
+
installVersionSource(versions)
|
|
312
|
+
|
|
313
|
+
queue.on('restoration.done', async (job) => {
|
|
314
|
+
await changed(`restoration:${job.id}`)
|
|
315
|
+
})
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
Without `listen` and `notify` - MySQL, SQLite, or a driver that cannot listen -
|
|
319
|
+
a waiting server reads the table every second instead (`poll` changes it).
|
|
320
|
+
|
|
321
|
+
**From any process, without rsc-kit:** the table is the contract. A cron job,
|
|
322
|
+
a service in another language, a database trigger - anything that can write
|
|
323
|
+
to it can say a name changed:
|
|
324
|
+
|
|
325
|
+
```sql
|
|
326
|
+
-- Postgres
|
|
327
|
+
INSERT INTO rsc_versions (name, version)
|
|
328
|
+
VALUES ('restoration:42', (EXTRACT(EPOCH FROM clock_timestamp()) * 1000)::bigint)
|
|
329
|
+
ON CONFLICT (name) DO UPDATE SET version = GREATEST(rsc_versions.version + 1, EXCLUDED.version);
|
|
330
|
+
NOTIFY rsc_versions; -- optional: wakes the listening servers at once
|
|
331
|
+
|
|
332
|
+
-- MySQL, MariaDB
|
|
333
|
+
INSERT INTO rsc_versions (name, version)
|
|
334
|
+
VALUES ('restoration:42', FLOOR(UNIX_TIMESTAMP(NOW(3)) * 1000))
|
|
335
|
+
ON DUPLICATE KEY UPDATE version = GREATEST(version + 1, VALUES(version));
|
|
336
|
+
|
|
337
|
+
-- SQLite
|
|
338
|
+
INSERT INTO rsc_versions (name, version)
|
|
339
|
+
VALUES ('restoration:42', CAST((julianday('now') - 2440587.5) * 86400000 AS INTEGER))
|
|
340
|
+
ON CONFLICT (name) DO UPDATE SET version = MAX(version + 1, excluded.version);
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
The new version is one past the old, or the current time in milliseconds if
|
|
344
|
+
that is larger - so a version never repeats, which is what makes it safe to
|
|
345
|
+
delete old rows ([Cleaning up](#cleaning-up)). A writer that still does
|
|
346
|
+
`version + 1` keeps working, since servers only compare; it is only cleanup
|
|
347
|
+
that needs the time. Go's `SQLVersions` uses the same table, so a Go service
|
|
348
|
+
and a JavaScript app can share one.
|
|
349
|
+
|
|
350
|
+
**LISTEN through an ORM, or another driver.** An ORM builds queries; listening
|
|
351
|
+
is its driver's job, so pass `listen` and `notify` from the client underneath -
|
|
352
|
+
the one you handed the ORM:
|
|
353
|
+
|
|
354
|
+
```ts title="src/versions.ts"
|
|
355
|
+
import { SQL } from 'bun'
|
|
356
|
+
import { drizzle } from 'drizzle-orm/bun-sql'
|
|
357
|
+
|
|
358
|
+
const client = new SQL(process.env.DATABASE_URL!)
|
|
359
|
+
export const db = drizzle({ client })
|
|
360
|
+
|
|
361
|
+
export const versions = createVersions({
|
|
362
|
+
read, // the Drizzle read and bump above
|
|
363
|
+
bump,
|
|
364
|
+
listen: (wake) => client.listen('rsc_versions', wake),
|
|
365
|
+
notify: () => client.notify('rsc_versions', ''),
|
|
366
|
+
})
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
On node-postgres (`pg`), keep one client for listening alone:
|
|
370
|
+
|
|
371
|
+
```ts
|
|
372
|
+
const listener = new pg.Client(process.env.DATABASE_URL)
|
|
373
|
+
await listener.connect()
|
|
374
|
+
|
|
375
|
+
listen: async (wake) => {
|
|
376
|
+
listener.on('notification', wake)
|
|
377
|
+
await listener.query('LISTEN rsc_versions')
|
|
378
|
+
},
|
|
379
|
+
notify: () => pool.query('NOTIFY rsc_versions'),
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
A `NOTIFY` sent inside a transaction is only delivered when it commits, so a
|
|
383
|
+
listening tab is never woken before the data it will read is there - the
|
|
384
|
+
[after-commit](#say-it-after-the-write-commits) rule, kept by the database.
|
|
385
|
+
Redis has the same shape with SUBSCRIBE and PUBLISH (the example above).
|
|
386
|
+
|
|
387
|
+
## Connection poolers
|
|
388
|
+
|
|
389
|
+
A pooler in **transaction mode** - PgBouncer, and the pooled connection
|
|
390
|
+
DigitalOcean, Supabase and Neon offer - hands the database connection back
|
|
391
|
+
after every statement. Reads and writes are fine; even sending a NOTIFY is.
|
|
392
|
+
But a LISTEN lands on a connection the pooler takes back, and the listener
|
|
393
|
+
hears nothing - silently. Changes from other instances would then wait for the
|
|
394
|
+
thirty-second safety net.
|
|
395
|
+
|
|
396
|
+
rsc-kit checks: as `postgresVersions` starts listening it sends itself a probe,
|
|
397
|
+
and if the probe does not come back it says so in the log - naming the cause
|
|
398
|
+
and the fix - and goes back to reading every second. The fix is to listen
|
|
399
|
+
through a connection that keeps its session - a direct one, or a pool in
|
|
400
|
+
session mode - and leave everything else on the pool:
|
|
401
|
+
|
|
402
|
+
```ts title="src/versions.ts"
|
|
403
|
+
import { SQL } from 'bun'
|
|
404
|
+
import { postgresVersions } from '@rsc-kit/core/changed'
|
|
405
|
+
|
|
406
|
+
export const versions = () =>
|
|
407
|
+
postgresVersions(new SQL(process.env.DATABASE_URL!), { // the pool: reads and writes
|
|
408
|
+
listenWith: new SQL(process.env.DATABASE_LISTEN_URL!), // direct: listening only
|
|
409
|
+
})
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
That is one extra connection per process. On DigitalOcean the direct port is
|
|
413
|
+
25060 and the pool's 25061; on Supabase, 5432 and 6543. Use the app's own
|
|
414
|
+
database user for it, not the one migrations run as.
|
|
415
|
+
|
|
416
|
+
If direct connections are too scarce to spend one per process, don't listen -
|
|
417
|
+
say so, and rsc-kit reads every second instead, with no probe and no warning:
|
|
418
|
+
|
|
419
|
+
```ts
|
|
420
|
+
postgresVersions(pool, { listen: false })
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
That is one small indexed read per second per process, however many tabs it
|
|
424
|
+
holds. A change made in a process still reaches that process's tabs at once;
|
|
425
|
+
one made elsewhere - another instance, the worker - within about a second.
|
|
426
|
+
|
|
427
|
+
`await connection()` in a page is unrelated - despite the name, it is about
|
|
428
|
+
rendering per request, not database connections.
|
|
429
|
+
|
|
430
|
+
## On Workers and serverless
|
|
431
|
+
|
|
432
|
+
The stream needs nothing kept between requests - names are signed, not
|
|
433
|
+
looked up - so it runs anywhere a response can stream. What differs is that
|
|
434
|
+
there is no single long-lived process:
|
|
435
|
+
|
|
436
|
+
- **Every isolate or instance watches for its own tabs.** Versions in memory
|
|
437
|
+
belong to one isolate, so a `changed()` handled by one never reaches tabs
|
|
438
|
+
held by another. Use a shared store - D1, Postgres, your backend - which the
|
|
439
|
+
production warning asks for if there is none.
|
|
440
|
+
- **Connections are cut.** Platforms bound how long a request may run; a
|
|
441
|
+
stream that is cut reconnects on its own, and the tab catches up from its
|
|
442
|
+
versions. On a platform that bills a function for every second it is open,
|
|
443
|
+
each watching tab is billed for as long as it watches.
|
|
444
|
+
- **Listening is unlikely.** Hyperdrive and serverless Postgres drivers go
|
|
445
|
+
through poolers; the probe finds this and falls back to reading every second,
|
|
446
|
+
or say `listen: false` up front.
|
|
447
|
+
|
|
448
|
+
On Workers, bindings come from `cloudflare:workers`, imported inside a
|
|
449
|
+
request - when they exist, and never in the build:
|
|
450
|
+
|
|
451
|
+
```ts title="src/versions.ts"
|
|
452
|
+
import { sqlVersions } from '@rsc-kit/core/changed'
|
|
453
|
+
|
|
454
|
+
// The binding, imported inside the request: the build prerenders in Node,
|
|
455
|
+
// which runs register() and cannot load cloudflare:workers.
|
|
456
|
+
const db = async () => (await import('cloudflare:workers')).env.DB
|
|
457
|
+
|
|
458
|
+
// D1: the table is the same as anywhere else.
|
|
459
|
+
export const versions = () =>
|
|
460
|
+
sqlVersions({
|
|
461
|
+
dialect: 'sqlite',
|
|
462
|
+
query: async (text, params) => (await (await db()).prepare(text).bind(...params).all()).results,
|
|
463
|
+
})
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
Then the binding, the table and the secret:
|
|
467
|
+
|
|
468
|
+
```jsonc title="wrangler.jsonc"
|
|
469
|
+
{
|
|
470
|
+
// Nitro merges this into the Worker's config.
|
|
471
|
+
"d1_databases": [
|
|
472
|
+
{ "binding": "DB", "database_name": "my-app", "database_id": "<from wrangler d1 create>", "migrations_dir": "migrations" }
|
|
473
|
+
]
|
|
474
|
+
}
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
```sql title="migrations/0001_rsc_versions.sql"
|
|
478
|
+
CREATE TABLE IF NOT EXISTS rsc_versions (name TEXT PRIMARY KEY, version BIGINT NOT NULL);
|
|
479
|
+
```
|
|
480
|
+
|
|
481
|
+
```sh
|
|
482
|
+
npx wrangler d1 create my-app # once; put its id in wrangler.jsonc
|
|
483
|
+
npx wrangler d1 migrations apply DB --remote # --local for wrangler dev
|
|
484
|
+
npx wrangler secret put RSC_SIGNING_SECRET # production; .dev.vars for wrangler dev
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
and install it as anywhere else - `installVersionSource(versions)` in
|
|
488
|
+
`instrumentation.ts`. A section the store serves needs `await connection()`
|
|
489
|
+
when it reads D1 itself: the data is only there per request.
|
|
490
|
+
|
|
491
|
+
The Cloudflare example's `/live` page is all of this, end to end, and was run
|
|
492
|
+
on `wrangler dev`: a change from its webhook reaches an open tab, and the
|
|
493
|
+
section refreshes with the new value.
|
|
494
|
+
|
|
495
|
+
Where a response cannot stream at all, use `usePolling` instead.
|
|
496
|
+
|
|
497
|
+
## The table
|
|
498
|
+
|
|
499
|
+
A shared store keeps one row per name. Your app owns the table: rsc-kit never
|
|
500
|
+
creates, alters or migrates it at runtime - make it with your own migrations,
|
|
501
|
+
in your own schema, with whatever your ORM calls these types. (Laravel ships
|
|
502
|
+
one you publish into your own migrations, `--tag=rsc-migrations`; after that
|
|
503
|
+
it is yours too.)
|
|
504
|
+
|
|
505
|
+
| Column | Type | |
|
|
506
|
+
| --- | --- | --- |
|
|
507
|
+
| `name` | text, `PRIMARY KEY` (or a unique index) | the name a section refreshes on |
|
|
508
|
+
| `version` | `BIGINT NOT NULL` | when it last changed, in ms - or one past the last value, if that is larger |
|
|
509
|
+
|
|
510
|
+
```sql
|
|
511
|
+
-- Postgres, SQLite
|
|
512
|
+
CREATE TABLE rsc_versions (name TEXT PRIMARY KEY, version BIGINT NOT NULL);
|
|
513
|
+
-- MySQL: an indexed TEXT needs a length
|
|
514
|
+
CREATE TABLE rsc_versions (name VARCHAR(255) PRIMARY KEY, version BIGINT NOT NULL);
|
|
515
|
+
```
|
|
516
|
+
|
|
517
|
+
- **Extra columns are fine** - an `updated_at`, say - as long as each has a
|
|
518
|
+
default: rsc-kit and the documented upserts write only `name` and `version`.
|
|
519
|
+
- **Another name is fine:** `sqlVersions({ table })`, `postgresVersions(sql,
|
|
520
|
+
{ table })`, Go's `SQLVersions{Table}`, Laravel's `RSC_VERSIONS_TABLE`.
|
|
521
|
+
- **The NOTIFY channel** is `rsc_versions` whatever the table is called;
|
|
522
|
+
`postgresVersions(sql, { channel })` changes it.
|
|
523
|
+
- The same table works for Go's `SQLVersions` and Laravel's
|
|
524
|
+
`RSC_VERSIONS=database`, so a JavaScript app, a Go service and a PHP job
|
|
525
|
+
can share one.
|
|
526
|
+
|
|
527
|
+
## Cleaning up
|
|
528
|
+
|
|
529
|
+
A row is kept for every name that ever changed. For a fixed set of names -
|
|
530
|
+
`team:1:repos` - that is nothing; for one per order, job or restoration it
|
|
531
|
+
grows for ever. Delete the old ones on a schedule:
|
|
532
|
+
|
|
533
|
+
```ts
|
|
534
|
+
await versions.prune() // sqlVersions, postgresVersions: not changed in 30 days
|
|
535
|
+
await versions.prune(7 * 86400_000) // or any age, in ms
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
or from anything that can run SQL - the version is when the name last changed:
|
|
539
|
+
|
|
540
|
+
```sql
|
|
541
|
+
DELETE FROM rsc_versions WHERE version < (EXTRACT(EPOCH FROM now() - interval '30 days') * 1000)::bigint;
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
**Deleting is always safe.** A deleted name reads as 0, so a tab still
|
|
545
|
+
holding it sees a different version and refreshes once; changed again, the
|
|
546
|
+
name comes back at the current time - never at a value a tab is holding.
|
|
547
|
+
That is why a bump moves to the time rather than counting: a counter
|
|
548
|
+
restarted at 0 climbs back to values tabs still hold, and they would miss
|
|
549
|
+
the change.
|
|
550
|
+
|
|
551
|
+
The rest clean up on their own: `memoryVersions()` forgets a name not changed
|
|
552
|
+
in 30 days (`{ forgetAfter }`), the Redis example's keys expire, and the
|
|
553
|
+
server forgets every name the moment no open tab is watching it. Laravel and
|
|
554
|
+
Go have the same: `php artisan rsc:prune-versions` and `SQLVersions.Prune`.
|
|
555
|
+
|
|
556
|
+
If a store of your own counts with `+ 1`, use `nextVersion(current)` from
|
|
557
|
+
`@rsc-kit/core/changed` instead before you start deleting.
|
|
558
|
+
|
|
559
|
+
## Say it after the write commits
|
|
560
|
+
|
|
561
|
+
A tab that hears a name moved asks for its section at once. If the write
|
|
562
|
+
that changed the data has not committed yet, that render reads the old data -
|
|
563
|
+
and the tab is now at the new version, so it will not ask again until the
|
|
564
|
+
next change. Inside a transaction, say it changed **after** the transaction,
|
|
565
|
+
not inside it:
|
|
566
|
+
|
|
567
|
+
```ts
|
|
568
|
+
await db.transaction(async (tx) => {
|
|
569
|
+
await tx.insert(conversations).values(row)
|
|
570
|
+
// not here: this transaction may still roll back, and has not committed
|
|
571
|
+
})
|
|
572
|
+
|
|
573
|
+
await changed(`agent:${row.agentId}:conversations`) // here
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
The same goes for a worker writing the table directly: in the same
|
|
577
|
+
transaction as the data, or after it - never before. In Laravel,
|
|
578
|
+
`DB::afterCommit(fn () => Rsc::changed(...))` does this inside a transaction.
|
|
579
|
+
|
|
580
|
+
**With a Go or Laravel backend:** the backend keeps them - a table in Go, the
|
|
581
|
+
cache in Laravel - and you install nothing here. The backend owns the data,
|
|
582
|
+
so it answers for its versions too: the renderer asks it which moved, once
|
|
583
|
+
for every tab it is serving. Go holds that question until a version moves,
|
|
584
|
+
so tabs hear at once. PHP cannot hold a request open, so Laravel answers at
|
|
585
|
+
once and is asked again about every two seconds while any tab is watching:
|
|
586
|
+
one small request - a cache read - per renderer process, however many tabs.
|
|
587
|
+
For almost any app that is nothing, and a change reaches the tabs within
|
|
588
|
+
about two seconds - or at once, with Laravel's [broadcasting](/hosts/laravel#saying-data-changed).
|
|
589
|
+
|
|
590
|
+
## Waking the renderer
|
|
591
|
+
|
|
592
|
+
Whatever keeps the versions, the renderer has to learn *when* to ask which
|
|
593
|
+
moved. Go holds the question until one does; a store that listens -
|
|
594
|
+
Postgres's LISTEN, Redis's pub/sub - wakes it; otherwise it asks on a timer.
|
|
595
|
+
Anything else that can say "something changed" can wake it too:
|
|
596
|
+
|
|
597
|
+
```ts title="src/instrumentation.ts"
|
|
598
|
+
import { listenToBroadcast, wakeOn } from '@rsc-kit/core/changed'
|
|
599
|
+
|
|
600
|
+
export function register() {
|
|
601
|
+
// A broadcast server - anything speaking the Pusher protocol.
|
|
602
|
+
wakeOn(listenToBroadcast({ url: process.env.RSC_BROADCAST_URL!, key: process.env.RSC_BROADCAST_KEY! }))
|
|
603
|
+
|
|
604
|
+
// Or a Redis channel your backend publishes to.
|
|
605
|
+
wakeOn((wake) => subscriber.subscribe('rsc:changed', wake))
|
|
606
|
+
}
|
|
607
|
+
```
|
|
608
|
+
|
|
609
|
+
`RSC_BROADCAST_URL` and `RSC_BROADCAST_KEY` in the renderer's environment do
|
|
610
|
+
the first with no code. A wake carries nothing - no names, no data - so it
|
|
611
|
+
can travel over a public channel: on a wake the renderer asks, as it always
|
|
612
|
+
does, and the versions say which names moved for whom. With something to wake
|
|
613
|
+
it, the renderer asks on its timer only every thirty seconds, as a safety net
|
|
614
|
+
for a dropped connection. Listeners start with the first watching tab, never
|
|
615
|
+
in a build.
|
|
616
|
+
|
|
617
|
+
**Private data stays private.** A wake decides nothing about who sees what.
|
|
618
|
+
On a wake the renderer asks which of *its tabs'* names moved - names each tab
|
|
619
|
+
got, signed, from its own render - and a tab that has one refreshes its
|
|
620
|
+
section through its own visitor's session and guards. Ada's `inbox:7` is never
|
|
621
|
+
a name Ben's tab holds, so a change to it never refreshes his page, broadcast
|
|
622
|
+
or not. All a public channel shows a subscriber is that the app changed and
|
|
623
|
+
when; if even that timing is sensitive, keep the wake on a channel only the
|
|
624
|
+
renderer can reach - a Redis channel, through `wakeOn` - rather than a
|
|
625
|
+
broadcast.
|
|
626
|
+
|
|
627
|
+
## The signing secret
|
|
628
|
+
|
|
629
|
+
The names a page hands the tab are signed, so a tab can only listen for the
|
|
630
|
+
names its page was rendered with - a browser cannot make one up. Every
|
|
631
|
+
instance has to sign with the same key, or a tab served by one is refused by
|
|
632
|
+
the next and never refreshes:
|
|
633
|
+
|
|
634
|
+
```sh
|
|
635
|
+
RSC_SIGNING_SECRET=… # the same on every instance: openssl rand -base64 32
|
|
636
|
+
```
|
|
637
|
+
|
|
638
|
+
It is its own secret, with or without a backend - not the backend's
|
|
639
|
+
`RSC_HOST_CALL_SECRET`, which authorises a different thing. In production, an
|
|
640
|
+
app that uses `refreshOn` without it refuses to serve, saying what to set: a
|
|
641
|
+
random key per instance would fail silently.
|
|
642
|
+
|
|
643
|
+
That refusal comes on the first request, because on some platforms - Workers
|
|
644
|
+
- the environment is only there once a request arrives. Under Kubernetes or
|
|
645
|
+
any orchestrator with a readiness check, that is too late: the pod is already
|
|
646
|
+
taking traffic. Make the deploy itself fail instead, from `register()`, which
|
|
647
|
+
runs before the server takes a request:
|
|
648
|
+
|
|
649
|
+
```ts title="src/instrumentation.ts"
|
|
650
|
+
import { assertSigningSecret } from '@rsc-kit/core/changed'
|
|
651
|
+
|
|
652
|
+
export function register() {
|
|
653
|
+
assertSigningSecret() // throws in production without RSC_SIGNING_SECRET
|
|
654
|
+
}
|
|
655
|
+
``` In development a random key is
|
|
656
|
+
fine, and is what you get.
|
|
657
|
+
|
|
658
|
+
How to generate it, where to keep it, and what rotating it does:
|
|
659
|
+
[Secrets](/hosts/deployment#secrets).
|
|
660
|
+
|
|
661
|
+
Names are signed when the page is served, never at build: a page stored at
|
|
662
|
+
build keeps everything else stored, and the part that carries the names is
|
|
663
|
+
filled per request. So the build does not need the secret.
|
|
664
|
+
|
|
665
|
+
## When nothing refreshes
|
|
666
|
+
|
|
667
|
+
In development the browser console says what the page is watching, region
|
|
668
|
+
by region, each time that changes:
|
|
669
|
+
|
|
670
|
+
```
|
|
671
|
+
[rsc-kit] refreshOn watching, by region:
|
|
672
|
+
repos: team:1:repos @3
|
|
673
|
+
page: inbox:ada @0
|
|
674
|
+
```
|
|
675
|
+
|
|
676
|
+
A region that declared `refreshOn` but is missing from that list rendered no
|
|
677
|
+
names, and the server's log says why, once. And watching **stops while the
|
|
678
|
+
tab is hidden** - a background tab holds no connection - which the console
|
|
679
|
+
also says. Nothing is missed: shown again, the tab reconnects at the versions
|
|
680
|
+
it holds and refreshes whatever moved meanwhile.
|
|
681
|
+
|
|
682
|
+
## When many tabs show the same thing
|
|
683
|
+
|
|
684
|
+
When a name moves, every tab showing it asks for its sections again - 500 tabs
|
|
685
|
+
on one team's board are 500 renders. Each tab's render can differ by who is
|
|
686
|
+
looking, so by default each is its own. A section that is the same for
|
|
687
|
+
everyone allowed to see the page can say so:
|
|
688
|
+
|
|
689
|
+
```tsx title="src/app/status/board.section.tsx"
|
|
690
|
+
export default section('board', Board, { refreshOn: ['board'], shared: true })
|
|
691
|
+
```
|
|
692
|
+
|
|
693
|
+
Then the tabs asking because of the same change get one render between them:
|
|
694
|
+
the first tab's request renders it, and every other gets the same bytes.
|
|
695
|
+
Each tab's guards still run on its own request - a visitor who may not see
|
|
696
|
+
the page is still refused - and only a refresh a change triggered is shared,
|
|
697
|
+
so `refresh()` by hand, or after an action, always renders afresh.
|
|
698
|
+
|
|
699
|
+
Never set `shared` on a section that shows anything per visitor - their name,
|
|
700
|
+
their data, what they may do. The first tab's render is what every other tab
|
|
701
|
+
is shown, `rpc()` calls included: they run with the first visitor's session.
|
|
702
|
+
|
|
703
|
+
## What it costs
|
|
704
|
+
|
|
705
|
+
- **Per tab:** one open connection while the page is visible, closed when the
|
|
706
|
+
tab is hidden and reopened when it is seen again. Idle, it carries a
|
|
707
|
+
keepalive line every eight seconds ([set it lower](/hosts/deployment#streams-and-idle-timeouts)
|
|
708
|
+
under a shorter idle timeout); a change is one line of about forty
|
|
709
|
+
bytes.
|
|
710
|
+
- **Per change:** each tab showing the name asks for the sections that show
|
|
711
|
+
it, once, however many names moved together. That request is the size of
|
|
712
|
+
the section, not the page. A `shared` section renders once per change for
|
|
713
|
+
every tab; any other renders once per tab.
|
|
714
|
+
- **On the server:** one ask of wherever the versions live, covering every tab
|
|
715
|
+
that server holds - a thousand open tabs are one query, not a thousand. The
|
|
716
|
+
ask may wait up to five seconds for a change: a database with `listen`, or a
|
|
717
|
+
Go backend, answers the moment a version moves; a table without it is read
|
|
718
|
+
once a second while the ask waits; Laravel answers at once and is asked again
|
|
719
|
+
two seconds later. Plus one small read when each tab opens its stream.
|
|
720
|
+
|
|
721
|
+
Polling a section every two seconds instead costs a full render of it, per
|
|
722
|
+
tab, every two seconds, whether anything changed or not. The trade is the open
|
|
723
|
+
connection: cheap on Bun, Node and Workers; on a host that bills a function
|
|
724
|
+
for every second it is open, it is a second billed for as long as the tab is.
|
|
725
|
+
|
|
726
|
+
## Coming from Next.js
|
|
727
|
+
|
|
728
|
+
This is where `revalidateTag` was, and it is not the same thing. Next's tags
|
|
729
|
+
label entries in its Data Cache and `revalidateTag()` throws them away, so the
|
|
730
|
+
*next request* refetches; an open tab learns nothing until it navigates.
|
|
731
|
+
There is no data cache here - every render is fresh - so `refreshOn` names
|
|
732
|
+
what is *on screen*, and `changed()` refreshes every open tab showing it, now.
|
|
733
|
+
A port keeps its names: `tags: ['posts']` on the fetch becomes
|
|
734
|
+
`refreshOn: ['posts']` on the section, and `revalidateTag('posts')` becomes
|
|
735
|
+
`changed('posts')`.
|
|
736
|
+
|
|
737
|
+
A name's version reveals only that something with that name changed. Do not
|
|
738
|
+
put a secret in a name.
|