重新編寫的標題：使用混合渲染（​​伺服器端+客戶端）技術

Question

我想建立一個電子商務平台，需要在伺服器上渲染頁面（在伺服器上計算初始狀態），但使用 React 或 vue 元件進行過濾，透過使用 api 呼叫取得過濾後的資料來更改初始狀態。 < /p>

您知道任何支援在一個路由/頁面中結合伺服器端和客戶端渲染的 JavaScript 框架嗎？

Answer 1

Next JS 可以實現這一點。它支援伺服器端和客戶端渲染。

這是一個結合了兩者的範例：

import { useState } from 'react'
import { useRouter } 從 'next/router'

function EventList({ eventList }) {
  const [events, setEvents] = useState(eventList)
  const router = useRouter()

  const fetchSportsEvents = async () => {
    const response = await fetch('http://localhost:4000/events?category=sports')
    const data = await response.json()
    setEvents(data)
    router.push('/events?category=sports', undefined, { shallow: true })
  }
  return (
    <>
      Sports Events
      
List of events
      {events.map(event => {
        return (
          

            

              {event.id} {event.title} {event.date} | {event.category}
            
            
{event.description}
            

          
        )
      })}
    
  )
}

export default EventList

export async function getServerSideProps(context) {
  const { query } = context
  const { category } = query
  const queryString = category ? 'category=sports' : ''
  const response = await fetch(`http://localhost:4000/events?${queryString}`)
  const data = await response.json()

  return {
    props: {
      eventList: data
    }
  }
}