How Can I Integrate Prerender With My React/Angular/Vue Application?
Prerender improves SEO for SPAs by integrating it with a CDN or web server (like Nginx, Apache, or Node.js), ensuring proper functionality and caching for better performance.
Overview
Single Page Applications (SPAs) built with client-side JavaScript frameworks (such as React, Angular, and Vue) often face challenges when it comes to search engine optimization (SEO). These frameworks load content dynamically after the initial page request, making it difficult for search engines to index the content properly.
Prerender.io provides an excellent solution to this problem by rendering a fully loaded page for search engine crawlers. However, because SPAs don't natively detect or redirect requests to Prerender, it's important to integrate Prerender into your infrastructure to ensure proper functionality.
Why Integrate Prerender?
Prerender.io renders JavaScript-heavy SPAs on the server side and serves search engines fully-rendered HTML pages instead of just static, unrendered JavaScript. Since SPAs don’t inherently provide search engines with crawable HTML content, integrating Prerender helps deliver a page that is fully indexable by search engines like Google, Bing, and others.
The key advantage is that Prerender ensures that the page is indexed and its content is visible to search engines—just like a static website—improving SEO, especially for dynamic content that changes after page load.
Integration Strategies
To achieve optimal performance with Prerender, integrate it as close to the user as possible. The most effective places for integration are at the Content Delivery Network (CDN) or Reverse Proxy level. If this is not possible, Prerender can also be integrated into your web server.
-
CDN integration:
-
Web server integration:
-
Nginx integration
We have three available Nginx integrations for the use cases of Nginx.
- Single Page Application: nginx.conf
- PHP application: nginx-php/nginx.conf
- Reverse proxy: nginx-reverse-proxy/nginx.conf
-
Apache webserver
-
Node.js with Express: for Node.js applications using Express, you can use the prerender-node middleware:
const prerenderMiddleware = require('prerender-node');
app.use(prerenderMiddleware.set('prerenderToken', 'YOUR_TOKEN'));
-
Verify Your Installation
After integration, it’s important to verify that everything is working as expected. We’ve provided an easy-to-follow guide to help you test your setup and confirm that Prerender is functioning properly.
Getting an Error?
If you see the message "Prerender Integration Not Detected," you can refer to the troubleshooting guide here to help resolve the issue.
Expert Assistance
For those who need additional help or want to ensure a smooth and secure launch, we offer a specialized package:
Kickstart Package
Price: $800 (one-time payment)
This one-time package empowers you with expert setup and configuration, ensuring a smooth and secure launch.
Features:
-
- Three setup and configuration sessions with our experts
- Onboarding assistance
- Security assessment
To learn more about this package or to purchase, visit the Packages section under the Billing menu in your Prerender dashboard.
Get Support
If you're still encountering issues after implementing Prerender:
- Review your implementation against our documentation
- Contact our support team:
- Email: support@prerender.io
- Support Ticket: Submit a ticket
- Chat: Available from your Prerender dashboard
To help us resolve your issue as quickly as possible, please gather and include any relevant information, such as:
- Error messages you're seeing
- Steps you've already taken to troubleshoot
- Screenshots or screen recordings (if applicable)
Providing these details up front will help our team diagnose the problem more efficiently and get you back on track faster.
Related Articles / FAQs:
- Available integrations
- Troubleshooting Apache .htaccess integration
- What should I do if I receive a 'Prerender integration not detected' error?
- How Can I Integrate Prerender If I'm Using a Hosting Platform That Doesn't Allow Direct Server Access?
- How Does Prerender Work With CDNs Like Cloudflare, Fastly, or Akamai?
- How to check cached versions of your URLs?
- How to Fix CSS Caching Issues in React Sites?
- Why Am I Seeing 403 or 404 Errors After Integrating Prerender?
- What to do if some pages are not getting cached
- How to add additional bots (integrations maintained by Prerender)
- How to add multiple domains?