React SSR：サーバー上でレンダリングされるコンポーネントのクライアント側のレンダリングを防止します。

Question

React初めてです。 私はreact、react4、reactyなどのサイトを構築しています。ほとんどのコンポーネントがサーバー上でレンダリングされます（主にAPI呼び出しを使用してデータを取得して表示します）。 私の質問は、サーバー上のコンポーネントをレンダリングし、レンダリングされたHTMLをクライアントに送ると、クライアント上でレンダリングされる（API呼び出しを行う）ことです。

私はそれがすでにサーバー上でレンダリングされます場合は、再度コンポーネントをレンダリングする必要はありません。どうすればこれを達成できますか？

おかげ

サティシュ

Answer 1

から水和物を使用することができます。私は大きなテーブル（5000行）をサーバー上でレンダリングしています。私はクライアントにデータを2回（HTMLとJSON形式で）送信したくありません。私はこの解決策/ハックを考え出しました。

テーブルの行をレンダリングする前に、コンポーネントはまずDOMをチェックして、同じIDのコンポーネント（プリレンダリングされたサーバー側が存在する場合）を確認し、存在する場合はHTMLを抽出し、直接dangerouslySetInnerHTMLを経由してください。

renderTable() { 
    debug('render table'); 
    const id = 'table-body'; 
    const html = this.getExistingHtml(id); 

    if (html) { 
     return <tbody id={ id } dangerouslySetInnerHTML={{ __html: html }} />; 
    } 

    return <tbody id={ id }>{ this.renderItems() }</tbody>; 
    } 

    getExistingHtml(id) { 
    if (typeof document === 'undefined') return; 
    const node = document.getElementById(id); 
    return node && node.innerHTML; 
    } 

    renderItems() { 
    debug('render items'); 
    return this.props.items.map(({ name, url }) => { 
     return (
     <tr> 
      <td> 
      <a href={ url }> 
       <div>{ name }</div> 
      </a> 
      </td> 
     </tr> 
    ); 
    }); 
    } 

    shouldComponentUpdate() { 
    return false; 
    } 

私はまた、いずれかが最初のマウント後にレンダリングを防止するためにshouldComponentUpdateでこれを結合しました。

Answer 2

あなたは、私は同様の問題を抱えている '反応-DOM'

https://reactjs.org/docs/react-dom.html#hydrate