When to render on node vs Vue?
#javascript#node#vue#discuss
Nick Young

Nick Young @nickyoung

About: Jesus Follower • Husband • Father • Owner of ao1dev

Location:
United States
Joined:
Dec 12, 2019

When to render on node vs Vue?

Publish Date: Jul 13 '20
1 2

So, I already know Vue and I just finished up a course on learning node. The part I am having trouble getting a grasp on right now (as I try to put this into practice) is when should I use node for rendering the pages vs using something like Vue to just connect to a node API? Are there any hard guidelines to this? Would love to hear what the community's approach is to this. Thanks!

Comments 2 total

  • Azri Kahar
    Azri KaharJul 13, 2020

    Not really an expert, but I'll try to share what I know. Using node for rendering pages is akin to how PHP or ASP.NET worked for a long time, as in constructing the html page on the server then sending it to the client browser.

    Then comes frontend frameworks like Vue where they are primarily Single Page Applications (SPA) and only updates part of the page via API calls, thus making it seem more responsive compared to a full page re-rendering of a typical server side rendered website or web app. Not only the user experience can be richer and (ideally) faster since we are only loading JSON payloads via API calls, it also helps to separate the frontend and the backend.

    However a problem or downside of SPA is it does not fare well in terms of SEO. This is because the UI is mostly built using js (virtual DOM) so the web crawler cant see much html elements thus hurting SEO. An internal admin dashboard web app can (probably) sacrifice SEO for better interactivity, but thats not the case for other scenarios. This is why Server Side Rendering (SSR) popped up to solve SEO issues.

    With all that said, here are some considerations for choosing between them:

    • Node rendering will be simpler since it is just a whole single project whereas you will have 2 projects which are frontend & backend. With that said, lets say your node app is stateful as in there are things stored in memory. However when you wanted to update just the UI, you will end up having to restart the whole application thus might affect sessions etc. (Assuming your sessions are not stored externally like Redis) whereas we just need to update frontend to production without needing to touch the backend at all.
    • Node rendering or Vue with SSR for SEO, vue (non SSR) if SEO is not crucial.
    • node rendering will need a server with nodejs hosting it, or what people may refer to as requiring a compute, which can be pricy as you scale up. A static site or SPA is very much cheaper to host with choices like Netlify, AWS S3 bucket, or just an Apache or Nginx web server to serve it if you already have them.

    I do highly recommend looking into Nuxt.js (framework for Vue, similar to how Next.js is for React) since it basically allows you to literally develop using Vue then choose whether you want SSR (like node rendering) or full on static or just SPA. Nuxt.js definitely can help you shift between your choices without much rewrite! :)

    • Nick Young
      Nick YoungJul 13, 2020

      This is an awesome response, thank you for taking the time! You have given me much to consider and I will be looking into it all.

      It seems like it will really depend on the project (which is what I figured) and how that data needs to be handled. Also, it probably depends on certain modules of the project involved i.e. if creating instant messaging functionality then they would need to be decoupled and it would make sense to use something like Vue to handle the instant updates.

      I had not even considered the bits about SEO and that's a very interesting point.

      Again, thank you for your insight!

Add comment