Astro view transitions

[sudden jetty]

Can someone help me understand View Transitions better? Do you use that over react virtual dom, or when to use over virtual dom, framer motion libraries ?
I'm using astro with react.

Also I was thinking 2 points.

1. View transitions are mostly for native astro and it's css? They don't consider react or any other supporting UI library or frameworks in the picture ? (I know I can use view transitions with react or any other supporting UI library or frameworks)
2. If I'm using only view transitions then the components need not be client rendered ? If I have a big component where most of the things can be server rendered and there is a one small thing needs to be client rendered then it makes no sense to make the whole component client rendered right ? that's where view transitions come into the picture ?

[violet creek]

Hi @sudden jetty 👋 if you are looking for how to use view transitions with React, this one might be for you: https://github.com/facebook/react/pull/31975

Note: React's <ViewTransition> component is not the same thing as Astro's former <ViewTransitions> component (now renamed to <ClientRouter>)

[keen bloom]

Thanks @violet creek for the help!

We are stil learning astro concepts, I believe for the below the context is all considering "Astro's former <ViewTransitions> component (now renamed to <ClientRouter>) "

Do you mind assisting with these specific questions?

Do you use that over react virtual dom, or when to use over virtual dom, framer motion libraries ?
I'm using astro with react.

View transitions are mostly for native astro and it's css? They don't consider react or any other supporting UI library or frameworks in the picture ? (I know I can use view transitions with react or any other supporting UI library or frameworks)
If I'm using only view transitions then the components need not be client rendered ? If I have a big component where most of the things can be server rendered and there is a one small thing needs to be client rendered then it makes no sense to make the whole component client rendered right ? that's where view transitions come into the picture ?

[violet creek]

Hi @keen bloom 👋

Do you mind assisting with these specific questions?
I will try my best 🙂 I personally use Astro without frameworks, so I can't say much about React."

The <Clientrouter /> kicks in on navigation and replaces the current DOM with a new DOM loaded from the target URL.
It keeps the window and document object of the current page , but replaces head and body. You can find lot's of details about this on https://events-3bg.pages.dev/jotter/astro/flow-events/ and adjacent pages.

If you have a client-side island with a react app in the current DOM, you can use transition:persist (https://docs.astro.build/en/guides/view-transitions/#maintaining-state). This copies the island to the new page.

Without persist, the new DOM replaces the old DOM during navigation, and the state of the current React island is lost.
If the island is present on the next page it will be hydrated and shown as if the page was loaded for the first time.

So, yes, the client router is about client-side swapping of statically or on demand rendered content from the server.
Using view transitions with islands will do a transition from the current DOM to the DOM as loaded from the server. Client-side rendering will happen after the transition and transition:persist mentioned above allows you to maintain state by keeping existing elements from the old DOM.

As you assumed, your example works best with the client router if the page is server rendered and only the small thing is client-rendered.