View Transitions API implementatio

[true dock]

https://akhmadshin.github.io/

[sharp kraken]

It's great, can you share the resources or documentation on its implementation

[true dock]

I'm gonna publish an article soon

[quartz crow]

I m gonna learn try to implement

[upbeat seal]

that's amazing bro

what did you use

[sharp kraken]

Anu update?

[true dock]

I have decided on the structure of the article. This will be a step-by-step guide about creating a website with optimistic navigation, divided into several articles. As for the code, I'll try to post it tomorrow. I warn you in advance, this website uses pages router. But maybe you can adopt some parts of it to app router

[minor forum]

Are you using pages router to achieve this?

[true dock]

yes, I'm not sure if it's possible on app router

[minor forum]

cool. yeah i've not found a way that wasn't extremely hacky on app router.

[true dock]

on page router I'm using that hook
https://github.com/vercel/next.js/discussions/32243#discussioncomment-5554450
and tanstack-query to manually shoot data requests on the client
https://tanstack.com/query/v4/docs/framework/react/guides/ssr

[minor forum]

Very nice! I’ve done it with framer motion but not like this. Would love to see the repo or tutorial when you’re done 🙂

[true dock]

Final result with optimistic navigation (instant navigation on any device/internet) and view transition api
https://github.com/akhmadshin/optimistic-navigation-next-pages
Initial step, basic next js project with view transition api.
https://github.com/akhmadshin/optimistic-navigation-next-pages/tree/step-1

To imitate real world heavy application, this web site renders UselessCalculations component.
To imitate slow backend, I added delay on data calls - 600ms.

I'm gonna work on step by step guide about how to achieve final result (master branch)

[true dock]

Here's difference between step-1 branch and master

[true dock]

I'm still working on main branch to make more stable and improving dx. For example, now you don't need to manually write queryKey in getServerSideProps, just use resolvedUrl. usePageData now can generate the same resolvedUrl (with respect for trailingSlash option from next.config)

[true dock]

Now all tanstack-query logic is hidden in withServerSideTanStackQuery function
before / after

And to get the data all you need to do is call a usePageData hook (no more props drilling like in default next.js)

[true dock]

is it constant? How did it happened?

[golden onyx]

It appears to be constant

Now, when I load the page, the home link appears at the top, but that might have been hidden because it was in dark mode before

[true dock]

Thank you! Most likely it's because of requestIdleCallback(), which doesn't have support in safari. I'll fix it soon

[true dock]

That error should be gone now

[true dock]

I have a lot of updates!
Now logic related to patching next js router moved to sepparate library.
https://github.com/akhmadshin/next-optimistic-router
And this library works much better! First of all, it doesn't change main next js logic, so you can use default next/link. Second, now it works with middleware file. And finally, I added support of page transition on history change.
Here's demo
https://akhmadshin.github.io/
And demo code:
https://github.com/akhmadshin/optimistic-navigation-next-pages

[light sphinx]

Does it require you you to use page router instead of app router still?

[true dock]

yes, because you won't be able to achieve same constantly instant navigation in app router. It's not possible by it's design

Here's how this library works in action. The page content is loaded only once. Even when you click on the browser's back and forward buttons.
Page content is loaded through usePageData react-query hook (no more prop drilling) and thanks to react-query I can control when the page content becomes stale and requires refetching (5 minutes in demo site).