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

data-active and aria-current are not server-rendered on plain anchors

Đang mở
  • Có gì không ổn?
#654 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
52/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
full-stack

Hướng nghiên cứu

Start in src/routers/factory.tsx at the isServer guard around setupLinkClaims, then read src/utils.ts matchLink and managedPath to see what a server-side computation would need (request path, query, base instead of document.baseURI). Reproduce with a renderToString render at a matching path and confirm the anchor lacks data-active/aria-current. Done means the server HTML contains both attributes (never data-pending), verified by an SSR test; the compiler/@solidjs/web hook is the larger follow-on, so scope the router-side change first.

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

Mô tả

Describe the bug

On next, the link-state attributes that plain anchors get from the router (data-active, aria-current="page") are never in the server-rendered HTML. They only appear after the client router hydrates.

setupLinkClaims only runs inside if (!isServer) in src/routers/factory.tsx, and in the server build of @solidjs/web, registerElementClaim() does nothing. That means:

  • Navigation styled with a[data-active] or a[aria-current="page"] shows no active link until hydration finishes, and the highlight then appears late. This is easy to see on slow connections or long streamed pages.
  • Pages that never hydrate (noScripts or HTML-only routes) never get active state. They also never get aria-current="page", so screen readers are not told which link is the current page.
Your Example Website or App

The minimal code is below. No hosted repro is needed because the behavior shows up in any renderToString output.

Steps to Reproduce the Bug or Issue
  1. Render a router app on the server at /about, with a plain <a href="/about">About</a> in a layout.
  2. Look at the HTML response.
  3. The anchor is <a href="/about">About</a>, with no data-active and no aria-current.
Expected behavior

The server HTML contains <a href="/about" data-active aria-current="page">About</a>, so the first paint already matches what the client will apply. data-pending would always be absent on the server.

Platform
  • @solidjs/router 2.0.0-next.35 (origin/next at 7c24cf1)
  • @solidjs/web and solid-js 2.0.0-rc.11
  • Not specific to any OS or browser
Additional context

The router side looks small, because matchLink in utils.ts is already a pure function shared with useLinkState. The server knows the request path, query and base, so it could compute the same active and exact result. Only the document.baseURI and window.location.origin checks in managedPath would need a server equivalent that uses the request URL.

The harder part is in the compiler. In SSR output, a static anchor is baked into the template string, so there is no runtime point where anything could add an attribute:

// generate: "ssr"
var _tmpl$ = ["<nav", "><a href=\"/about\">About</a><a", " class=\"x\">Dyn</a>", "</nav>"];
// generate: "dom"
_$claimElement(_el$2); _$claimElement(_el$3); _$claimElement(_el$4);

One possible design:

  1. In SSR mode, dom-expressions gives every a[href] an attribute hole, for example _$ssrLinkClaim(href), which returns "" or data-active aria-current="page". The hole must not change hydration keys.
  2. @solidjs/web adds a server-side registration hook for that function and calls it from ssrElement for spread anchors. With nothing registered it returns "", so apps without the router pay only one call per anchor.
  3. The router registers a server handler for each request that calls matchLink, and honors explicitLinks by checking for the link attribute.

Hydration should not be affected: Solid does not compare attributes during hydration, and the client claim keeps control of the attributes after the first navigation.

A smaller, router-only alternative is an inline script in the SSR output that marks matching anchors before hydration. That removes the late highlight, but it does not help pages that never load scripts, and those are where the missing aria-current matters most.

Ngôn ngữ chính
TypeScript
Star
1.3k
Fork
182
Merge trung bình
15 giờ 56 phút
Pull request đã merge (30 ngày)
44

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.