Hydration and Text content does not match server-rendered HTML with Next 13 App Router

[piyushchauhan2011]

I received two error as following:

1. Text content does not match server-rendered HTML.
2. There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Reproduction

"use client";

import AliceCarousel from "react-alice-carousel";
import "react-alice-carousel/lib/alice-carousel.css";

interface Feedback {
  id: number;
  text: string;
  author: string;
}

interface CustomerFeedbacksProps {
  feedbacks: Feedback[];
}

const customerFeedbacks = [
  {
    id: 1,
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies imperdiet luctus. Praesent rutrum, purus in ullamcorper pellentesque, lectus enim molestie orci, eu finibus mauris sem id tortor. Quisque fermentum ipsum vitae libero suscipit facilisis. Donec feugiat vehicula mauris, nec tincidunt turpis viverra sit amet. Fusce augue urna, porttitor a aliquam porta, ultricies at ex. Sed non consectetur nisl. Ut felis enim, ultricies et lobortis sed, placerat nec sapien",
    author: "abcd",
  },
  {
    id: 2,
    text: "Mauris eget nisi eget felis viverra lobortis. Cras dapibus scelerisque efficitur. Aenean non diam efficitur, tempor massa ac, tincidunt dolor. Suspendisse ullamcorper sem lectus. Fusce ligula nibh, pharetra eu enim eu, ullamcorper gravida libero. Quisque porta, turpis sit amet molestie aliquam, eros nunc eleifend quam, et scelerisque massa sem interdum nibh. Ut pretium nulla sem, sed maximus nulla viverra ut",
    author: "pqrs",
  },
];

export default function CustomerFeedbacks({
  feedbacks,
}: CustomerFeedbacksProps) {
  return (
    <div className="customer-feedbacks container px-24 mx-auto my-24">
      <AliceCarousel
        mouseTracking
        autoPlay
        disableButtonsControls
        disableDotsControls
        infinite
        autoPlayInterval={6000}
        responsive={{
          0: {
            items: 1,
          },
          1024: {
            items: 3,
            itemsFit: "contain",
          },
        }}
        items={feedbacks.map(({ id, icon, text, author }) => (
          <div
            className="flex flex-col justify-center p-8 my-8 mx-3 border border-slate-100 shadow rounded-lg max-w-md"
            key={id}
            onDragStart={(e) => e.preventDefault()}
          >
            <p className="text-gray-500 py-6">{text}</p>
            <p className="text-black-900 font-bold">{author}</p>
          </div>
        ))}
      />
    </div>
  );
}

[maxmarinich]

Hi, @piyushchauhan2011! Please look #282