Maybe Moving To NuxtJs Wasn’t A Bad Idea.


Introduction: Greet and Meet

Hello there,

If you are new, you would not be familiar with whatcomanpanystack.com so let me do the intro:

WhatCompanyStack Meet reader, 🤝🏽 Reader meet WhatCompanyStack

However, if I have been your fan, then you should skip the above because you already know (even though you read the line above anyway, didn’t you?)

Sometime ago, I started this project that lists companies stacks as well as aim to be a top stack revelation for african startups and beyond. What happened? Nothing much. At first, we started the frontend with VueJs. VueJs seemed cool, as always. and because I wanted to be a little fluid, I decided to move the project to NuxtJs.

Aside the personal motivation to keep my javascript skills pristine, I also wanted to leverage the Search Engine Optimization (SEO) benefits that comes naturally with NuxtJs.

Good news, it turned out just fine.

Other: How to Link a Netlify Frontend with a sub-domain Backend on Another Server

SSR (Server Side Rendering )

NuxtJs is heavily a Server Side Rendering Vuejs Framework. While you can render server side code via ssr, if your app depends on api calls from another backend, that process also benefits from the SSR phenomenom: The api calls gets server-side rendered first, in other words, api calls don’t run on the browser but on the server hence the API calls in this case are non-client or browser dependant. (I mean what you would normally do in vuejs via, for e.g, the mounted hook etc). This behaviour was the deciding factor for my choice.

When I mentioned about the transition to NuxtJs some time ago, a twitter user asked me about about the possibility of achieveing same in regular vuejs while I had the answer then per internet information and all, I think fastforward to today, I am a living witness 🙂.

Here are some of the other benefits I did leverage with NuxtJs for its SSR.

  1. Native Social Share Image Preview:This NuxtJs package was my first seach engine tool I did reached out to,Nuxt-og-image. Nuxt OG Image helps you create social url previews for you. For example, you can create social url image previews off your NuxtJs page/components UI. Basically, it can take a screenshot of a page or component then appends that as an image for your links when you share them on social media platforms.
  2. Nuxt-site-map: this packgae is interesting because while you can easily create sitemap.txt file, nuxt-site-map package does this for you on the fly and dynamically injects relevant contexts that your app needs. Oh, and remember AI does alot of crawling these days, yeah? The pacakage does the “heavy lifting” AI thingy for you. In an AI era you wouldn’t want to be left behind…it is not about you, its about them– see what I did there ?🙂 )

Summary

There are tradeoffs though if will be considering SSR approach but in my own case, it suits it !

Thank you for reading! Reach out to me on X or Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *