Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

[2.0 rc.14] Feature request: prerender(view), running a view's reads to preload them without creating its elements or running its effects

未关闭
  • 哪里不对？
#3,975 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
12/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
活跃
技术栈
javascript, typescript
领域
frontend, performance

调研方向

The payload names no files or tests. Start with the workaround in the body, which renders the view into a detached host inside a Loading boundary, to see which reads it triggers. Then look at how hydration runs component code once to trace dependencies, since the author suggests it as a starting point. Done means a design the maintainers accept, since the runtime or compiler support needed is their call.

由索引模型根据 Issue 内容生成。

描述

Summary

Preloading on hover or intent usually means listing what the next view will read, which repeats its component tree. Rendering the view itself discovers its reads, but the only way to do that today is a full client render into a detached element, kept from committing by a <Loading> that never resolves. That builds every element of the view only to discard them, gives no signal when all its reads have settled, and needs owner and context plumbing by hand. A primitive that runs a view's components and reads, and nothing else, would make render-driven preloading cheap and explicit.

Today

The current way, and the undocumented behaviour it depends on, is #3974:

function preview(view: () => JSX.Element, owner: Owner | null) {
  const host = document.createElement("div");
  return runWithOwner(owner, () =>
    render(() => {
      const gate = createMemo(() => new Promise<never>(() => {}));
      return (
        <Loading fallback={null}>
          {gate()}
          {view()}
        </Loading>
      );
    }, host),
  );
}

Measured in headless Chromium under vite dev, previewing a list with one detail per row, each element's ref logging its creation: the list's read started at 0 ms and both detail reads at 103 ms, as soon as the list answered. The ul and both p elements were created (their ref callbacks ran), but the host stayed empty and no createEffect or onSettled ran. Every element of the previewed tree is built and thrown away, and nothing reports when the detail reads finished.

Proposal
const run = prerender(() => <Page />); // under the current owner and context
run.settled; // resolves when every read in the tree, including ones found as data arrived, has settled or failed
run.dispose(); // stop early; loads already started still finish
  • Runs component bodies, memos and async reads (memos, stores, projections, lazy() and lazyModule()), following the tree level by level as data arrives, as a pending boundary does.
  • Creates no elements, render effects or effects, and commits nothing.
  • Keeps its pending state out of isPending and transitions, its holds out of the hold diagnostics, and its errors away from any <Errored>; a failed read stays failed in its source, for the real view to retry.
  • Disposes itself once settled resolves.

The compiled client output creates elements in component bodies, so skipping them likely needs runtime or compiler support; how is the maintainers' call. Hydration already runs component code once to trace dependencies (with promises held), which may be a starting point.

Related: #3213 (RFC for <Activity>, keeping hidden UI and its state; this request is narrower: no DOM and nothing kept, only the reads), #1008 (<Offscreen>), #1877 (a low-level primitive to pause effects in offscreen branches), #3941 (lazyModule(), preloading code), and React's <Activity mode="hidden">, which pre-renders hidden trees to load their data and code.

(submitted by Claude Opus 5.5 on behalf of rvlzzr)

主要语言
TypeScript
星标
36.1k
派生
1.1k
平均合并
9 小时 56 分钟
30 天内合并 PR
336

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

solidjs/solid 的其他 Issue

查看 solidjs/solid 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。