Next.jsを少しずつ理解していく13【CSR/クライアントサイドレンダリング】

10月 13, 2022

今回はNext.jsのクライアントサイドレンダリング（CSR）について紹介します。

クライアントサイドレンダリング（CSR）の必要性

これまで、Next.jsの事前レンダリングが提供する2つのレンダリング型、SSG（静的サイトジェネレーター）とSSR（サーバーサイドレンダリング）について説明してきました。

事前レンダリングは表示速度も速く、SEOにも対応しているなど多くのメリットがありますが、Webアプリケーションのあらゆるシーンで事前レンダリングが最適解だというわけではありません。

たとえばユーザーがログインした後に閲覧できるダッシュボードページなどは、ユーザーの登録情報等を確認できるプライベートなページです。SEOに最適化する必要はありませんし、ユーザーの情報を事前にフェッチしてレンダリングしておく必要もありません。（そういったこともできるが）

そういった場合、SSGやSSRよりもCSRを採用する方が適しているケースもあります。

Next.jsでCSRを使う

まずはdb.jsonに今回使用するデータ「dashborad」を登録してjson-serverコマンドを実行した後、データが表示されるか確認して下さい。

pre-rendering/db.json

{
    "dashboard": {
        "posts": 5,
        "likes": 100,
        "followers": 20,
        "following": 50
    },
    "products": [......（以下略）

Terminal

npm run server-json

結果

続いては一気に進めていきます。まずはpagesディレクトリ直下にdashboard.jsファイルを作成して、CSRを行えるように設定していきます。Reactを触ったことがある人ならお馴染みの、useStateやuseEffectを使っていきますよ。

Terminal

touch pages/dashboard.js

pages/dashboard.js

//useStateとuseEffectフックをインポート
import {useState, useEffect} from 'react'


function Dashboard() {
    //ローディングチェックのstateを設定
    const [isLoading, setIsLoading] = useState(true)
    //取得したデータを保持するstateを設定
    const [dashboardData, setDashboardData] = useState(null)

    //useEffectで、ページロード時に発火する関数を設置
    useEffect(() => {
         //db.jsonからデータを取得して、stateに保持させる
        async function fetchDashboardData() {
            const response = await fetch('http://localhost:3001/dashboard')
            const data = await response.json()
            setDashboardData(data)
            //データを取得し終えたら、ローディングをfalseに変更
            setIsLoading(false)
        }
        fetchDashboardData()
    }, [])
   
    //ローディング中の表示を設定
    if(isLoading) {
        return <h2>Loading ... </h2>
    }
    
    //ローディングが終わったら取得したデータの一覧を表示
    return(
        <div>
            <h2>Dashboard</h2>
            <p>Posts : {dashboardData.posts}</p>
            <p>Likes : {dashboardData.likes}</p>
            <p>Followers : {dashboardData.followers}</p>
            <p>Following : {dashboardData.following}</p>
        </div>
    )
}

//exportも忘れない
export default Dashboard

結果

SWRを使う

ReactやNext.jsにおいてCSRを行う場合、SWRというパッケージを利用することが推奨されています。SWRを使用するとuseStateやuseEffectなどのフックを利用しなくても、簡単にデータ取得・表示を行えるようになります。

まずはSWRパッケージをインストールしてください。その次にpagesディレクトリ直下にdashboard-swr.jsファイルを作成し、SWRを使ったデータフェッチのコードを記述していきます。

Terminal

npm install swr
touch pages/dashboard-swr.js

pages/dashboard-swr.js

//swrをインポート
import useSWR from 'swr'

function DashboardSWR() {
    //fetcherにデータ取得関数を格納
    const fetcher = async () => {
        const response = await fetch('http://localhost:3001/dashboard')
        const data = await response.json()
        return data
    }

    //第一引数は一意のキー
    //第二引数はデータフェッチ関数（fetcherを指定）
    //分割代入で、dataとerrorを取り出す
    const {data, error} = useSWR('dashboard', fetcher)
    
    //errorがあれば「An error has occured」と表示
    if(error) return 'An error has occured'

    //dataがなければ「Loading」と表示
    if(!data) return 'Loading'
    
    return(
        <div>
            <h2>Dashboard</h2>
            <p>Posts : {data.posts}</p>
            <p>Likes : {data.likes}</p>
            <p>Followers : {data.followers}</p>
            <p>Following : {data.following}</p>
        </div>
    )
}

export default DashboardSWR

結果

表示は先ほどと変わりませんが、useStateやuseEffectを使用するよりもスマートに記述できると思います。

まとめ

以上でNext.jsのCSRについての紹介は終わりです。

次回は事前レンダリングとCSRを組み合わせてデータをフェッチする方法について紹介します。

2022.10.13

...