SPA Router

[natemoo-re]

• Implementation PR: Add experimental SPA router astro#7145
• Stage 2 Proposal: Client-side Routing roadmap#532

Needs

Note that this feature will be released as experimental at first.

The config reference page will include details on about how to enable this feature.

This might require some restructuring of other docs pages that mention MPA vs SPA as general concepts.

How it works

API is being finalized, but will likely be configured globally in the astro.config.mjs file.

defineConfig({
  router: 'spa'
})

This will enhance all <a> tags to perform a soft navigation rather than a full page reload.

Individual <a> tags can use data- attributes to control specific behavior.

• <a data-router-ignore> will skip SPA navigation and perform a traditional page load
• <a data-router-noscroll> will not scroll to the top of the page upon navigation
• <a data-router-keepfocus> will not reset focus upon navigation

Reference

Although the implementations are quite different, SvelteKit has similar behavior. Their Link Options documentation could be useful conceptual reference.

[NaCoLiu]

I think it is necessary to introduce an export router as a configuration file to control routing, rather than using the default Astro routing. for example

export const router =<AstroRouterType[]> [
 {
   name:'Page',
   path:'/page',
   render: ()=>import('*.astro or tsx')
 }
]

Also, add a label similar to routing view to the layout to support the main body of routing switching.

[gvkhna]

Is the idea to handle form submissions as well? I think that’s the biggest oversight most solutions make, basically leaving the rigamarole of handling to the dev. Turbo handles form submissions, it would be great to see that as well.

[delucis]

Closing until we have the next implementation PR for this proposal.