Server Rendering In Axum about svelte-axum-project HOT 6 CLOSED

If you are using svelte in a single page configuration then you are better modifying the tags through svelte as per the website suggestion in my previous comment.

Svelte is a front end framework so the html page is already loaded on the client side and the svelte / JavaScript can be used to modify the html while on the client. Svelte does not create html on the server side and then send it to the client. Svelte will use what ever static site is loaded on the client and modify it on the client side.

For a multi page app, you could use Axum to format html static resources but you will need to be-careful how you want the compiled svelte code to be added to each route assuming it's wanted.

I guess we could add a multi page app somehow with Axum serving static html with the associated compiled svelte code. Not sure if others have any interest in this or comments to help?

Others - Please correct me if I'm wrong in my explanations.

from svelte-axum-project.

Not sure what you are asking exactly. Let me know if this helps or if you have any questions, or a possible improvement.

Axum can spit out html however you want it. You could use a template framework to format the html, or you can just format a html response directly.

async fn home() -> Html<&'static str> {
    Html("hello world")
}

With svelte, as in this template, the html starts with static assets found in svelte-axum-project/front_end and then svelte is using JavaScript to manage the html. You would then have to manage the html with svelte. Take a look at https://www.freecodecamp.org/news/configure-metadata-in-single-page-applications/

from svelte-axum-project.

Hi,
I want to use Svelte to generate the HTML to assets folder.
In this repo, the assets are handled using ServeDir.
However, I want to ask if it is possible to modify the meta tags before returning to the user.
The Open Graph meta tags have to be rendered in the HTML so the social media can accept them.
My current idea is to add handlers for each route and use tokio fs to read and modify the tags. Not sure if it is good or not

from svelte-axum-project.

Here is my workaround. I add a route "/" to the following index function. The contents variable is the String that contains the contents of the front_end/dist/index.html. The next step is to modify the contents String and add the meta tags that are required by Open Graph protocol.

async fn index() -> Html<String> {
    let path = format!("{}/index.html", FRONT_PUBLIC);
    let contents = match tokio::fs::read_to_string(path).await {
        Ok(str) => str,
        Err(err) => return Html(format!("Error: {}", err)),
    };
    println!("content = {}", contents);
    Html(contents)
}

from svelte-axum-project.

@quanhua92, just curious; why you don't modify the static index file? ./front_end/inddex.html directly?

from svelte-axum-project.

@jbertovic I want to add the meta tags to each /blog/id route. So each blog page will have different open graph data. It is a better option to have a default value in index.html. Then, Axum code can simply do a regex to replace the content

from svelte-axum-project.