Your website’s performance is crucial. Load times and Google crawlability are top considerations when choosing whether to take your rendering Server Side or Client Side. React is here to help.
What is React?
React is a Javascript library for website components. Taking an example like Facebook (where React all began), the nav bar, profile, news feed and post updates are all individual components of the website. Put these website building blocks together, and you’ve got a UI (User Interface).
Where other websites require a total site refresh each time a change is made, React allows updates to individual components of a website. With this flexibility, developers can quickly build new designs and add functionality to existing websites with easy manipulation of the DOM (Document Object Model). No site-wide dev overhaul required.
Is React bad for SEO?
Short answer: No.
Long answer: Using a React SEO NextJS or GatsbyJS framework means Google crawlers won’t have to render Javascript code to index your webpage. As your SEO specialist, we’ll explain the differences between Client Side Rendering (CSR) vs Server Side Rendering (SSR) for your SEO ranking.
Learn more about SEO
What is Client Side Rendering?
Client Side Rendering is when the server delivers to the user a single HTML file without content. JavaScript then fetches all the data for the browser to index, before rendering the content in the user’s browser. This is all well and good if the internet speed can keep up with the CSR process. Not so good if your potential customer and Google crawlers are waiting seconds (or minutes) for the website to render.
Rendering JavaScript is intensive for your CPU (Central Processing Unit) and will limit site usability during the loading process. It requires the page to be built out by a browser and then indexed. It’s an extra small step in the process Google uses to crawl, understand and index web pages and can reduce SEO ranking as Google crawlers are not immediately able to read your content and determine relevancy to your customer’s search.
Load time is a biggy when it comes to keeping customers on your website. Slow loading or frequent re-loading of pages are common issues in CSR, along with:
Usually, a JS error causes limited Google crawling abilities. We’ll check the backend of your site to find the JavaScript errors, then use programming like GatsbyJS and NextJS to serve up your HTML file in a digestible way.
Your sitemap lists all of your website URLs in order of importance. It gives search engines an SEO reference point of what they should focus their attention on. We can help with that too.
Page titles, meta descriptions and robots are common issues with Javascript frameworks. Simply put — it’s not inputted correctly. Meta descriptions are an SEO must as a place for Google Crawlers to find keywords.
As far as we’ve come in technical SEO, there are still some readability issues with JavaScript. Google comes out on top, but expect issues with Bing and other search engines. Focus on Server Side rendering so Javascript can see the site upfront. And remember load times.
What is React Server Side Rendering?
Server Side Rendering pre-renders a website before delivering it to the user’s browser.
In years gone by, this was a popular method of website loading. You built a webpage, the server populated all the data, and delivered a fully populated HTML page to the client. But then came the issue of re-loading every time another route was navigated. You clicked a link, and the server had to populate another HTML again, and again, and again…
Nowadays, React SSR is gaining more and more traction due to React’s easy-to-use NextJS and GatsbyJS frameworks to separate components of UI into digestible content for crawlers.
Splitting the static
At True, we use Server Side Rendering methodologies such as NextJS or GatsbyJS — a process known as Static Site Generation. They provide the tooling, structure and optimisation to put those website building blocks together and effectively spit out static elements of the website so that they’re immediately understood by crawlers.
GatsbyJS
These work with static pages, like blogs or corporate pages — those that won’t change in real time. GatsbyJS’s main benefit is boosting load times to make React SEO friendly. It does this by sending generated pages to a ‘server storage service’. More efficient for Google bots = a higher SERP ranking.
NextJS
NextJS works by pre-rendering the page before it sends the file to the user. Website components are constantly updating in real-time — ideal for webpages with user-generated content, like social media.
NextJS benefits from flexibility. it seamlessly handles multiple rendering approaches on a case-by-case basis, so you’re not tied into one rendering approach. For example, you can use the fast-loading Static Site Generation for the majority of your website, then bring in Client Side Rendering for the same page when adding live, reactive UI features. Pick and choose fetching models to suit your website’s needs.
AirBnB uses React
“42.62% of web developers surveyed use React.JS worldwide, as of 2022.”
Statista 2023
Benefit from React Server Side Rendering for SEO:
Faster loading times: Using React Server Side Rendering allows for fast loading times and improved user experience. The HTML is provided from the DOM, and individual components of the page are updated in real time without a total page reload required.
Improved SEO: Content can be rendered before the page has loaded, so search engine crawlers are able to easily index and prioritise web pages.
Improved experience for older tech or slow internet: As the HTML file is rendered server-side, the user’s internet connection is less affected.
We’re your React SEO NextJS specialists.
Ready to React? We understand the web technology and JavaScript limits that may be inhibiting your SEO success. True can advise you on Static Site Generation vs Server Side Rendering to make React SEO friendly — let us show you how.
Talk to strategist
