What do you do if bots can’t load JavaScript and are missing some content on your website?
If content is only loaded via JavaScript, that means the site relies on client-side rendering (CSR) to build parts of the page. While CSR works well for interactive and real-time updates, it can create challenges for Googlebot, generative AI bots and even users with limited JavaScript support.
The fix is to move content to server-side rendering (SSR). SSR loads the content directly from the server and ensures the content is delivered as part of the initial HTML. The initial HTML is accessible without requiring JavaScript.
How do you implement SSR? This will depend on how your website is configured. Here are some common solutions…
- Use a Framework with Built-in SSR Support: Frameworks like Next.js (for React) or Nuxt.js (for Vue) make it easier to render content server-side while maintaining interactivity on the client. These tools allow you to decide which content is rendered on the server and which is rendered on the client. Keep in mind that when using React, CSR is often the default, but React frameworks like Next.js might be better for SSR.
- Adopt Hybrid Rendering: Combine SSR and CSR strategically. Critical content can be rendered server-side, while less critical, interactive elements can be rendered client-side (by JavaScript). For example, the product name, price, and availability are critical pieces of information and should come from the server-side code. However, general content about the product’s brand is less important so could be loaded client-side.
- Explore Prerendering and Static Site Generation (SSG). These systems pre-build pages and build out cached files that are returned to bots. That way, bots are served static HTML files and do not have any JavaScript to load and execute. The cached files can be updated on a regular basis to ensure bots see the latest information from the page.
Transitioning to SSR can pose challenges, especially with third-party scripts. Many third-party tools, like personalization systems, inject dynamic content via JavaScript. Depending on your content, you may also use JavaScript to load data from an API (like a news feed or fetch the latest price of an item). Some third-party systems also forbid their data from being cached (though they might permit limited caching to help SEO). All of this creates complexity to work through. In many cases, the hybrid rendering approach tends to be the most practical solution.
Ultimately, the choice between CSR and SSR depends on your goals. SSR isn’t always the right answer and isn’t always an option. While CSR may excel for dynamic apps, SSR offers clear benefits for SEO and generative AI because it ensures content is crawlable.
| Solution | Summary | Key Tools/Examples |
|---|---|---|
| Use a Framework with Built-in SSR Support | Utilize frameworks to enable server-side rendering (SSR) while maintaining client interactivity. Decide which content is rendered server-side vs. client-side. | Next.js (React), Nuxt.js (Vue) |
| Adopt Hybrid Rendering | Combine SSR for critical content (e.g., product name, price, availability) with CSR for less critical content (e.g., brand details). | SSR + CSR Strategy |
| Static or prerendered pages | Serves bots pre-generates pages, minimizing or eliminating JavaScript execution. | Static Site Generation (SSG), Prerender.io |