Enter/exit animations using CSS or animation libraries.
Features that rely on useEffect (e.g logging page views) and useState (e.g a per-page feedback form).
To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.
Recommendation: We recommend using Layouts unless you have a specific reason to use Template.
A template can be defined by exporting a default React component from a template.js file. The component should accept a children prop which will be nested segments.
app/template.tsx export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}
The rendered output of a route segment with a layout and a template will be as such:
Output <Layout>
  {/* Note that the template is given a unique key. */}