What is the correct way to have links to URLs?

[Grafcube]

This is probably a noob question but I couldn't find any examples for redirecting with ssr and hydrate. I want to have buttons that when clicked, redirects to a specific URL. For example, <a href="/login" ...> changes the url bar to localhost:3000/login but the contents of the page remains the same. Also, looking at the logs it seems like no requests are made to the server when it's clicked. I tried <A> as well but it didn't work. I have no idea what I'm doing wrong. Here is the file.

Also, I already have actix handler functions defined in the server package. What is the recommended way to call these? Should I make http requests or is there some other way? I may be misunderstanding something, but I didn't see any way to return specific actix errors from server functions. Any help is appreciated.

[gbj]

This is probably a noob question but I couldn't find any examples for redirecting with ssr and hydrate. I want to have buttons that when clicked, redirects to a specific URL. For example, <a href="/login" ...> changes the url bar to localhost:3000/login but the contents of the page remains the same. Also, looking at the logs it seems like no requests are made to the server when it's clicked. I tried <A> as well but it didn't work. I have no idea what I'm doing wrong. Here is the file.

You don't define a route /login in your app, so I'm assuming this is a page that's served somewhere else on your server? The Leptos router assumes any routes in the same domain are things within the Leptos app and tries to do a client-side navigation, which is why you're not seeing a request back to the server. To override this and have normal behavior for a link (doing a regular navigation and request to the server) you can add rel="external" (so <a href="/login" rel="external">...)

Also, I already have actix handler functions defined in the server package. What is the recommended way to call these? Should I make http requests or is there some other way? I may be misunderstanding something, but I didn't see any way to return specific actix errors from server functions. Any help is appreciated.

I think by "server functions" you mean the Actix handler functions you've defined, and not Leptos server functions, right? If you're defining API endpoints in your Actix server, then yeah, the only way to access them is by making HTTP requests, with something like the gloo-net crate. Leptos provides the concept of "server functions" as an easy way to integrate things like this into your app but you don't need to use them if you don't want to.

I don't understand the question about returning Actix errors, I'm sorry to say.

[Grafcube]

Yes I did it with rel="external" and it worked, but it didn't work when I returned a redirect from /api/v1/login in the form in the Login conponent. So I'm thinking that there's a better way to do this client-side by sending the other components as well but I'm not able to figure out how.

I think by "server functions" you mean the Actix handler functions you've defined, and not Leptos server functions, right?

No I was talking about leptos server functions. They return ServerFnError but my login handler in actix returns an actix_web::Error with functions like Err(ErrorNotFound(...)). I was thinking it would be more convenient as a leptos server function anyway but I couldn't find any examples on how to return http status codes in actix.

[gbj]

Yes I did it with rel="external" and it worked, but it didn't work when I returned a redirect from /api/v1/login in the form in the Login conponent. So I'm thinking that there's a better way to do this client-side by sending the other components as well but I'm not able to figure out how.

Sorry but I'm not sure I understand. When you say "it didn't work when I returned a redirect" I'm not sure what you mean. It looks like your API endpoint returns a redirect to / What is your expect behavior, and what is the actual behavior you're encountering?

I think by "server functions" you mean the Actix handler functions you've defined, and not Leptos server functions, right?

No I was talking about leptos server functions. They return ServerFnError but my login handler in actix returns an actix_web::Error with functions like Err(ErrorNotFound(...)). I was thinking it would be more convenient as a leptos server function anyway but I couldn't find any examples on how to return http status codes in actix.

I see, I was confused because I didn't see any server functions. actix_web::Error doesn't implement Serialize or Deserialize, so it can't be returned directly from a server function. It does implement Display, so you could convert the actix_web::Error to a String and return it as Error(ServerFnError::ServerError(e.to_string())).

To set a status code using leptos_actix you can let resp = use_context::<ResponseOptions>(cx).unwrap(); inside a server function. This gives you ResponseOptions, at which point you can just use the set_status method.

[Grafcube]

To set a status code using leptos_actix you can let resp = use_context::<ResponseOptions>(cx).unwrap(); inside a server function. This gives you ResponseOptions, at which point you can just use the set_status method.

This is exactly what I was looking for. Thanks! I don't think I even need to use actix_web::Error here. Do I return this by passing it like ServerFnError::ServerError(resp))?

