タイトルを書き直しました: ハイブリッド レンダリング (サーバー側 + クライアント側) テクノロジーの使用

Question

サーバー上でページをレンダリングする (サーバー上で初期状態を計算する) 必要がある電子商取引プラットフォームを作成したいのですが、フィルタリングには React または vue コンポーネントを使用し、次を使用してフィルタリングされたデータを取得して初期状態を変更します。 API呼び出し。 < /p>

1 つのルート/ページでのサーバー側レンダリングとクライアント側レンダリングの組み合わせをサポートする JavaScript フレームワークをご存知ですか?

Answer 1

Next JS でこれを実現できます。サーバー側とクライアント側のレンダリングをサポートします。

以下は 2 つを組み合わせた例です:

import { useState } from 'react'
import { useRouter } から 'next/router'

関数 EventList({ イベントリスト }) {
  const [イベント, setEvents] = useState(eventList)
  const ルーター = useRouter()

  const fetchSportsEvents = async () => {
    const response = await fetch('http://localhost:4000/events?category=sports')
    const data = 応答を待つ.json()
    setEvents(データ)
    router.push('/events?category=sports'、未定義、{浅い: true })
  }
  戻る （
    
      ＃＃＃スポーツイベント＃＃＃
      ＃＃＃イベントのリスト＃＃＃
      {events.map(event => {
        戻る （
          
            
              {イベント.id} {イベント.タイトル} {イベント.日付} | {イベント.カテゴリー}
            

            
{イベント.説明}

            

          
        )
      })}
    

  )
}

デフォルトの EventList をエクスポートする

非同期関数のエクスポート getServerSideProps(context) {
  const {クエリ} = コンテキスト
  const { カテゴリ } = クエリ
  const queryString = category ? 'category=sports' : ''
  const response = await fetch(`http://localhost:4000/events?${queryString}`)
  const data = 応答を待つ.json()

  戻る {
    小道具: {
      イベントリスト: データ
    }
  }
}