混合渲染（服务器端+客户端）

Question

我想创建一个电子商务平台，该平台需要在服务器上呈现的页面（在服务器上计算的初始 state）但具有用于过滤的反应或 vue 组件，通过使用 api 调用获取过滤后的数据来更改初始 state。

您知道支持在一个路由/页面中组合服务器端和客户端呈现的任何 javascript 框架吗？

Answer 1

Next JS 可以实现这一点。 它支持服务器端和客户端渲染。

这是一个结合了两者的示例：

import { useState } from 'react'
import { useRouter } from '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 (
    <>
      <button onClick={fetchSportsEvents}>Sports Events</button>
      <h1>List of events</h1>
      {events.map(event => {
        return (
          <div key={event.id}>
            <h2>
              {event.id} {event.title} {event.date} | {event.category}
            </h2>
            <p>{event.description}</p>
            <hr />
          </div>
        )
      })}
    </>
  )
}

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
    }
  }
}