Building HTML client-side VS serving HTML server-side?

Question

I always find it difficult to decide if I should render my HTML server-side or build it client-side.

Let's say I want to render a dynamic HTML dropdown with following requirements:

• Shows records from a database table at page load
• Must stay up-to-date (users can add/remove records from the database table using the website)

I can't decide between

Option 1

1. Render template with empty dropdown server-side
2. Populate dropdown client-side using ajax requests (JSON)
3. Update dropdown client-side using ajax requests (JSON)

Concern: Rendering empty elements before populating feels ugly to me

Option 2

1. Render populated dropdown server-side
2. Update dropdown client-side using ajax requests (JSON)

Concern: Why would you render server-side if you are still updating it client-side?

What solution is more commonly used in web development? Feel free to share different approaches.

Answer 1

That depends. are you worrying about SEO?

Are you using any kind of client-side framework? I will assume that you don't, since JavaScript frameworks have there own way to do this, if you want you can read more about angular/react/vuejs which is the hottest JavaScript frameworks those days that will solve this issue.

Client-side frameworks render HTML on client-side only, and use only Ajax API to receive data from the server.

But if you don't want to use any client-side framework and do it in the "classic" way, both ways are appreciated. I tend to like the first way, this is almost how client-side frameworks do it and makes the most sense, yes you render empty table but you only render the "container" of your data, if you're bothered by how it looks visually (Showing empty list before data is fetched) you can just show loading bar or hide the table till the data is fetched.

Answer 2

Your concerns are valid, each case has its advantages and disadvantages as you mentioned.

I would, personally, go with the first approach (all client-side); mainly for code maintainability. With this approach, you only have to update the HTML client-side instead of both client-side and server-side.

However, there is an argument to be made for saving that one request by server-side rendering the values. Even though it might be insignificant, there is a small performance optimization.

Answer 3

This is a little opinion bases. There are schools for the server-side, and other schools for the client-side. The main reason for the later is utilizing the client machine (which are free for you) to free the server resources (which you pay for). This also makes your app more scalable.

The example that you gave is not detailed enough, and it is only one aspect. I usually use these general rules:

If there are dynamic parts of your page (e.g. dropdown, grid, popup form, etc), I use Ajax to avoid reloading the entire page.

If the HTML is very simple and/or requires further processing on the client-side, then just send JSON data from the server and build the HTML on the client-side. For example, I usually do not send error message from the server. Instead, I only send status codes (e.g. Successful, AccessDenied, Error, etc...) and I inspect those codes on the client and display the associated message. This is specially useful when different messages are displayed in different colors and styles or contain other HTML tags like links.

If it is a complex popup form or grid of data, then I send the HTML from the server. It is usually much easier and more flexible to build complex HTML on the server. Also when there are sensitive information used to build the HTML, it is usually much easier to build it on the server, otherwise you'll have to send some flags from the server or, better, you need to split your HTML building process to sections depending on permissions.

As for that very specific example in your question, I would go with the first approach (all client-side), mainly for the DRY concept (Don't Repeat Yourself). You don't want to have two pieces of code doing the exact same thing, and have to remember to update both every time you need change something.

Note though, that you don't have to send empty drop-down if you don't like it. Instead of only updating options like your example is suggesting, you can actually rebuild the entire dropdown every time. I don't particularly like this approach, especially if there are event listeners and other references attached to the dropdown, but I just wanted to say other ways to do it. This method can be useful on some scenarios, especially if the dropdown is part of a bigger section of the page that this whole section requires updating (rebuilding) every time, in which case I usually opt for sending the HTML from the server.