Nodejs SPA template rendering

[ncodedev]

I am currently working on a single-page node express jade application. There are times when I need to render new html content into certain sections of the page when an action is performed such as a button press. I have used client side templating in the past, such as handlebars, but I would like to avoid adding more client-side scripting if I can. I have seen articles that talk about using ajax to request a rendered jade template from the node server and then populating a container with the html response. It looks something like the following…

// Client-side ajax request
$.ajax({
        method: "GET",
        contentType: "application/json; charset=utf-8",
        data : {products : arrayOfProducts},
        url: "/template/products",
        success: function(templateHTML){
            $('#container').html(templateHTML)
        }
});

// Server-side 
router.get('/template/:template', function(req, res, next) {
    res.render( req.params.template, req.body);
});

Is this considered server-side rendering?
My goal is to keep as much html as I can out of the client-side scripts. I was able to get the code above to work, but I am curious if it is good practice or if there are any PROS and CONS to doing it this way. Open to other suggestions as well.

Any help is appreciated.

[abernardes]

I understand what you mean, and I gotta tell you, if you have the data in the front end, making a round-trip to the server to render a template sounds… backwards.

The big con I see with this approach is that you’re requiring a server request/response cycle to be completed before updating the UI after an user pushes the button. A user with a slower connection (standard 3G for example) might have to wait a few seconds before the UI updates and that can get confusing. Whereas, if you render the templates on the front end, the update would be instant.

The only “pro” that you have would be rendering templates in the backend. Not worth the tradeoff in my book, but you know your constraints better than I do.

[m3g4p0p]

@abernardes

The big con I see with this approach is that you’re requiring a server request/response cycle to be completed before updating the UI after an user pushes the button. A user with a slower connection (standard 3G for example) might have to wait a few seconds before the UI updates and that can get confusing. Whereas, if you render the templates on the front end, the update would be instant.

Of course, if the update depends on some backend data you’ll habe to wait anyway. But I think the main issue is that if you update a table (say) with some new data, you’d have to replace the entire table with the new HTML (and add all event listeners anew etc.), not just insert a new row – you’d basically lose the complete state of the component in question.

[ncodedev]

Thanks for the response.
I was originally thinking that I would only use the template for displaying the initial “table” and then insert new rows on the client as needed, but I see your point about the slower connections. In some cases the application is requesting data from an outside API (i.e. getting a list of songs) then rendering the song list into a table. With my initial example using the server to render the template, that would require 2 ajax requests, which I don’t like. it looks like client-side templating is probably the best way to go about rendering the new content.
I was initially developing the application without the use of a framework (like Vue or React), but that might be a better solution. Thanks again.