Definitions:
- SPA (Single Page Application) — is a website that dynamically updates the current page (e.g. content and URL) rather than loading entire new pages from a server. This approach avoids interruption of the user experience, making the application behave more like a desktop application. In an SPA, either all necessary code — HTML, JavaScript, and CSS (or at least “core bundle”, the most used and needed part of codebase and assets) — is retrieved with a single page load. The page does not reload at any point in the process, nor does control transfer to another page;
- PWA (Progressive Web Application) — is the set of guidelines and suggestions based on next statements: reliable, fast, and engaging. Usually, every PWA is felling into SPA category, while most of the SPAs follow all or some of the PWA guidelines.
Okay, now we know that SPA and PWA are bound terms, there is something else that unites those two terms together — by default modern web applications are invisible to web crawlers, search engines, social networks, web spiders, and bots. While SPAs targeted on the best user experience, by default it comes with zero benefits for SEO and web appearance.
So, all web apps build on top of React.js, Meteor.js, Angular.js, Vue.js, and other modern JavaScript front-end frameworks, will force its creators to pick one of the sides:
- Do nothing — there is plenty of internal projects, pages, and apps, which aren’t meant to be accessible via google search;
- SSR (Server Side Rendering) — this approach requires extra-coding or following some patterns if third-party libraries are used. SSR will take time, resources, and as a consequence — money to implement, as there is still no fit-them-all drop-in solution. Every framework or library comes with its own solution and it’s a time-consuming task to read docs and implement SSR on your end. And still, there is a chance to turn it into the bad experience running into “Cloaking”;
- Pre-rendering — Middleware solution, it intercepts requests from crawlers, bots, social networks, and search engines to analyze and forward requests from “crawlers” to “Prerendering” engine. “Prerendering” engine will visit your website, execute all JavaScript filling templates with content, texts, and data, — then run some optimizations (depends from the pre-rendering engine) and return to a crawler. In the best scenario middleware will scan your website upfront and cache all rendered pages providing the best response time to a crawler. In most of the cases, there will be no need to write code, or a minimal coding-session to implement integration will be required. There are many pre-rendering solutions, some of them are a free and open source, can be installed an configured on your own server, while running your own instance of the pre-rendering engine may be slow and consume a lot of CPU and RAM, there are SaaS solutions which are easy to set up and use.
Features depend on a service provider and its implementation, pre-rendering approach has next pros:
- 🚀 Blazing-fast response time, backed with our innovative CDN-powered caching solution
- 🤘 Support of bleeding edge JavaScript syntaxes (ES6/7)
- 🗄 Upfront website scanning, rendering and caching
- 🤖 As a response optimized HTML is returned, which will make GoogleBot and other bots fall in love ♥️ with your website
- 🏋️ Offload your server and take all heavy tasks, saving your server bandwidth, CPU, I/O, and RAM
- 📱 Consistent link previews in messaging apps, like iMessage, Messages, Facebook, Slack, Telegram, WhatsApp, Viber, VK, Twitter, etc.
- 💻 Image, title, and description previews for posted links at social networks, like Facebook, Twitter, VK and others
Available options:
- ▲ostr.io — Full-featured (see list above), blazing-fast caching, and easy to use and integrate
- Prerender.io — Basic features. Has a free open source solution
- Prerender.cloud — ES6/7 support
- Rendertron — Free open source library, requires coding and integration
- Seo4Ajax — Simple and basic
- Seo.js — Simple with extra features and analytics
- Brombone
Tell your CTO what there is no need to spend developer’s time on implementing SSR, — it’s boring!
Let coders code, move DevOps tasks to ostr.io
By ▲ with ♥️
