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?