Rewritten title: using hybrid rendering (server-side + client-side) technology

Question

I want to create an e-commerce platform that requires rendering the page on the server (calculating the initial state on the server), but using React or vue components for filtering, and changing the initial state by getting the filtered data using api calls. < /p>

Do you know of any JavaScript frameworks that support combining server-side and client-side rendering in one route/page?

Answer 1

Next JS can achieve this. It supports server-side and client-side rendering.

Here is an example that combines the two:

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