[2.0 rc.14] Server components: what's the intended setup for many calls of one server function on an SSR page (e.g. code highlighting in docs)?
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 12/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- typescript
调研方向
The question is whether documentBoundary in @solidjs/web/frames should adopt later calls with different arguments, as described in frames-consistency-contract.md (C1 and pin c) and 11-server-components.md. Start with the claimedBoundaries check in documentBoundary and run the repro script to count /_server requests during hydration. Done means a decision on whether this is intended, and a fix or documented pattern that stops the extra requests, which needs maintainer input first.
由索引模型根据 Issue 内容生成。
描述
Hi! This might not be a bug. It may well be me (and my coding agent, who did most of the digging) misreading how server components are meant to be used. If so, a pointer to the intended pattern would be great.
What we're doing
We render docs pages with many highlighted code blocks. Highlighting (Shiki) runs on the server through one server component, and each block calls it with its own source:
// render.tsx
import { GET } from '@solidjs/web/server-functions';
export const render = GET(async (text: string) => {
'use server';
return () => <p class="block">{text}</p>; // in the real app: Shiki's HTML
});
// App.tsx
import { dynamic } from '@solidjs/web';
import { Loading } from 'solid-js';
import { render } from './render.tsx';
function Block(props: { text: string }) {
const Content = dynamic(() => render(props.text));
return <Content />;
}
export default function App() {
return (
<Loading fallback="loading">
<Block text="one" />
<Block text="two" />
<Block text="three" />
</Loading>
);
}
// vite.config.ts
export default defineConfig({
// Without this, SSR fails with "Seroval caught an error during the parsing process" (cf. solid-vite-plugin#394).
ssr: { noExternal: ['seroval', 'seroval-plugins'] },
plugins: [solid({ ssr: true, start: true, serverFunctions: { components: true } })],
});
As far as I can tell this follows examples/start-ssr/src/frames/FramesApp.tsx, except that we call the same function from several places. We use GET(fn) because the design notes call it the idiom for server components; a plain module-level 'use server' function behaves the same.
What we see
All three blocks are in the SSR HTML, but hydration adopts only the first. The other two each request /_server/data/<id> and render again on the server. The final DOM is correct and nothing is logged.
| Case | Blocks in SSR HTML | Requests during hydration |
|---|---|---|
| rc.13, one call site | 1 | 0 |
| rc.13, three call sites | 3 | 2 |
| rc.14, three call sites | 3 | 2 |
rc.14, production build (node dist/server/node.js) |
3 | 2 |
rc.14, each block in its own <Loading> |
3 | 2 |
rc.14, module-level 'use server' (POST) instead of GET(fn) |
3 | 2 |
On a real docs page with ten blocks, that's nine extra highlighting requests on every load.
Why I think it might be intended
The three boundaries are stamped with the same function id:
<solid-frame data-fid="render-62d3f108" style="display:contents">
<solid-frame data-fid="render-62d3f108" style="display:contents">
<solid-frame data-fid="render-62d3f108" style="display:contents">
On the client, documentBoundary in @solidjs/web/frames adopts one element per id (claimedBoundaries.has(id)), and later mounts render fresh. frames-consistency-contract.md describes this under C1 ("client.ts:documentBoundary (a second mount goes fresh)"), and its pin (c) covers "a second mount of the same function while the first adopted mounts fresh".
But 11-server-components.md says "Boot makes zero server-function requests", and that identity is the call's (function, arguments) address, "so panes over different calls are independent". From those two docs I couldn't tell whether different arguments count as a "second mount of the same function". In #3603, the t = 0 case is also described as "covered by the document".
Questions
- Is fresh rendering for the second and later calls of one function the expected behavior, or should calls with different arguments be adopted too?
- If it's expected, what setup do you recommend for this case? Some options we considered:
- accept the extra requests
- return the HTML as data from a plain server function, which ships it twice (markup plus serialized data)
- batch all blocks on a page into one server component call
- something else we're missing
Repro
The four files above, plus a script that counts /_server requests while the page hydrates:
import { chromium } from 'playwright';
const url = process.env.URL ?? 'http://localhost:3300/';
const html = await (await fetch(url)).text();
console.log('blocks in SSR HTML:', (html.match(/class="block"/g) ?? []).length);
const browser = await chromium.launch();
const page = await browser.newPage();
const requests = [];
page.on('request', (r) => r.url().includes('/_server') && requests.push(r.url()));
await page.goto(url, { waitUntil: 'load' });
await page.waitForTimeout(2000);
console.log('blocks after hydration:', await page.locator('.block').allTextContents());
console.log('server-function requests during hydration:', requests.length, requests);
await browser.close();
blocks in SSR HTML: 3
blocks after hydration: [ 'one', 'two', 'three' ]
server-function requests during hydration: 2 [
'http://localhost:3300/_server/data/render-62d3f108?args=%5B%22two%22%5D',
'http://localhost:3300/_server/data/render-62d3f108?args=%5B%22three%22%5D'
]
Versions: solid-js / @solidjs/web / @solidjs/signals 2.0.0-rc.14 (also rc.13), @solidjs/vite-plugin 3.0.0-next.47, Vite 8.3.3, Node 24.20.0, macOS 26.2, Chrome for Testing 153.
Possibly related: #2973 (adopted frames keyed by call address), #3889 (two mounts of one server-component result), discussion #3603 (request batching; server-component request grouping is on hold there because t = 0 is covered by the document).
Thanks!
- 主要语言
- TypeScript
- 星标
- 36.1k
- 派生
- 1.1k
- 平均合并
- 11 小时 37 分钟
- 30 天内合并 PR
- 344
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
solidjs/solid 的其他 Issue
-
`lazy()`: remounting an already-loaded component renders empty (or the Suspense fallback) since 1.9.14可能已有人在做 @itisrmk 于 2 天前认领。 未关闭1.x
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复
-
[2.0 rc.15 + next] For row lifecycle cleanup inherits the list computation and halts on a shared-state write可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 4/5 3-5 天 新手友好度 51/100
维护者通常 1 天内回复
-
难度 4/5 1-2 天 新手友好度 48/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 35/100
维护者通常 1 天内回复
-
`createRoot`'s dispose function keeps `fn` alive, so `<For>`/`<Index>` rows retain removed list items可能已有人在做 @boombang 于 4 天前认领。 未关闭1.x
难度 4/5 1-2 天 新手友好度 45/100
维护者通常 1 天内回复
相似的 Issue
-
e2e-failure ready-to-code
难度 2/5 1-3 小时 新手友好度 68/100
redhat-developer/rhdh-plugin-export-overlays#4460 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 77/100
维护者通常 1 天内回复
-
docs(api): openapi.yaml still documents gif-tools optimize colors as 2-256 instead of 2, 4, 16, 256未关闭area: backend documentation priority: low
难度 2/5 1-3 小时 新手友好度 84/100
snapotter-hq/SnapOtter#2919 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 77/100
obsidianmd/pele#39 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 1 天内回复