Feature Request: Persistent layout (navbar/sidebar/footer should not remount on navigation)

[eribertocz]

Problem

Reflex has no built-in API for persistent layout across pages.
Every page compiles to an independent React component inside ,
so navbar/sidebar/footer remounts on every navigation.

Expected

A simple Python API like:

app = rx.App(layout=my_layout)

or

@rx.layout
def my_layout(content):
return rx.vstack(navbar(), content)

Similar to:

• SvelteKit: +layout.svelte (since v1.0)
• Next.js: layout.tsx (since v13)
• NiceGUI: automatic

Why this matters

This is the most basic feature any multi-page web app needs.
It should have been in v1 Without it, every page navigation
remounts the entire UI chrome unnecessarily.

Verified with Reflex 0.8.27 by inspecting generated JSX.

[masenf]

This is a good callout, and I agree that it's important to give users more control over their app-wrapping components.

Technically this is possible today using app wraps, but I agree that the API is not the cleanest.

Here's how it can be done:

from typing import Callable

import reflex as rx

from reflex.utils.prerequisites import get_app


def page(unique: str) -> Callable[[], rx.Component]:
    """Create a page with a unique identifier.

    Args:
        unique: A unique identifier for the page.

    Returns:
        A function that returns the page component.
    """

    def _page() -> rx.Component:
        return rx.vstack(
            rx.heading(f"Page {unique}", size="9"),
            rx.link(
                rx.button("Go back to index"),
                href="/",
            ),
        )
    _page.__name__ = f"page_{unique}"

    return _page


def index() -> rx.Component:
    return rx.vstack(
        rx.heading("Welcome to Reflex!", size="9"),
    )


@rx.memo
def common_layout(c: rx.Component) -> rx.Component:
    pages = [
        (page.title, route)
        for route, page in get_app().app._unevaluated_pages.items()
        if route not in ("index", "404")
    ]
    return rx.hstack(
        rx.vstack(
            rx.heading("Common Sidebar"),
            rx.link(
                rx.hstack(
                    rx.icon("home"),
                    "Home",
                ),
                href="/",
                width="100%",
                padding="var(--space-3) var(--space-4)",
                _hover={
                    "background_color": rx.color("accent", 4),
                },
            ),
            rx.accordion.root(
                rx.accordion.item(
                    header=rx.hstack(rx.icon("file-text"), "Pages"),
                    content=rx.vstack(
                        *[
                            rx.link(
                                rx.hstack(
                                    rx.icon("lightbulb"),
                                    title,
                                ),
                                href=f"/{route}",
                            )
                            for title, route in pages
                        ],
                    ),
                ),
                collapsible=True,
                variant="ghost",
                width="100%",
            ),
            rx.text("This content does not re-render"),
        ),
        rx.vstack(c),
    width="100%",
)
        
@rx.memo
def color_mode_control() -> rx.Component:
    return rx.color_mode.button(position="top-right")


app = rx.App()
app.extra_app_wraps[0, "AppWrap"] = lambda _: common_layout(c=rx.Var("children"))
app.extra_app_wraps[3, "ColorModeControl"] = lambda _: rx.Fragment.create(color_mode_control())
app.add_page(index)
app.add_page(page("A"), title="Page A")
app.add_page(page("B"), title="Page B")
app.add_page(page("C"), title="Page C")
app.add_page(page("D"), title="Page D")
app.add_page(page("E"), title="Page E")

Having a nice API around this and cleaning up some of the rx.memo weirdness would probably go a long way.

Additionally, it seems that our current navigation triggers additional renders in the StateProvider and its descendents, it would be nice to find out why and reduce the number of renders per navigation from 4 to ideally 1