CODEWITHSUNDEEP
javascriptnode.jsreactjsvue.js
user9945420
user9945420

Reputation:

use React or Vue over server side template engines

For web development React or Vue seem to be a must have framework. Currently I just got some experience with NodeJs and Handlebars.

I know Handlebars runs a server side rendering, Vue and React run a client side rendering. Using Vue or React makes reusable components possible. Using a server side template engine requires a base layouting.

Let's say I have a website / webapplication with some routes. Why should I use Vue for HTML components instead of Handlebars HTML?

What I learned so far is that whenever I can

Everyone is using Vue or React now, why should I leave the old structure and start outsourcing the code to the client?

Upvotes: 10

Views: 5217

Answers (2)

Bruno Paulino
Bruno Paulino

Reputation: 5800

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.

Upvotes: 5

Husam Elbashir
Husam Elbashir

Reputation: 7187

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.

Upvotes: 3

Related Questions