the business you want to achieve is to render the page first, and then add content to the page through ctx.body

the core code is as follows

await ctx.render("crawler", {
    title: "",
    content: `<h2></h2>
                <h4></h4>`
})
const linkPool = createLinkPool()
for (let i = 0; i < linkPool.length; PPi) {
    const html = await requestPage(linkPool[i])
    let builds = await dataHandler(html)
    let arr = [];

    const sql = "insert into buildinfo(id,name,area,address,average,price,description,type) values ?"
    //let rows = await query(sql, [builds])
    try {
        let rows = await query(sql, [builds])
        ctx.body += `${linkPool[i]}${rows.affectedRows}`

    } catch (error) {
        ctx.body += `${linkPool[i]}:${error}`
    }
}

the problem now is that the page will be displayed only when all the operations to write to the database are over, otherwise I have been reading the small circle all the time. How can I achieve the desired effect

I put the operation after rendering the page into a middleware with the following code

router.get("/crawler/", async (ctx, next) => {
    await ctx.render("crawler", {
        title: "",
        content: `<h2></h2>
                    <h4></h4>`
    })
    next()
})

page does perform the logic of storage operation after rendering, but

ctx.body += `${linkPool[i]}${rows.affectedRows}`

this operation does not write content to the page. Is my usage wrong? what does ctx.body do?