Convert array of Data into React components on server side but I want the React components to be rendered on the Client side

Question

Let's say I am using the Carousel and Carousel.Item from react-bootstrap. This can only be rendered on the client side.

I want to transform the data on my server into HTML, but still I do not want to render the component on the server side.

Why do I want to do it this way? To improve SEO of the website.

const data = [1,2,3,4];

// I want this to be rendered on the server and return 
const items = data.map(i => <Carousel.Item>i</Carousel.Item>);

// I want this to return to the client and the client should be responsible of rendering the Carousel.
/*
// <Carousel>
//     <Carousel.Item>1</Carousel.Item>
//     <Carousel.Item>2</Carousel.Item>
//     <Carousel.Item>3</Carousel.Item>
//     <Carousel.Item>4</Carousel.Item>
// </Carousel>
*/
return <Carousel>{items}</Carousel>

why do you want to do that? if you want to fetch the data on the server but show the result only on the client, you can fetch data in the server component and pass data as props to a client component called List that maps the data and renders them — Arash Jahan Bakhshan
– Arash Jahan Bakhshan, Commented Dec 16, 2023 at 1:54

Yilmaz · Accepted Answer · 2023-12-16 05:11:01Z

1

but still I do not want to render the component on the server side.

client components are first rendered on the server. if your component has client side api functions (useState, useEffect, onClick), since those functions are not available on the server, your component will throw an error. by using use client it just says ignore those api, send this to client and client will take care of. that is what hydration is

Hydration is the process of attaching event listeners to the DOM, to make the static HTML interactive. Behind the scenes, hydration is done with the hydrateRoot React API.

Subsequent Navigations

On subsequent navigations, Client Components are rendered entirely on the client, without the server-rendered HTML.

answered Dec 16, 2023 at 5:11

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert array of Data into React components on server side but I want the React components to be rendered on the Client side

1 Answer 1

Subsequent Navigations

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Subsequent Navigations

Comments

Your Answer

Sign up or log in

Post as a guest

Related