Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

2.0: <A> click before hydration settles renders root <Loading> fallback mid-hydration and leaves the page unresponsive

Đang mở
  • Có gì không ổn?
#625 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
50/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
playwright, typescript, vite
Lĩnh vực
frontend, testing-qa

Hướng nghiên cứu

Start with the App.tsx root Loading boundary and the deferred data patterns in routes/index.tsx and routes/insureds.tsx. Reproduce an immediate Playwright click before the root onSettled flag, then trace the router navigation and hydration behavior. Done means the early click no longer produces hydration-key-miss warnings, duplicate DOM, or an unresponsive page.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Describe the bug

With SSR and a root <Loading> boundary, a click on an <A> link that lands before hydration has settled is taken by the router, which starts a client-side navigation. The next route's data is not ready yet, so the root <Loading> fallback is rendered while the page is still hydrating. Hydration then fails to claim the server's DOM, and the page stops responding: the server-rendered content stays on screen, but no further clicks do anything.

Console output when it happens:

Hydration key miss for "170110": no server-rendered element carries this key (template: <main>Loading…). A detached element was created instead; its subtree will not appear in the document or become interactive.
Hydration completed with 8 unclaimed server-rendered node(s): <main ...>

In the DOM, the page is drawn twice: the unclaimed server-rendered <main> and a second client-rendered copy.

Your Example Website or App

No public repro, sorry: it is a private app. The relevant shape is small, though:

// App.tsx
export default function App() {
  return (
    <Router>
      {(props) => (
        <Loading fallback={<main>Loading…</main>}>
          {props.children}
        </Loading>
      )}
    </Router>
  );
}

// routes/index.tsx: data read with deferStream
const landing = createMemo(() => getLanding(), { deferStream: true }); // getLanding = query(..., "landing")
// ...renders <A href="/insureds">Insureds</A>

// routes/insureds.tsx: its own query + deferStream, same pattern
Steps to Reproduce the Bug or Issue
  1. Server-render a page like the above (SSR, streaming, dev server).
  2. As soon as the server's content is visible, before hydration has settled, click an <A> link to another route whose data is not cached.
  3. The target route's data is fetched, the root <Loading> fallback renders mid-hydration, and the hydration-key-miss warnings above appear.
  4. The page no longer responds to clicks.

Driving this with Playwright (sign in, then click the link immediately when the heading is visible, with no wait), about 1 in 4 runs fail. If the test first waits for a flag set in onSettled at the root, it passes 40 out of 40.

Expected behavior

A click that arrives before hydration settles should not break hydration. For example, the router could ignore or queue it until hydration settles, or fall back to a normal full-page navigation.

Screenshots or Videos

No response

Platform
  • OS: Linux (Arch, kernel 7.2)
  • Browser: Chromium, via Playwright 1.63 (headless)
  • Version: @solidjs/router 2.0.0-next.26, solid-js / @solidjs/web 2.0.0-rc.9, @solidjs/vite-plugin 3.0.0-next.44, Vite 8.3, Node 26
Additional context
  • I could not check the latest (@solidjs/router 2.0.0-next.30 + solid-js 2.0.0-rc.10): after upgrading, the app failed to load a route module (Failed to fetch dynamically imported module .../src/routes/index.tsx?pick=default&pick=$css), unrelated to this bug, so I could not run the repro there.
  • Possibly related, but a different trigger: solidjs/solid#3610 (hydrate starting before the records script).
  • Workaround we use in tests: set an attribute on <html> from onSettled in a component inside the root <Loading>, and wait for it before interacting after each full page load.
Ngôn ngữ chính
TypeScript
Star
1.3k
Fork
180
Merge trung bình
1 ngày 2 giờ
Pull request đã merge (30 ngày)
26

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của solidjs/solid-router

Tất cả issue của solidjs/solid-router

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.