<p dir="auto">Having animated route transitions would be nice, as this is one of the many benefits through client-side routing. Doing so should be left up to the user in my opinion (some people prefer CSS transitions over more fine-grained control with <code class="notranslate">react-motion</code> etc). As I understand it, one would need to modify the top-level App component.</p>
<p dir="auto">The <a href="https://github.com/zeit/next.js/blob/master/client/next.js#L13">client entry file</a> seems to look for a globally assigned <code class="notranslate">__NEXT_DATA__.app</code> variable but I can't find any documentation on that.</p>
<p dir="auto">I noticed that one React root is used, while this is certainly the simplest solution, I'm curious if there's a plan to support or use multiple React roots?</p>
<p dir="auto">In the current architecture with a single root, a client-side navigation blows away everything visible on the page and re-renders everything for the new route, including parts of the component tree that exist on both routes.</p>
<p dir="auto">With multiple React roots, common site elements like a <code class="notranslate">&lt;header&gt;</code> could be in their own React root, and when the same page "region" exists between two routes the component tree won't need to be torn down and re-rendered during that client-side navigation. An architecture with multiple roots/regions would also allow the server to flush out to the response before waiting for the entire page to be rendered.</p>
<p dir="auto">I imagine that when using Next, it'll be natural to break out common page-level UI component trees, like the site's header, and reuse it on all pages, similar to an "include", and at these page "region" boundaries there's an opportunity to use multiple React roots to speed up both server and client rendering.</p>
<p dir="auto">So I'm mainly curious if this sort of thing might be part of Next in the future, or if the simplicity of one React root and re-rendering the entire page on client-side navigation is an explicit design decision for the framework?</p>