Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

# Rendering Context API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Render content that search engines can index

This flow renders a component's full content in the initial HTML for search engine crawlers, and a lightweight placeholder for site visitors. The content is the same in both, and only the form it's rendered in changes, because search engines penalize pages that show crawlers different content from what site visitors see.

To render content that search engines can index, follow these steps:

1. Read `SEO` to find out whether the page is rendering for a search engine crawler:

   ```tsx
   const isCrawler = renderingContextService.SEO
   ```

2. Start with the full content when `SEO` is `true`, and the placeholder when it's `false`. For an image, use the full-size URL or the preview URL as the `src`. `imageUrl` and `previewUrl` are your own full-size and preview URLs for the image:

   ```tsx
   const [src, setSrc] = useState(isCrawler ? imageUrl : previewUrl)
   ```

3. Load the full content in browser code, such as an effect, so site visitors get it after the page loads:

   ```tsx
   useEffect(() => {
       setSrc(imageUrl)
   }, [imageUrl])
   ```

4. Render the image:

   ```tsx
   return <img src={src} alt="Spring jacket" />
   ```

## Skip browser-only work while the page renders on the server

To skip browser-only work while the page renders on the server, follow these steps:

1. At the start of each piece of code that uses browser APIs, such as `window` or `document`, read `SSR` and return early when it's `true`:

   ```ts
   function watchViewportWidth(onChange: (width: number) => void) {
       if (renderingContextService.SSR) {
           return
       }
       // Browser-only work follows.
   }
   ```

2. After the check, do the browser work:

   ```ts
   window.addEventListener('resize', () => onChange(window.innerWidth))
   ```