Make Your Website Blazing Fast with React Prerendering.

Author

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.