Titre réécrit : utilisation de la technologie de rendu hybride (côté serveur + côté client)

Question

Je souhaite créer une plateforme de commerce électronique qui nécessite le rendu de la page sur le serveur (en calculant l'état initial sur le serveur), mais en utilisant des composants React ou vue pour le filtrage, et en modifiant l'état initial en obtenant les données filtrées à l'aide d'appels API . < /p>

Connaissez-vous des frameworks JavaScript prenant en charge la combinaison du rendu côté serveur et côté client sur une seule route/page ?

P粉212114661 · Answer

Next JS rend cela possible. Il prend en charge le rendu côté serveur et côté client.

Voici un exemple qui combine les deux :

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