use React or Vue over server side template engines

I believe your question is more tied to the concept of server-side rendering and client-side rendering.

Server-side rendering has a few important points that you should consider when evaluating a problem:

• Is faster to render the page in the server than in the client
• It is much better for SEO(Search Engine Optimisation), since the crawlers can craw the entire page. Since some crawlers are not evaluating/running javascript, a SPA(Single Page App) will probably result in an empty page. Even though Google has improved quite a lot with SPA SEO, server-side rendering is still the best option.

Client-side rendering, using SPAs, has different advantages:

• Is much better to manipulate and maintain user state in the client-side, since you can have your webpage broken down into components.
• Faster interactions/page changes after the first load, since, in most cases, the entire app is loaded at once in the first request.

So with that in mind, you have to consider what you want to do. If you are building some website that reflects a more page-like structure, like a news or blog, server-side rendering is probably the best way to go. On the other hand, if you are building a full-blown application that has loads of user interactions and state management, client-side rendering (or SPA) could be the best option.

There is no reason to outsource your code to the client-side without evaluating your problem first. That really depends on the problem you are trying to solve.

May I refer you to this article. As you can see it's not all black and white. From the cited article ..

Server-side pros:

• Search engines can crawl the site for better SEO.
• The initial page load is faster.
• Great for static sites.

Server-side cons:

• Frequent server requests.
• An overall slow page rendering.
• Full page reloads.
• Non-rich site interactions.

Client-side pros:

• Rich site interactions
• Fast website rendering after the initial load.
• Great for web applications.
• Robust selection of JavaScript libraries.

Client-side cons:

• Low SEO if not implemented correctly.
• Initial load might require more time.
• In most cases, requires an external library.

However, there are frameworks that do universal rendering such as next.js and nuxt.js (built around react and vue, respectively) that can leverage the powers of both the client and the server so you can have the best of both worlds. This usually involves sending the fully rendered application in the initial payload from the server to the browser and then loading the application code browserside afterwards.