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

Question

ページをサーバー上でレンダリングする（初期状態はサーバー上で計算される）必要があるが、React または vue コンポーネントを使用してフィルタリングし、API 呼び出しを使用してフィルタリングされたデータを取得することで初期状態を変更する必要がある電子商取引プラットフォームを作成したいと考えています。 1 つのルート/ページでのサーバー側レンダリングとクライアント側レンダリングの組み合わせをサポートする JavaScript フレームワークをご存知ですか?

P粉212114661 · Answer

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()

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