Mastering Dynamic Pre-rendering: Elevating SEO and User Experience with prerender.io

This solution tackles the challenges of Client-Side Rendering (CSR), boosting both SEO performance and user experiences using dynamic pre-rendering with prerender.io. Learn how to set up and optimize this approach, improving SEO rankings and speeding up browser rendering for your website.

What is Client Side Rendering(CSR)?

When a user makes a request to a domain or URL of any application from their browser, it sends a request to the server, which in turn sends the bare HTML markup and any JS bundle/files required for rendering the web pages to the browser.

Now, Javascript runs on the client device(browser) to render the web pages. So basically, it all happens at runtime on the client machine itself. All working hunky dory and perfectly. However, a major issue a CSR application creates is bad SEO scores, as when different crawlers or bots try to crawl or read the data, they only get the bare HTML file and some of the metadata.

What Is Server Side Rendering(SSR)?

As opposed to CSR, Server-side rendering (SSR) renders a web page on the server rather than on the browser.  The user will get a fully rendered HTML page that will have all the necessary information without waiting to load JS, CSS, and other assets.

Pre-rendering or SSR generates static HTML snapshots of your pages, which are then served to bots and users.

So, when a user requests a page from a browser, a fully rendered page is served for viewing and interactions; it solves major issues like bad SEO scores and slow rendering experience of CSR applications and SPA’s (Single page applications).

Dynamic Pre-rendering –

When any browser sends a request for a web page to our server, it serves the pre-rendered HTML along with the JS for further executions and interactions on the client side. However, in the case of SEO, when a crawler or bot sends the request, it only receives the pre-rendered HTML data without the JS bundle. JS is not required for the bot as it doesn’t have any content for users.

This will make your SPA or CSR applications serve the pre-rendered data for both browsers and for bots.

How to pre-render your website?

For pre-rendering your application, there are a few ways available –

1. Static Site Generation (SSG)

In this approach, a series of pages and content transforms into production-ready static HTML files at build time. These are basically provided inbuilt into frameworks and tools like Gatsby, next.js, Hugo etc Using these frameworks makes it easy to implement and develop websites using SSG.

2. Pre-rendering Services

In this, we have some online services that provide pre-rendering to applications that don’t have an inbuilt pre-rendering functionality eg. prerender.io.

Here, we will be looking into one of the pre-rendering services ‘prerender.io’ to achieve dynamic pre-rendering.

Prerender.io – 

We will be using the prerender.io server and middleware, making minor changes to enable pre-rendering for both browsers and bots. Additionally, we will ensure that no script tags are removed when a request comes from a browser.

Prerender.io is just one of many options for achieving pre-rendering. One can look into other options as well.

Execution-

1. Setup the pre-render server using prerender.io 

          https://github.com/prerender/prerender

• In server.js change server variable to  

          var server = prerender({

                         chromeFlags: [

                                           '--headless',

                                          '--disable-gpu',

                                          '--remote-debugging-port=9223',

                                         '--hide-scrollbars'

                                ]

                           }); 

• Changes in removeScriptTags.js to check if ‘user-agent’ is any bot, then only remove the script tags and continue with the script tags.

2. Setting up the middleware file

• Use prerender-node middleware of prerender.io and change it as per your use case.
• Make the prerender.shouldShowPrerenderedPage function always return true.
• Adding ‘.json’ in prerender.extensionsToIgnore Array.
• Save this file as prerenderNode.js.

3.  Setting up the node server for serving our SPA using Node and express

• Import the middleware(prerenderNode.js) we created in step 2.
• Import prerenderNode from ‘./prerenderNode.js’;
• Set the prerenderServiceUrl and pass the URL of the prerender server created in step 1.  

 app.use(prerenderNode.set(‘prerenderServiceUrl’, ‘URL OF PRERENDER SERVER          CREATED IN STEP 1’));

Conclusion:

Flow for a User:

• User’s Browser: The user enters the URL in their web browser and initiates a request to your server.
• Server Processing: Your server receives the request and serves the pre-rendered HTML along with the JavaScript and other assets required for rendering the web page.
• Client-side Rendering: JavaScript runs on the user’s device (browser) to further render and enhance the web page, providing interactivity and dynamic content.
• Fully Rendered Page: The user sees and interacts with the fully rendered page.

Flow for a Bot (Search Engine Crawler):

• Bot’s Request: A search engine crawler (bot) sends a request to your server, typically with a specific user agent indicating it’s a bot.
• Server Processing: Your server detects the bot’s request and serves the pre-rendered HTML specifically for bots. This HTML contains the essential content and metadata but may lack some interactive features reliant on JavaScript.
• Bot’s Indexing: The bot processes the pre-rendered HTML, indexes the content, and stores it in search engine databases for later retrieval by search queries.

By serving pre-rendered HTML to bots, you improve the chances of your content being indexed effectively by search engines, which can positively impact your site’s SEO.

Embrace dynamic pre-rendering through prerender.io to seamlessly bridge the gap between SEO optimization and enhanced user experiences, ensuring your web application thrives in both search rankings and performance benchmarks.

While dynamic pre-rendering can offer significant benefits, there are some downsides and considerations to keep in mind:

• Increased Server Load: Pre-rendering can put additional load on your server, especially if you have a large number of pages to pre-render. You need to ensure that your server infrastructure can handle the increased requests and resource demands.
• Maintenance Overhead: Managing pre-rendering configurations and ensuring they stay up-to-date with changes in your application can be an ongoing task. Any updates or changes to your site’s structure or content may require corresponding adjustments to your pre-rendering setup.
• Costs: Some pre-rendering services may come with associated costs, depending on your usage. Factor in these costs when considering whether to implement dynamic pre-rendering.
• Caching Challenges: Caching pre-rendered pages can be more complex than caching fully client-rendered pages. You need to manage caching strategies carefully to ensure that users receive up-to-date content.
• Complexity: Implementing dynamic pre-rendering can add complexity to your development and deployment processes. It may require changes to your build pipeline and deployment scripts.

To mitigate these issues, it’s important to thoroughly plan your pre-rendering strategy, and test it extensively. Additionally, monitoring tools and regular SEO audits can help identify and address any duplicate content or indexing issues that may arise.