htmlnode.jsmustacheserver-side-renderingclient-side-templating

Node.js & Mustache.js: How to separate server-side rendering than client-side mustache templating?


I try to render second.html with server-side after validating a form in home.html, then keep mustache.js to template (update) parts from second.html as user validates new form in it (multiple times).

problem: html renders the parameters from server-side but sees parameters from mustache as empty strings

I knew that mustache can work for both server and client side but I didn't use mustache in the server files

server-side file

var serverSideParameter = 'server'
res.render('chat.html', { serverSideParameter })

client-side file

var clientSideParameter = 'client'
const html = Mustache.render(Template, { clientSideParameter })
document.querySelector('#Container').innerHTML = html;

html file

<div id="Container"></div>

<p> {{serverSideParameter}} </p>

<script id="Template" type="text/html">
  <p> {{clientSideParameter}} </p>
</script>

output:

<div id="Container">
  <p></p>
</div>

<p>server</p>

Desired output:

<div id="Container">
  <p>client</p>
</div>

<p>server</p>

Solution

  • I found the solution

    define them into the client-side js file

    res.send() didn't work for me