Tajuk yang ditulis semula: menggunakan teknologi pemaparan hibrid (sebelah pelayan + sebelah pelanggan).

Question

Saya ingin mencipta platform e-dagang yang memerlukan pemaparan halaman pada pelayan (mengira keadaan awal pada pelayan), tetapi menggunakan komponen React atau vue untuk penapisan dan menukar keadaan awal dengan mendapatkan data yang ditapis menggunakan panggilan api . < /p>

Adakah anda tahu mana-mana rangka kerja JavaScript yang menyokong penggabungan pemaparan bahagian pelayan dan bahagian klien dalam satu laluan/halaman?

Answer 1

JS seterusnya membolehkan ini. Ia menyokong pemaparan bahagian pelayan dan bahagian pelanggan.

Ini contoh yang menggabungkan kedua-duanya:

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