Introduction

The overall goal in this set up to have a server rendered application with smooth page transitions and instant loading speeds.

React server components

RSC by design shifts as much JS to the server as possible. This can result in "blazingly fast" page load speeds but does demand a different approach to data management. Context will work but only in client components which we will be keeping to a minimum in this guide.Cross document view transitions.

Cross document view transitions

View transitions work well today and can be divided into two types same page & cross document. Same page are fully supported in React 19.20 (but then so was the react to shell exploit so I'd probably skip to 19.3 if I was you) these transitions work well with page filtering and sorting or other SPA UI functionality.

Adding the basic fade functionality is simple you simply add the following CSS to both the source and destination locations.

@view-transition {
  navigation: auto;
}

header {
    view-transition-name: header;
}

The next step is to name your components with view transition names. Start off with persistent components such as the header and footer as we'll want to 'freeze' these in position.

Speculation rules API

So Next.js doesn't natively support Cross document view transitions. Well luckily we can use anchor tags instead of the Next link tag which highjacks native page navigation and instead uses the React router.

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": {
          "and": [
            { "href_matches": "/*" },
            { "not": { "href_matches": "/logout" } },
            { "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
            { "not": { "selector_matches": ".no-prerender" } },
            { "not": { "selector_matches": "[rel~=nofollow]" } }
          ]
        }
      }
    ],
    "prefetch": [
      {
        "urls": ["next.html", "next2.html"],
        "requires": ["anonymous-client-ip-when-cross-origin"],
        "referrer_policy": "no-referrer"
      }
    ]
  }
</script>

The down side of this is we loose Next's fancy preloading of page assets on link hover.