Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add some hint that the <ClientRouter /> component is no longer Astro's preferred approach to view transitions. #10902

Open
martrapp opened this issue Feb 6, 2025 · 0 comments

Comments

@martrapp
Copy link
Member

martrapp commented Feb 6, 2025

📚 Subject area/topic

View Transitions

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/de/guides/view-transitions/

📋 Description of content that is out-of-date or incorrect

Right now, view transitions are prominently featured at the end of the 'Routing and Navigation' section in the docs. The page gives the impression that, even in 2025, the recommended way to enable view transitions in an Astro project is by adding the Astro-specific <ClientRouter /> component.

This issue is intended as a nudge to follow through on Fred's announcement from last year. The <ClientRouter /> fka <ViewTransitions /> was originally meant to allow Astro users early experiments with the then new View Transition API and bridge the time until more browsers offer cross-document view transitions. We shouldn't present the <ClientRouter /> as a routing must-have. Instead, we should clarify upfront that it's a deprecated approach that doesn't align with Astro's "no JavaScript by default" philosophy. And that browser-native cross-document view transitions are the better alternative (if we agree on that).

I'm happy to leave the wording in docs to whoever is more involved with the docs.

From my perspective, these points might be helpful for Astro users:

  • Astro provides a built-in component for cross-document view transitions, even for browsers that only support same-document transitions. (Note: Currently, all browsers either support both or neither.)

  • It even enables a subset of view transitions for browsers with no native support at all. (Note: Right now, all major browsers except Firefox fully support native view transitions.)

  • No need for FOMO: Despite the fancy name, the ClientRouter isn’t unlocking a groundbreaking new world of client-side routing.

  • There are still some things the ClientRouter handles better than native view transitions (Firefox fallbacks, transition:persist, directional transitions, and animation functions). When using native view transitions, you would need extra (third-party) scripts for these.

  • But learning the still evolving web standard might be a better long-term investment than learning an Astro-specific subset variant.

  • If your page relies on non-trivial scripts, integrating them with the ClientRouter can be a challenge.

This background information doesn't need to go into the docs. Maybe a brief note at the start of the page is enough to let people know they might be better off using CSS View Transitions instead of the <ClientRouter /> component.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant