Make Your Website Blazing Fast with React Prerendering.

Author
Stephan
Category
Time to read
0 minutes
Date

Introduction

Rendering individual elements in React is very straightforward using ReactDOM.render. For more complex websites, the App component is rendered in ReactDOM.render and the App component then contains routes to different pages. Pre-rendering your content can make your website blazing fast. Read our guide below to speed up your website in 3 simple steps.

New to Next.JS? Read our introductory guide to Next.JS and understand why Next.JS is suited for search engine optimisation. For more tips on how to improve your core web vitals read more here.

How to render a single HTML element in React?

Rendering elements in React.JS is straightforward. You simply build your component and you render it with ReactDOM.render.

const yourReactComponent = (
<>
    <div>
        <p>Hello World! </p>
    </div>
</>)

ReactDOM.render(yourReactComponent, document.getElementById('root')

For larger websites, the ReactDOM.render is in index.js wrapping the <App/> component.

// yourportfolio/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

The app.js file then can host the Routes to different pages.

/// yourportfolio/src/app.js

import React from "react";
import "./App.css";

// Various imports


function App() {
  return (
    <React.StrictMode>
      <Router>
        <Header />
        <ScrollToTop>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/page1" component={Page1} />
            <Route exact path="/page2" component={Page2} />
            <Route exact path="/page3" component={Page3} />
          </Switch>
        </ScrollToTop>
        <Footer />
      </Router>
    </React.StrictMode>
  );
}

export default App;

How to render an HTML string in react?

The process to render an HTML string in react is very similar to rendering a single component in react.

const yourReactComponent = (
<p>
    Hello World!
<p/>)

ReactDOM.render(yourReactComponent, document.getElementById('root')

What is react-render-html?

react-render-HTML is a package for react replacing dangerouslySetInnerHTML. The package renders a provided HTML string into a React element. Please note that the package is no longer maintained.

import renderHTML from 'react-render-html';
 
renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Dynamic HTML rendering with React.JS

To optimise Single Page Applications for SEO, companies use dynamic rendering. Dynamic rendering helps to solve indexing issues due to heavy javascript usage. Dynamic rendering solves this problem by identifying if a request comes from a user or from a search engine. If the request comes from a search engine, the bot will be served a fully-rendered page (i.e. no slow javascript is present). The fully rendered page can then be easily processed by search engine crawlers. For regular users (like you and me), we are getting the javascript-heavy content served.

Dynamic rendering helps with at least ways for SEO.

  • Dynamic rendering ensures that your pages can be indexed at all.
  • Dynamic Rendering reduces the amount of time, a search engine bot needs to process a page. This is especially important for large websites. Specifically, Googlebot might run out of crawl budget when processing thousands of pages on your website and simply stop processing (and thus indexing). With reduced processing time, GoogleBot can process and index more pages.

What is the difference between render and prerender?

Rendering describes the process of turning website code into a website. For example, with client-side rendering, the rendering is real-time. Pre-rendering means that the HTML was already constructed before a request for that website was made. The pre-rendered HTML will then be served to the user (which is much faster than client-side rendering).

What is the difference between prerender vs server-side rendering?

Server-side rendering will construct the HTML on every request and serve the user the files. Naturally, it is slower than prerender. Prerendered HTML has already been constructed and is typically cached. When the user requests the website, he will be served with the cached result (no computation is needed anymore).

How to use prerender with react?

For Dynamic rendering in React.JS, one of the recommended solutions is prerender.io. If you use Next.JS, you can leverage the inbuilt rendering methods instead of installing middleware to your React.JS application. Prerender.io is easy to implement and can also be integrated into your CDN. For simple Javascript, you can add the middleware like this:

shell npm install prerender-node --save
javascript app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

To install prerender middleware for React, follow these two steps:

npm install prerender-node --save
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

What’s the difference between rendertron vs prerender?

Rendertron and prerender do the same under the hood. Both approaches identify if a request comes from a search engine bot and the bot will be served a different version (the cached HTML) compared to the regular user (e.g. the client-side rendered content). Rendertron is now officially depreciated and server-side rendering or static rendering is recommended.

Is this you?

💸 You have been spending thousands of dollars on buying backlinks in the last months. Your rankings are only growing slowly.


❌You have been writing more and more blog posts, but traffic is not really growing.


😱You are stuck. Something is wrong with your website, but you don`t know what.



Let the SEO Copilot give you the clicks you deserve.