'rendering information from a postgres database in node.js

I'm just wondering if there's any way to render things from your database on top of a html page in node. Without using template engines or react/next.js? I could use react and next.js but I would have to reformat all my html as js. I could also use a template engine like mustache but I would also have to reorganize my file structure to some extent which isn't a big deal but I'd rather not if I don't have to. The only way I can find is just to send the whole code of my html in a res.send() function. it works and I can put various things from my database into the html code but it doesn't seem very practical. I also thought about using php but i read from this website that it's not a good idea to run php in a node environment. What I'm doing now is essentially this inside of my express route

    res.send(`
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Reflect</title>
            <link rel="stylesheet" type="text/css" href="http://localhost:5000/resources/css/threads.css">         
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">

            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">     
        </head>
        <body>
            <nav>
                <div class="navleft">   
                    <a href="/"><h3>Reflect</h3></a>
                </div>
                <div class="navright">  
                    <a href="/forums"><h3>Community</h3></a>
                    <div class="drop-down">
                        <a href=""><h3>Account</h3></a>
                        <div class="drop-down-content">
                        <a href="/login" class="login"><button class="button">Login</button></a>
                        </div>
                    </div>
                </div>  
            </nav>
            <main>
                <div class="background"></div>               
                <h1 class="main-header">Forums</h1>
                <div class="top-bar">
                    <div class="site-location">
                        <h3 class=""><a href="/forums">Home</a> > <span class="forumNav"></span> > All</h3>
                    </div>
                    <div class="search">
                        <form action="" method="POST">
                            <input class="search-input" type="text" placeholder=" Search...." name="search">
                            <button class="search-button" type="submit">SEARCH</button>
                        </form>
                    </div>          
                </div>
                <div class="column-container">  
                    <h3 class="new-thread"><a href="" class="newthread">New Thread</a></h3>  
                    <div class="threads">                       
                        <h2 class="thread"><a href="" class="thread1">Introduce yourself</a></h2>
                    </div>
                    <div class="threads">                       
                        <a href="" class="thread2"><h2 class="thread">${resp.rows[0].title}</h2></a>
                        <a href="" class="user"><h4 class="user">${resp.rows[0].username}</h4></a>
                    </div>
                    <div class="threads">                       
                        <h2 class="thread"><a href="" class="thread3">${resp.rows[1].title}</a></h2>
                        <h4 class="user"><a href="" class="user">${resp.rows[1].username}</a></h4>
                    </div>
                    <div class="threads">                       
                        <h2 class="thread"><a href="" class="thread4">${resp.rows[2].title}</a></h2>
                        <h4 class="user"><a href="" class="user">${resp.rows[2].username}</a></h4>
                    </div>
                    <div class="threads">                       
                        <h2 class="thread"><a href="" class="thread5">${resp.rows[3].title}</a></h2>
                        <h4 class="user"><a href="" >${resp.rows[3].username}</a></h4>
                    </div>
                </div>       
            </main> 
            <script  src="http://localhost:5000/resources/js/threads.js"></script> 
            <script src="../../resources/js/nav-change.js"></script>         
        </body>  
        </html>`);

This is all inside a pool.query function that I'm using to retrieve the info from my database. And just for context the resp.rows is a response from the query on my database. I'd rather just use the actual .html file I have for this and then render the things from the database on top of it. Is there a way to do this without templating engines, next.js/react or php?

EDIT:

Another thing I could do is use response.send() to send all the database info I need to the front end in an object or something and use this.response along with document.appendchild to render it from there but IDK if there's any security risks that go into sending database info to the front end to be rendered like that. So I guess another question would be. Would someone be able to see the source of this.response from my front end files in dev tools? I don't see how they could but I'm not sure and I wouldn't want anyone being able to see the queries that I make on the back end.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'rendering information from a postgres database in node.js

Sources

Related Questions