recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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粉725827686P粉725827686271 Il y a quelques jours402

répondre à tous(1)je répondrai

  • P粉212114661

    P粉2121146612024-02-26 09:59:07

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

    répondre
    0
  • Annulerrépondre