我想建立一個(gè)電子商務(wù)平臺(tái)，需要在伺服器上渲染頁(yè)面（在伺服器上計(jì)算初始狀態(tài)），但使用 React 或 vue 元件進(jìn)行過(guò)濾，透過(guò)使用 api 呼叫取得過(guò)濾後的資料來(lái)更改初始狀態(tài)。 < /p>
您知道任何支援在一個(gè)路由/頁(yè)面中結(jié)合伺服器端和客戶端渲染的 JavaScript 框架嗎？
1
0
0
Next JS 可以實(shí)現(xiàn)這一點(diǎn)。它支援伺服器端和客戶端渲染。
這是一個(gè)結(jié)合了兩者的範(fàn)例：
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 (
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
}
}
}
