Skip to content

Native SPA-like navigation for MPAs #481

@daKmoR

Description

@daKmoR

Explore adding a native navigation enhancement for Rocket sites using:

  • Speculation Rules API
  • Cross-document View Transitions

Goal: make static/MPA sites feel closer to SPA navigation while keeping the architecture HTML-first and router-free.

Why

Rocket sites are mostly static, content-first pages. They should stay simple, crawlable, and resilient, but navigation can feel more polished.

Modern Chromium browsers support two native platform features that work especially well together:

  1. Speculation Rules preload likely next pages.
  2. View Transitions animate same-origin page navigations.

Together this can give us:

  • faster perceived navigation
  • smoother page transitions
  • no client-side router
  • no hydration requirement
  • progressive enhancement
  • normal page-load semantics

Possible default behavior

Add an optional config:

export default {
  navigation: {
    viewTransitions: true,
    speculationRules: {
      prefetch: 'moderate',
    },
  },
}

This could output something like:

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
<script type="speculationrules">
{
  "prefetch": [{
    "source": "document",
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/*?*" } }
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Constraints / questions

Need to refine:

  • Should this be enabled by default or opt-in?
  • Should Rocket generate safe default exclusions?
  • Exclude external links, query URLs, downloads, forms, auth/admin pages?
  • Should prerender be supported or only prefetch?
  • Should users be able to configure eagerness?
  • Should we provide named transition helpers?
  • How to avoid duplicate view-transition-name issues?
  • How does this interact with analytics?
  • How should this work in dev mode?

Initial stance

Probably:

  • opt-in first
  • use prefetch, not aggressive prerender
  • keep it progressive enhancement
  • no JS fallback by default
  • unsupported browsers simply get normal MPA navigation

Positioning:

SPA-feel, MPA architecture.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions