Create complex navigation at RSC demo

[pedrobslisboa]

Description

This PR adds a more complex RSC navigation to the RSC demo.

Todos

RSC Routing

Description

Understand how we can improve the routing for our RSC.

How

@david.sancho already started a Router, we can continue from there

• Try it in the demo
• How can we have nested routing?
• Should Layout be a specific part of the navigation, or can it be achieved with nested routing?

Notes

• Nextjs route tree:
  *

  0: { "b": "development", "f": [ [ "children", "note", "children", [ "id", "1757357171759", "d" ], "children", "__PAGE__", [ "__PAGE__", {} ], [ "__PAGE__", [ "$", "$1", "c", { "children": [ "$L2", [ [ "$", "script", "script-0", { "src": "/_next/static/chunks/node_modules_81a97b._.js", "async": true, "nonce": "$undefined" }, null ], [ "$", "script", "script-1", { "src": "/_next/static/chunks/_e6d2ac._.js", "async": true, "nonce": "$undefined" }, null ], [ "$", "script", "script-2", { "src": "/_next/static/chunks/app_note_%5Bid%5D_page_tsx_60d685._.js", "async": true, "nonce": "$undefined" }, null ] ], [ "$", "$L4", null, { "children": "$L5" }, null ] ] }, null ], {}, null ], [ "$", "$1", "h", { "children": [ "$7", "$11" ] }, null ] ] ], "S": false }

Todos

• How to create nested routing?

• It can be achieved in different ways. The path that I took was more similar to the react-router where we can control the nested routing by context. ()

  • Perhaps that isn't the best approach, but it's quite simple to understand and maintains acceptable performance without unnecessary rerendering.
  • The rerender happens only on the router that is being affected:
  Screen.Recording.2025-10-02.at.10.13.59.mov

  • We can also use this context to hide the <Outlet /> and treat it as children for layout.
    Route type:

    type t = { path: string, layout: option((~children: React.element) => React.element), page: option(unit => React.element), children: option(list(t)), }; 

• What is the difference between layout and routing?

  • Layout is the part of the code that remains unchanged on navigation, and page is the content of the current path. So the layout represents the root content of a page. So we don't declare, for example, "/about" and "/" to create the /about page. We instead create the about.layout, as the wrapper, and the "/" will be considered the about.page. As soon as we navigate to "/about/me" we will keep the about.layout but the final page will be composed by me.layout + me.page.
  • Both layout and page are optional; if no layout is provided, we return the page as is. If there is no page, we consider the route as 404. If the layout and page exist, we return layout(~children=page)

• Why does React Router use Outlet?

  • Does it make sense to use children instead?
  • Can we create a good stack tracing with ?

• How to create dynamic routing?

  • Dynamic routing is solved by using the /: for dream it.

• Handle the loading state between navigation

• Nextjs does not shows the loading state of loading as soon as it can:

  Screen.Recording.2025-10-03.at.16.26.12.mov
  • Can we make better than this? Like triggering the loading suspense as soon as we can on client?

• Improve the route declaration.

  • Currently, I'm work with /demo/router/**
    Can we instead have all the routes already pre-declared?
    Sample [get("/demo/router/home"),get("/demo/router/about"), ...]

• How to have the route info working across the app?

  • How does React Router handle it?

• Add control over the browser back and forth buttons

  • How to keep the state cached in the history?
  • How does nextjs do it?
  • How does React Router do it?
    • Maybe for the V0, we can keep the request on those steps?