Replies: 6 comments
-
|
A somewhat quick and dirty demo: Kapture.2022-09-17.at.13.32.33.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Notes from the Sept 20 Community Call
|
Beta Was this translation helpful? Give feedback.
-
|
This is a really nice proposal that fits very nicely without needs as we use a lot of SSG. We chose the following architecture: Use Astro itself sparingly as templates for generated pages, on each page using a template that loads a header, sidebar and footer. The first two should be persistent across all pages. To solve this we build an Observable store with For the sidebar, it's about keeping the navigation state open and showing the user's name from the shared user state at the top. With future opt-in for ssg vs ssr, we can see us moving to hybrid but again needing this approach across multiple pages. |
Beta Was this translation helpful? Give feedback.
-
|
Love the ideas here! There is an added feature MPA-to-SPA routing libraries like turbo or taxi.js give you with the idea of persistent elements: seamless page transitions. I'm curious, would this proposal include the event lifecycle it takes to enable seamless transitions? I've just finished a project using taxi.js and really enjoyed their Transitions API which allows you to define multiple transition types and animate DOM elements from the leaving page content to the entering page content. If you do plan to include this feature in the scope I could see there being an issue with deciding to choose which navigation style based on the initial existence of persistent islands, because you may want to persist an item in real-time (maybe because you clicked it), changing it to being persistent right before you navigate away. |
Beta Was this translation helpful? Give feedback.
-
|
This is something that MPAs lack, and kind of pain to implement in astro. The Shared Element Transition API still sits behind a flag on chrome today and nonexistent on other major browsers. |
Beta Was this translation helpful? Give feedback.
-
|
This proposal has been accepted and promoted to Stage 2 as Client-side Routing (#532). Please continue discussion on #532. |
Beta Was this translation helpful? Give feedback.
-
Persistent Islands
Summary
This is a spin on the "SPA mode" idea we've been kicking around for a long time. The key difference is that instead of turning on SPA mode for the entire site, persistent islands is a way to mark DOM that should persist between page navigations.
This is holistic with our usage based opt-in approach to client JS and allows for sites that are a mixture of MPA and SPA. When the user lands on a page without any persistent islands the next navigation will be a full-page MPA-style navigation. When they land on a page with persistent islands, the next navigation will be SPA-style, with the marked islands persisting.
Example
To mark an island as being persistent use the
navigation:persistattribute like so:Note that there's probably no reason that
navigation:persistcan't be applied to non-interactive content such as Astro components:Motivation
Astro users have been asking for a way to persist content on pages for a long time. We have played around with many "SPA mode" approaches.
This is an attempt to bring some of the benefits of SPA mode without giving up the simplicity of multi-page architecture, and to pair it with Astro's opt-in approach to more advanced use cases.
Design
This likely would be implemented very similarly to previous SPA-mode proposals. It might be nice to, instead of diffing the page, simply stitch together DOM around the islands. Need to experiment to see how possible/practical that would be.
Side note
Thinking about this idea has me also thinking about the previous server islands idea.
Imagine you could mark a component as
server:dynamic. This would statically generate all of the rest of the page except for those components. In effect you get "per-page SSR vs SSG" using this method, but again using usage-based opt-in rather than page-level or site-level configuration.Beta Was this translation helpful? Give feedback.
All reactions