Rendering Strategy

Usage

playground.md

<script setup>
  import VueComp1 from './rendering-strategy-comps/vue/VueComp1.vue';
  const page = {
    title: 'Rendering Strategy',
  };
  const vueUniqueId = 'vue-unique-id';
</script>

<script lang="react">
  import ReactComp1 from './rendering-strategy-comps/react/ReactComp1';
  import { ReactComp2 } from './rendering-strategy-comps/react/ReactComp2';
  import ReactComp3 from './rendering-strategy-comps/react/ReactComp3';
  import { ReactComp4 } from './rendering-strategy-comps/react/ReactComp4';
  import { ReactComp5 } from './rendering-strategy-comps/react/ReactComp5';
  import ReactVueSharedComp from './rendering-strategy-comps/react/ReactVueSharedComp';
</script>

Strategy Design

Client:Only

The component only performs client-side rendering, without server-side rendering. It is suitable for client-side components that have strong dependencies on the host environment.

playground.md

<ReactComp1 client:only render-strategy="client:only" component-name="ReactComp1" :page-title="page.title" :render-count="1" />

ReactComp1.tsx

import { useState } from 'react';
import type { CompProps } from '../type';

export default function ReactComp1(props: CompProps) {
  const [count, setCount] = useState(0);
  return (
    <div className="react-comp1-demo">
      <strong>
        {props['render-count']}: Rendering Strategy:{' '}
        {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>Component Name:</strong>{' '}
          <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>Page Title:</strong> <span>{props['page-title']}</span>
        </li>
        <li>
          <button
            style={{
              padding: '5px',
              borderRadius: '8px',
              fontSize: '14px',
              marginRight: '8px',
              backgroundColor: '#56a8ab',
              color: '#9ee2d3',
              border: 'none'
            }}
            onClick={() => setCount(count + 1)}
            type="button"
          >
            Click Me!
          </button>
          <strong>React Instance Count:</strong> <span>{count}</span>
        </li>
      </ol>
    </div>
  );
}

Pre-processed to:

<div
  __vrite__react_render_id__="/Users/Project/vrite/material/strategy/rendering-strategy.md_0"
  __vrite__react_render_directive__="client:only"
  __vrite__react_render_component__="ReactComp1"
  render-strategy="client:only"
  component-name="ReactComp1"
  page-title="Rendering Strategy"
  render-count="1"
></div>

The rendering result is as follows:

---

---

SSR:Only

The component only performs server-side rendering, without client-side rendering. It is suitable for server-side components.

playground.md

<ReactComp2 ssr:only render-strategy="ssr:only" component-name="ReactComp2" :page-title="page.title" :render-count="2" />

ReactComp2.tsx

import type { CompProps } from '../type';

export function ReactComp2(props: CompProps) {
  return (
    <div className="react-comp2-demo">
      <strong>
        {props['render-count']}: Rendering Strategy:{' '}
        {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>Component Name:</strong>{' '}
          <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>Page Title:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

Pre-processed to:

<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_1"
  __vrite__react_render_directive__="ssr:only"
  __vrite__react_render_component__="ReactComp2"
  render-strategy="ssr:only"
  component-name="ReactComp2"
  page-title="Rendering Strategy"
  render-count="2"
></div>

The rendering result is as follows:

---

2: Rendering Strategy: ssr:only

1. Component Name: ReactComp2
2. Page Title: Rendering Strategy

---

Client:Load

The component completes the rendering work on the server-side, and the hydration process is executed immediately after the client-side script is downloaded. This is suitable for common SSR applications.

playground.md

<ReactComp3 client:load render-strategy="client:load" component-name="ReactComp3" :page-title="page.title" :render-count="3" />

ReactComp3.tsx

import type { CompProps } from '../type';

export default function ReactComp3(props: CompProps) {
  return (
    <div className="react-comp3-demo">
      <strong>
        {props['render-count']}: Rendering Strategy:{' '}
        {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>Component Name:</strong>{' '}
          <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>Page Title:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

Pre-processed to:

<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_2"
  __vrite__react_render_directive__="client:load"
  __vrite__react_render_component__="ReactComp3"
  render-strategy="client:load"
  component-name="ReactComp3"
  page-title="Rendering Strategy"
  render-count="3"
></div>

The rendering result is as follows:

---

3: Rendering Strategy: client:load

1. Component Name: ReactComp3
2. Page Title: Rendering Strategy

---

Client:Visible

The component completes the rendering work on the server-side. The hydration process is executed after the client-side script is downloaded and when the component becomes visible.

playground.md

<ReactComp4 client:visible render-strategy="client:visible" component-name="ReactComp4" :page-title="page.title" :render-count="4" />

ReactComp4.tsx

import type { CompProps } from '../type';

export function ReactComp4(props: CompProps) {
  return (
    <div className="react-comp4-demo">
      <strong>
        {props['render-count']}: Rendering Strategy:{' '}
        {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>Component Name:</strong>{' '}
          <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>Page Title:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

Pre-processed to:

<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_3"
  __vrite__react_render_directive__="client:visible"
  __vrite__react_render_component__="ReactComp4"
  render-strategy="client:visible"
  component-name="ReactComp4"
  page-title="Rendering Strategy"
  render-count="4"
></div>

The rendering result is as follows:

---

4: Rendering Strategy: client:visible

1. Component Name: ReactComp4
2. Page Title: Rendering Strategy

---

Default Strategy

The default rendering strategy, equivalent to client:load.

playground.md

<ReactComp5 render-strategy="default" component-name="ReactComp5" :page-title="page.title" :render-count="5" />

ReactComp5.tsx

import type { CompProps } from '../type';

export function ReactComp5(props: CompProps) {
  return (
    <div className="react-comp5-demo">
      <strong>
        {props['render-count']}: Rendering Strategy:{' '}
        {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>Component Name:</strong>{' '}
          <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>Page Title:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

Pre-processed to:

<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_4"
  __vrite__react_render_directive__="client:load"
  __vrite__react_render_component__="ReactComp5"
  render-strategy="default"
  component-name="ReactComp5"
  page-title="Rendering Strategy"
  render-count="5"
></div>

The rendering result is as follows:

---

5: Rendering Strategy: default

1. Component Name: ReactComp5
2. Page Title: Rendering Strategy

---

Rendering Strategy Combination

playground.md

<VueComp1
  :unique-id="vueUniqueId"
  render-strategy="client:only"
  component-name="VueComp1"
  :page-title="page.title"
  :render-count="6"
>
  <template #default="{ vueInfo }">
    <ReactVueSharedComp client:only render-strategy="client:only" component-name="ReactVueSharedComp" :page-title="page.title" render-count="3-7" :vue-info="vueInfo" />
  </template>
</VueComp1>

ReactVueSharedComp.tsx

import type { CompProps } from '../type';

interface ReactVueSharedCompProps extends CompProps {
  'vue-info': string;
}

export default function ReactVueSharedComp(props: ReactVueSharedCompProps) {
  console.log(props);
  return (
    <div className="react-vue-shared-comp">
      <strong>
        {props['render-count']}: Rendering Strategy:{' '}
        {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>Component Name:</strong>{' '}
          <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>Page Title:</strong> <span>{props['page-title']}</span>
        </li>
        <li>
          <strong>Vue Component Info:</strong>{' '}
          <span>{props['vue-info']}</span>
        </li>
      </ol>
    </div>
  );
}

The rendering result is as follows:

---

6: Rendering Strategy: client:only

1. Component Name: VueComp1
2. Page Title: Rendering Strategy
3. Child Component Rendering:

---

Contributors

XiSenao

Changelog

Last edited about 15 hours ago

View full history

ebc2b38-feat(vitepress-enhance): core integration of rendering react components in vitepress

2162aae-feat(vitepress-enhance): vitepress supports multiple strategies for rendering react components