在后端或前端列出集合

Question

I'm pretty new to NodeJS and I need some advices. I have a page which displays a list of user, I use Mongoose to retrieve this list from the collection. I know two ways for displaying this list :

1) Make the query in backend before the page is loaded, then send the result to the view :

// app.js
var users = Users.find({}, function(err, results){
    res.render('list', { users: results});
});

2) Make the query on frontend after the page been loaded, in an asynchronous way. Example, with Angular

// users.js
var User = $resource('/getUsers');
User.query(function (results){
    $scope.users = results;
});

// users.html
<ul>
    <li ng-repeat="user in users"{{ user.name }}></li>
</ul>

// app.js
app.get('getUsers', function(req, res){
    Users.find({}, function(req, results){
        res.json(results);
    })
});

I hope everything is clear. What is the best thing to do, in terms of best practice and/or performance ?

Thanks

Answer 1

From the user experience perspective, it is nearly always better to render on the server first, and then only when the content updates, render on the client (or, actually, querying the server for updated HTML content -- is also often better than rendering on the client). Full client-side rendering usually results into pages that load longer, use significant CPU resources on the client, especially on mobile, and often have some flickering due to asynchronous requests and many partial updates on the page.

Having that said, there are situations when client-side rendering makes sense, eg when some content is too long to load at once and it is better to show the page and a progress indicator, eg "we are loading your data...". Nevertheless, for most content-oriented websites and portals, nearly complete server-side rendering is a better way to go.

Answer 2

To sort of play devils advocate here, I'm going to have to disagree with @Andrew Skylyarevsky.

I consider content driven sites to be on average, more a front end heavy app than a server side app. If the user is being served a page that has content heavily customized to suit their needs, and performance is your goal, you will see the best user experience from serving the customer the bare minimum of content needed to load the page and interact. All further data should be returned via asyc calls such as you would see in a front end heavy app. If it were a server side rendered heavy app you as a user would be expecting subsequent requests for content to result in a server-side page reload.

I agree with @Andrew that one of the drawbacks of the front end approach is the initial load times where the user has to wait for data to come back and render. However, this can and should be mitigated through various techniques. Server vs Front end implementations take about the same amount of effort and complexity on your part as the developer. But if you are looking for a near-seemless experience for the user (performant) you need a well implemented and thought through front end heavy application. Some things should still be done on the back end, but most techniques take place in the front. Serving the user as little as they need to get going and firing off subsequent requests in the background is one such method. It is not easy to tune this experience.

I should note that I'm coming from a background of having worked on several enterprise level applications that sat in the front end of a browser. I have also migrated many server-side applications to front end applications and have seen the benefits both in terms of performance and user experience. So I am biased. Just some food for thought.