Bump

https://github.com/vercel/next.js/discussions/42658 related discussion

its not possible currently

with app router

and using template.ts is not good either

it removes caching

to use page transition you need the page router

I have nothing to add to the original question, just pointing out that using template.js is completely fine and caching is not affected.

@joulev really?

Yes

i looked at the docs and it does affect some performance even with lighthouse i get the same

Could you send the source?

A template file is similar to a layout in that it wraps each child layout or page. Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation.

Template is simply layout that is remounted on navigation. I don’t see how that’s related to caching and performance

hmm okay because using lighthouse it shows a difference in performance

because of the rerendering

whereas layout it persist the state so for a navbar for example

Yes so you are not supposed to put the navbar in the template. Put it in the layout, you can use both at the same time.

In the case of route transition, you want the transition to happen on navigation between all pages. In other words, remounted in all pages. So you put it in the template and not the layout.

oh okay, i guess i didnt read that you can use both at the same time.

That being said, I myself haven’t been able to make exit animation in the app router. Entry animation is not hard with the help of the template file, but exit animation I currently know of no easy ways (there are some repos on GitHub that could do it but they employ some internal things)

but surely template will still affect performance though if page refresh for example with heavy computations

or is this incorrect?

If you want to do that heavy computations every route change, then template or your custom solution all have to run that heavy computation, no? How is template at fault here then

okay i guess i need to read over how template.js works because at least from reading the docs, it rerenders all children

and doesnt persist state

No it doesn’t rerender the children. The children are merely passed to the template as prop, the template function is not the react component that renders the children

oh okay thanks