Rendering Problem from server to client and client to server

This is main.js where my landing page is render and this is here

let posts = [
    {
        title: "Hello World!",
        content: "Hello World!",
        date: "01klfljs",
    }
];

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
app.use(bodyParser.json());

app.get("/", (req,res) => {
    res.render("index.ejs");
});

app.get("/myblog", (req,res) => {
    res.render("myblog.ejs", {
        posts
    });
});

app.post("/myblog", (req,res) => {
    const post = {
        title: req.body.title,
        content: req.body.content,
        date: new Date(),
    }
    posts.push(post);
});

This is myblog.js where I want to add this to main.js

const api_url = "http://localhost:3000";

app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.get("/", async(req,res) => {
    try{
        const {posts} = req.body;
        const response = await axios.get(`${api_url}/myblog`);
        res.render("backend.ejs",{
            posts: response.data,
        });
    }
    catch(error){
        res.status(500);
    }
});

This is backend.ejs, where all file will upload, edit

<body>
    <a href="/new">Create a New Post</a>
    <div>
       <ul>
        <% post.forEach(post => {%>
          <li>
            <h2><%= post.title %></h2>
            <h3><%= post.content %></h3>
            <h4><%= post.date %>/h4>
          </li>
          <% }); %>
       </ul>
    </div>

This is myblog.ejs where all file to be shown from backend.js

<body>
    <ul>
        <% posts.forEach(post => { %>
            <li>
                <h2><%= post.title %></h2>
                <h3><%= post.content %></h3>
                <h4><%= post.date %></h4>
            </li>
            <% }); %>
    </ul>
</body>

I want render data from myblog.ejs to backend.ejs
where is the problem ?