Frameworks such as React and Vue are becoming increasingly popular with web developers for their ease of use, speed, thriving ecosystems, and powerful toolsets.

Using these frameworks, we can build Single Page Applications (SPAs).

Understanding SPAs

These are websites that offer slick user experiences, as they can request all the required HTML/CSS/JS on-page load.

This can also happen dynamically when a user clicks on a button and a modal opens, for example.

This means that once the user is on your website, they’re able to see and interact with all of the necessary elements of the site with little else to load in.

While this does have some benefits for the performance of your site, it can also have some drawbacks.

SPAs are delivered as a set of JavaScript (JS) that search engine crawlers can’t easily crawl, making it harder for them to decipher and understand your content.

How does JavaScript impact SEO?

JS, from an SEO perspective, depends entirely on how you go about rendering your website.

There are two popular ways of rendering your website, and both have their pros and cons.

Client-side rendering (CSR)

CSR is a more recent development in the rendering world and relies on the execution of JS on the client-side using a framework such as React or Vue.

The browser (client) will request the source code for your site.

It will receive minimal HTML before making a second request for the JS files that contain your HTML as strings.

This means that search engine crawlers can have a hard time reading the content/structure of your site to build up a clear picture of what your site is about.

Server-side rendering (SSR)

SSR is the more old-school way of rendering websites. All your site’s resources are kept on a server.

Once the page is requested by the browser, the HTML is delivered alongside the JS and CSS.

The final version of the render is then visible to the user.

As SSR sends the complete website upon request, the client has access to the site’s entire structure and all the necessary resources.

This makes it easier for Googlebot to understand the content and the structure of your website.

What next?

To address the issues presented by CSR, while using modern frameworks, such as React or Next, consider tools such as NextJs and NuxtJs (for use with React and Vue respectively).

These allow us to harness the power of SSR while staying with a component-based development methodology.

This way, we can build and deploy our web apps in the ways we enjoy, while making them much more SEO friendly.