Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does it make sense to render templates server-side?

Tags:

express

pug

I'm learning about the templating engine Jade bundled with Express. As I understand, Jade allows for server-side rendering. Isn't that suboptimal for two reasons:

1) The server has to compute more to render the templates. The work can be pushed client-side.

2) Once a template or partial has been rendered, and the data needs updating, it just sends JSON to the client, instead of resending fully-fledged HTML, which is a drain on bandwidth.

Are these real problems with server-side template rendering?

like image 470
Randomblue Avatar asked Dec 16 '11 23:12

Randomblue


People also ask

Should you server-side render?

Some server-side rendering advantages include: A server-side rendered application enables pages to load faster, improving the user experience. When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO.

Does server-side rendering improve performance?

Server-side rendering improves site speed and results in better Core Web Vitals scores. However, sometimes it can be difficult to implement and might also increase First Input Delay.

Is server-side rendering faster than client-side rendering?

Server-side rendering allows developers to pre-populate a web page with custom user data directly on the server. It is generally faster to make all the requests within a server than making extra browser-to-server round-trips for them. This is what developers used to do before client-side rendering.

Should I use server-side rendering React?

Server-side rendering is an excellent option for rendering web pages to increase the initial page load speed, improve SEO and provide a better user experience.


2 Answers

I think it really depends on the type of application you're writing. If you have a page that mostly serves individual pages, and kind of fits into your typical CRUD/MVC mold, it may not be an issue. However, if you're writing something dynamic with a ton of ajax, it is a problem :-)

I feel your pain - I've been bitten by this a few times in various stacks. I've ended up just doing all of my list bindings with async calls in the browser that execute after the core page loads. It kind of stinks, because you like that first request to come with a page of pre-bound list data, but subsequent page to be driven by ajax calls. I just don't want to write template stuff once for the server and once for the client.

I don't /think/ Jade supports that kind of client side binding. The good news is that there are a few popular templating languages that work both on the server, and in the browser. The two I know of are:

  • mustache
  • plates
  • ejs

I haven't seen anyone using plates with express, as it belongs to the flatironjs project which kind of has it's own growing framework going on. There are tons of examples out there of using mustache and ejs with express:

  • https://github.com/visionmedia/ejs/tree/master/examples
  • https://github.com/fat/stache

On a side note, here's a list of templating packages for node on Joyent's site:

https://github.com/joyent/node/wiki/modules#wiki-templating

My suggestion is to start with EJS - it's a little more down to earth with it's non-HAML-esque syntax, supports client and server binding, and seems to be well accepted in the express stack.

Happy Coding!

like image 183
Justin Beckwith Avatar answered Sep 19 '22 05:09

Justin Beckwith


There is an other important point. Depending on your website aim. You may have to pay attention to SEO or not.

In simple word, the content that is generating from the server is indexing by search engine. Others not. Because search engine crawlers don't take care about client-side content.

like image 43
Day Avatar answered Sep 21 '22 05:09

Day