Rendering and Routes: Two Routes, One Render Decision
Studio stores compositions. Your framework serves the HTML. Everything in this group follows from that split: Studio needs somewhere in your app to render into, and you decide how that rendering happens.
Do It With a Skill
setup-section-preview adds the canvas route, then prints the matching Canvas URL for you to set in Studio. setup-template-preview-routes wires the catch-all, including site chrome and 404 handling. Run them in that order, for the reason above.
The Two Routes Are Not Interchangeable
| Route | Mounts | Serves |
|---|---|---|
| Canvas route (e.g. /canvas) | <StudioCanvas /> | Studio’s iframe when an author opens a Section |
| Catch-all ([[...slug]], path="*") | <StudioComponent /> | Every visitor URL a Template owns |
Both are required on a normal project. The canvas route must be registered above the catch-all, because a wildcard matches /canvas like any other URL — and when it wins, Studio’s section iframe renders your 404 instead of the canvas.
| Page | For |
|---|---|
| Choose CSR or SSR | The render decision, made once, before the routes |
| SSR composition query | Fetching on the server so the first response carries the page |
| Section preview route | The canvas route, per framework |
| Template preview routes | The catch-all, and URL-pattern resolution |
| Serve your canvas over HTTPS locally | The fix for “Studio can’t reach localhost” |
Decide the Render Model First
CSR and SSR change what the routes contain, not just how fast they are. Choosing after you have written the routes usually means writing them twice.