How to use PhotoAlbum with renderPhoto in a server component

[onmybob]

Hi, firstly, thank you so much for your plugin. I try use nextjs 13 with this plugin build my project , and then I would like to use SSR for my page, but I have a probolem the error that said renderPhoto not support server components. Below is my code snippet, how should I solve it, thank you.

<PhotoAlbum
      layout="columns"
      photos={list?.data.data}
      columns={3}
      spacing={20}
      renderPhoto={({
        photo,
        imageProps: { src, alt, style, ...restImageProps },
      }) => (
        <div>
          <div className="cursor-pointer relative ">
            <img

[igordanchenko]

You are probably confusing two different server-related concepts - Server Side Rendering (SSR) and React Server Components (RSC). It sounds like you are trying to render PhotoAlbum inside a server component. You can't use renderPhoto render function in this case because plain functions can't cross the boundary between server components and client components. To address this issue, you need to render PhotoAlbum in a client component (a file annotated with the "use client" directive). For example, you can refactor your code and introduce PhotoGallery client component as follows.

"use client";

import PhotoAlbum from "react-photo-album";

export default function PhotoGallery() {
  return <PhotoAlbum layout="columns" photos={ ... } renderPhoto={() => ... } />;
}