UPDATE:
I posted this on Reddit and u/teraflop kindly pointed out that Google CAN crawl javascript content on the client side. See this comment thread .
I was dumb and had robots.txt block one of the json files that my javascript was using, that’s why Google couldn’t see my content. True rookie mistake.
SSR is supposed to improve performance and SEO though, but now in hindsight it’s less valuable than I thought.
Preface: I started learning to code 4 months ago. Here’s documenting my journey as a budding indiehacker-solopreneur. Hope it helps someone!
My rookie SEO mistake
When I first built RedditRecs.com , I did not know much about SEO.
I knew I needed content that people were searching for (and are ideally in low supply). I knew blogging was one way to generate such content on top of your site’s core pages.
I also knew there was a technical side of things, like proper h1 h2 tags, image alt tags etc.
But I missed out on one CRITICAL technical aspect of SEO - can Google even see my content?
If you have dynamic content, how you render it is important
For many websites (landing pages, blogs etc), you probably won’t have this issue.
But for websites where the content is dynamically rendered based on a dataset (e.g. directories), you need to pay attention to how you render the content. RedditRecs.com is one such website.
The point of RedditRecs.com is to show you the most popular portable monitor among Redditors. It does that by taking relevant comments from Reddit, analyzing and crunching the data, and then ranking the monitor models based on popularity.
So unlike landing pages or blogs where you’re writing out the content for each page, it makes more sense for RedditRecs to programmatically render the info for each monitor based on a template.
The simplest way to dynamically render data is to use Javascript, or a Javascript framework like React or Vue (which is what I went with).
The simplicity was great for launching quickly. Within weeks of learning frontend I had a live website (Replit’s free static hosting helped simplify deployment too).
But what I did not realize was that if you only rely on front-end frameworks like Javascript, React, or Vue, your content will only be rendered on the client side.
Why client-side rendering is bad for SEO
For the end user experience, client-side rending is usually fine. They hit the page, the client renders the content in milliseconds (unless your data is super large), they see the content.
However, for Google’s indexing bots, it is a world of a difference. Google won’t wait for the client side rendering to happen. And so for the past few months since I launched RedditRecs.com , all Google saw was an empty website with some headers.
No wonder my SEO was so bad!
Solution: Server Side Rendering (SSR)
The solution was to implement SSR instead. I won’t bother explaining the details of what SSR is, this article does a good job .
But the gist is that when there is a request, instead of sending the template page over and then waiting for the browser to render the content with javascript (which Google will miss), the server will generate the complete page first and then send that to the client.
This ensures that Google will see the full content.
SSR with Nuxt.js
I asked my AI coding assistant how I could implement SSR for my site. Since I was already using Vue, I was recommended Nuxt for SSR, a framework built on top of Vue + other frameworks.
Nuxt looked promising because I’ve read comments about how Nuxt is simpler than Node.js, a more popular framework that can achieve the same thing.
Unfortunately, it turned out harder than expected.
I think it felt so hard because the latest version of Nuxt is fairly young (Nuxt 3 was officially announced November 2022, only 1.5 years old). This had 2 consequences:
- Less (valid) tutorials
- LLM coding assistants made a lot of mistakes
Combine these with my still weak fundamentals, unfamiliarity with Vue and backend server stuff, I was getting stuck a lot.
I often wondered if I just went with Node.js it would’ve been easier with more tutorials and the LLMs making less mistakes.
Regardless, I gritted my teeth and powered through it. It took me about 10 days to rebuild my site with SSR. Much longer than I’d like.
Nonetheless, in hindsight, it’s actually pretty simple when you understand how things come together.
If you’re looking to build a SSR site with Nuxt 3 and Cloudflare, I wrote a guide that might save you from pulling out hair: https://indienomad.life/posts/website-ssr-nuxt3-cloudflare/