Sorry but I'm not sure I understand. When you say "it didn't work when I returned a redirect" I'm not sure what you mean. It looks like your API endpoint returns a redirect to / What is your expect behavior, and what is the actual behavior you're encountering?

Sorry, I should have been clearer. The flow I want is, an anonymous user clicks the sign in button on the homepage (/). This takes them to /auth where a login form is available (it's also meant to have a user registration form but I haven't done that yet). Once the form is submitted, the cookie is set with actix_session and the user is directed back to / which now has more options (which is also tbd). Using rel="external" solved the problem where anchor tags changed the URL but didn't refresh the page. But when I tried to have /api/v1/login return a 307, it changed the URL but didn't refresh the page. All this leads me to believe that my approach is entirely wrong (sorry, this is my first time doing web development outside of toy projects). What is the recommended way to achieve this behaviour? I'm thinking of moving the login part to a leptos server function but I'm not sure how to do same site redirects correctly (both anchor and server) when I'm using ssr and hydrate.

[gbj]

I think maybe there was a typo or something earlier, which led me to misunderstand. Are you saying that when the user clicks a link to /auth (which is defined in your app) the URL changes but nothing in the UI changes, or when a user clicks a link to /login (not defined in your app) this happens?

If it's to /auth and nothing is rendered this is a totally different bug and we should figure that out first. You don't need the rel="external" if it's a link to a route you're actually defining in your app. I led you astray.

I am wondering if there are any errors or warnings appearing in the console in your browser dev tools. It seems to me like something is definitely going awry here but I'm not quite sure what it is.

---

Because I was curious, I actually cloned the repo and commented out all the database/Redis stuff I didn't have.

When I load and click "Sign in," I get your described behavior. I refresh and open the console and see a bunch of warnings:

component with id _0-0-0c not found, ignoring it for hydration [wordforge.js:494:9](http://localhost:3000/pkg/wordforge.js)
component with id _0-0-6-0c not found, ignoring it for hydration [wordforge.js:494:9](http://localhost:3000/pkg/wordforge.js)
component with id _0-0-6-1-0c not found, ignoring it for hydration [wordforge.js:494:9](http://localhost:3000/pkg/wordforge.js)
component with id _0-0-6-1-2c not found, ignoring it for hydration [wordforge.js:494:9](http://localhost:3000/pkg/wordforge.js)
component with id _0-0-6-1-2-0c not found, ignoring it for hydration [wordforge.js:494:9](http://localhost:3000/pkg/wordforge.js)
component with id _0-0-6-1c not found, ignoring it for hydration [wordforge.js:494:9](http://localhost:3000/pkg/wordforge.js)
component with id _0-0-1c not found, ignoring it for hydration [wordforge.js:494:9](http://localhost:3000/pkg/wordforge.js)

Looking at your app, I see an immediate issue: <Home/> and <Auth/> both provide <body> tags. This would be fine except that Leptos is already providing a <body> tag, and mounting your app to it. (This is why the hydrate function in your ui/src/lib.rs is mount_to_body—it locates the existing <body> element and mounts it there.)

Browsers being what they are, providing two <body> elements in an HTML document silently leads to some weird stuff (namely, that the one you've provided is merged into the one that was already there that the framework provided), which leads to an off-by-one type issue when the framework tries to hydrate your app.

Solution: remove the <body> elements from your components.

Bonus points: we actually provide a <Body/> component that lets you still set classes on your <body> if you need it. So this version works fine:

#[component]
fn Home(cx: Scope) -> impl IntoView {
    view! { cx,
        <Body class="main-screen"/>
        <Topbar/>
        <div class="fixed flex flex-row">
            <Sidebar/>
            <div class="items-center text-left overflow-auto">
                <p class="mx-auto text-6xl text-center">"EVENTS"</p>
                <p class="mx-auto text-6xl text-center">"RECOMMENDATIONS"</p>
            </div>
        </div>
    }
}

I hope this solves some of the pain! I'd expect most of what you were trying to work better now.

Takeaways

• Always check the browser console if something seems weird
• Welcome to the extremely wacky world of the Web and strange browser behaviors.
• Happy development.

[Grafcube]

Thanks! I didn't realize that the body tag was to blame. I should probably go through leptos::html so I have a better idea of what tags to use.