2017-12-22 33 views
0

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

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

おかげ

サティシュ

+0

あなたは、常にWINDOWが存在するかどうかを確認し、コンストラクタのbooleanとしてだけでなく、ライフサイクルメソッドの結果に基づいてコードを実行することができます。さらに、データがフェッチされたかどうかを確認することができます.... –

+0

返事をありがとう、しかし、私はあなたの文を取得していないよ "WINDOWが存在するかどうかを常に確認し、コンストラクタのブーリアンの結果に基づいてコードを実行する"これをどうやってやり遂げることができますか? おかげ –

+0

確かに、あなたはサーバーにしているので、もしブラウザウィンドウが使用できなくなりますが、あなたは、クライアント側にしている場合は、ブラウザのウィンドウが利用できるようになります。それが定義されているかどうかを知っている - あなたはあなたのサーバーまたはクライアント側であなたが知っている。これを知っていると、コンポーネントにレンダリングするかどうかを伝えることができます。 if(typeof window == "undefined"){ falseを返します。 } –

答えて

0

から水和物を使用することができます。私は大きなテーブル(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でこれを結合しました。

+0

M.R. Safariありがとう、これは私の欲望を解決しました。 これを実現する他の方法はありますか? –

+0

@SatishLakhani申し訳ありません。私は本当に他の何かを認識していません –

+0

@ M.R.Safariどのようにhtmlタグを介してレンダリングでコンポーネントの状態を使用できますか? –

関連する問題