> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/rendering-context/sample-flows.md

## Article Content:

# 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))
   ```