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.

Sometime ago, we started this project (website from the intro above) that lists companies stacks as well as aim to be a top stack revelation for african startups and beyond.

Eh, so what happened? At first, we started the frontend with VueJs. VueJs seemed cool, as always but 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 and ultimately influenced my choice.

When I mentioned about the transition to NuxtJs some time ago, a twitter user asked me about about the possibility of achieving 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. It is called Nuxt-og-image. Nuxt OG Image helps you create social url previews. 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. Alternatively, you can supply custom images for the social url preview.
   
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 you 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