리액트 SSR과 CSR 컴포넌트 동시에 한 화면에 표출하기

리액트 SSR과 CSR 컴포넌트 동시에 한 화면에 표출하는 예제를 만들어 봅니다.

page.js

import React from "react";

async function SsrComponent() {
  // Fetch data on the server side
  const res = await fetch("https://66cc88b9a4dd3c8a71b7f996.mockapi.io/users", {
    cache: "no-store", // Ensure the data is fetched freshly on each request
  });
  const data = await res.json();

  return (
    <div>
      <h2>SSR Component</h2>
      <ul>
        {data.map((user) => (
          <li key={user.id}>
            {user.id} | {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default SsrComponent;

CsrComponent.js

"use client";

import React, { useEffect, useState } from "react";

function CsrComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data on the client side after the component mounts
    fetch("https://66cc88b9a4dd3c8a71b7f996.mockapi.io/users")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>CSR Component</h2>
      <ul>
        {data.map((user) => (
          <li key={user.id}>
            {user.id} | {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default CsrComponent;

SsrComponent.js

import React from "react";

async function SsrComponent() {
  // Fetch data on the server side
  const res = await fetch("https://66cc88b9a4dd3c8a71b7f996.mockapi.io/users", {
    cache: "no-store", // Ensure the data is fetched freshly on each request
  });
  const data = await res.json();

  return (
    <div>
      <h2>SSR Component</h2>
      <ul>
        {data.map((user) => (
          <li key={user.id}>
            {user.id} | {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default SsrComponent;