CSR

CSR を分かりやすく？

CSR は、Client-Side Rendering の略称であり、ブラウザ側でのレンダリングを指します。

従来の Web サイトでは、サーバー側でのレンダリングが主流でした。つまり、ブラウザからサーバーにリクエストを送り、サーバー側で HTML や CSS、JavaScript などを生成してブラウザに返すという仕組みでした。しかし、近年では、Web アプリケーションの需要が増え、ページ内の部分的な再レンダリングが必要になる場合があります。そこで、CSR が注目されるようになりました。

CSR では、サーバーからブラウザに HTML の骨組みだけを返し、JavaScript でデータを取得して動的に画面を生成するため、ページのレスポンスが高速になります。ただし、初回の読み込み時にすべてのデータを取得するため、サーバー側の負荷が軽減される反面、初回の読み込みに時間がかかるというデメリットもあります。

CSR の実装例

CSR の実装例を示します。以下のコードでは、useEffectを使用して、コンポーネントがマウントされた直後に API からデータを取得し、取得したデータを state に保存します。その後、state を使用して UI をレンダリングします。

import { useEffect, useState } from 'react'

const CSRPage = () => {
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data')
      const result = await response.json()
      setData(result)
    }
    fetchData()
  }, [])

  return (
    <div>
      <h1>CSR Page</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  )
}

export default CSRPage

上記の例では、useEffect を使用して fetchData を呼び出しています。fetchData は API からデータを取得して、setData を呼び出して state を更新します。取得したデータは、data.map を使用してリスト形式で表示されます。