Should the views be displayed by the application, or should the static site access the API using AJAX?

Question

I am starting to write my first web application with Node.js and Express. I have two approaches.

• Create two sets of routes. The one that sends JSON, the one that renders the page using a template engine
• Create a static website that calls API calls to the backend using AJAX and has only routes for the API.

I understand that approach No. 2 depends on AJAX support in the browser, but if it was your project, based on the advantages and disadvantages of each approach, which one would you choose and why?

Answer 1

If I read it correctly, the first set of routes # 1 and # 2 is an API that returns JSON rather than sending it.

Assuming that in # 2 you will not create static pages with JavaScript that make AJAX calls, but rather use express static routing such as app.use('/', express.static(path.join(__dirname, 'dist'))); the difference between the two approaches is not so big.

If you don’t already know any supported template language, for example mustache , then you should study it and choose one before that (which is not always easy from my experience!).

If you don’t know one, depending on your application, you can still learn from the training and use it. As an example, you can come up with a very general interface in which one template could be reused many times - for example, a common database user interface similar to, for example, the well-known phpmyadmin .

In the case of static routing, you can achieve similar results using a JavaScript framework that contains components or templates such as angular . If you do not plan to use it, this can lead to repeated code duplication in other widgets. And even when using one of them, I can imagine a case where the template engine will result in less code (or fewer files in your project, at least). I’m not sure, although if it will be easier to navigate and, in addition, cover the tests when the project will grow.

Without knowing more about your project, it is difficult to give more advice.

Answer 2

If the product you are developing is mostly static content with some dynamic elements here and there, I would recommend serving HTML from your backend through a template system. A good example of this would be a blog. You will get better SEO, and there are less moving parts to this approach.

However, if you want to develop a one-page application, I recommend using your server completely as an api and completely writing client-side logic in React / Vue / Angular / whatever. Single-page applications have their front ends, all written in javascript, and are best suited for highly dynamic, "application-like" applications on the Internet. Think gmail or facebook.

Answer 3

In my current project, we use both approaches. Many views are static, and the data is obtained from API calls (we just use angular) or loaded values ​​(we load some objects using a template, for example, user roles, etc.).

However, some views are displayed on the server, because it allows us to dynamically enter values, tokens or other supporting data without additional requests.

So I vote for flexibility