You Need Server-Side Rendering for Your Angular/React/Vue Application

Does your web application exist if people can’t find it?

Photo by the author.

Did you think you already had your work cut out for you with learning Angular, React, and Vue? These frameworks can take a lot of time and practice to become competent with and much longer to master.

Well, I hate to break it to you, but your work isn’t done yet. If you want your web applications to be useful at all — whether that metric is its ability to make money, be seen, or be used — then your work has only just begun.

What’s more, are you trying to qualify as a Senior Front-End Engineer or just a Senior Full-Stack Engineer? Well, concepts like SEO optimization, code splitting, and mobile optimization are going to come up in interviews and these frameworks help us overcome these pain points and offer convenient ways to solve them.

Wait… Frameworks for My Frameworks?

Yes, that’s right. You need to go learn how to use frameworks for your frameworks. If you just finished learning how to use Vue, now you need to learn Nuxt.js. Just finished learning React? Time to learn Next.js. Just now starting to feel like a pro with Angular? Not so fast. Time to learn Nest.js or Angular Universal.

I know what you’re thinking, and you’re 100% right: “The rat race of learning new technology never ends!”

Well, the good news is that learning these frameworks for your frameworks only requires a little bit of change from the way you normally do things in your front-end framework of choice. In some ways, these frameworks can make development with your favorite front-end framework even more enjoyable.

But Why Do I Need to Learn Yet Another Framework?

A common problem with JavaScript applications built with such frameworks as React, Angular, or Vue is that they have trouble optimizing SEO and meta tags.

The reason for this is simple: When we use JavaScript to fetch our page data or meta tags, the page is actually empty and the meta tags are undefined. Until JavaScript is executed, there is no content to index.

You can easily see this for yourself

Just run the application you built with React, Vue, or Angular locally. Right-click the browser page that’s pointing at localhost and click “View Page Source.” All the data you probably populated in the ngOnInit or mounted methods for your component will be visible on your page, but they won't show up in the page source. The page source is what is indexed by search engines.

Notice how all we have in the body is the <div id=”app”></div>. That’s where your framework puts your entire application. Unfortunately, as we can see in the page source, there is nothing for crawlers to see. Your web page would be getting more traffic if it had just been made with simple HTML. How bad does that feel?

This is the case because React, Angular, and Vue all execute in the browser. They render pages in the DOM based on user actions.

The problem here is that web crawlers — the things used by Google and other search engines to find your website’s content — don't usually support JavaScript. If your website or application can’t properly be indexed, then people aren’t going to be able to search for it.

Say, for example, you are fetching blog posts for your web app’s front page feed. And let’s say that today your front page is featuring an article about the 2020 presidential election. You would like people searching for the 2020 election on Google to be able to find your front page. However, since you fetch that blog post using JavaScript, your front page doesn’t have it available to be indexed.

You might also have issues sharing your content on social media platforms because your dynamic headers such as og:title and og:description are undefined until your JavaScript runs.

Here is an example of social media SEO meta tags and the result you get from using them. For those who don’t know, these meta tags allow you to send rich objects when you post your webpage link in a text message or on social media:

Here is the rich object your meta tags let you create. This is what it looks like when sent by text on an iOS device. Photo by the author.

Learn more about the Open Graph protocol. It’s pretty important for SEO.

Server-Side Rendering to the Rescue

The idea behind Server-Side Rendering (SSR) is that you have a server running that will create the HTML response filled with your content and serve that to the browser, client, or web crawler that visits your site.

There are three distinct benefits of taking advantage of SSR:

• Help web crawlers index your site.
• Improve performance on mobile devices.
• Show a landing page quickly.

Each of these frameworks (Nuxt, Next, Nest) lets you achieve SSR in its own way, but the idea is always the same: You need to fetch your data on the server before you serve your page to the client.

Using Nuxt, that process generally looks like this:

Nuxt gives us access to the asyncData() method that allows us to pre-render our page by having the server send out our request for data on the first page load.

Now when we inspect the page source, we see our headers dynamically generated as well as the content on our page shown in the HTML.

This page is now ready to be shared on social media and also to be properly indexed by browsers.

Code Splitting

These frameworks also help us with our code splitting. This is a process that allows us to split our JavaScript code into multiple files.

The point of this is to make our application faster and cheaper for the browser or client to run.

If our application has a total of 50 different components, then the bundle size will be large. However, if our front page only needs five components, then we can use code splitting to bundle only the needed JavaScript code for the front page.

Static Site Generation

These frameworks also give us the option of generating static websites from our SPAs. This can result in much better SEO as well as performance.

Conclusion

I hope I’ve done a decent job of at least introducing you to the importance of server-side rending for SEO. Now you should all be able to go out and look deeper into these frameworks that will enable you to build web applications that actually exist.

Remember the famous adage:

“If your website is served to the web, but no crawlers can index it, does it even exist?”

And the equally profound:

“If you share your web app to social media, but there is no rich media object to click on, will anyone even notice?”

Have a wonderful day! And stay tuned for more about Nuxt.js and software engineering in general.