Next JS v12 렌더링

•

페이지 컴포넌트는 Client Side 렌더링이 된다.

•

페이지 컴포넌트는 데이터를 Props로 전달받도록 해야한다.

import MeowArticle from "@/app/components/MeowArticle";
import { Product, getProducts } from "@/service/products";
import Link from "next/link";

type Props = {
  products: Product[];
};

export default function ProductsPage({ products }: Props) {
  return (
    <>
      <h1>제품 소개 페이지</h1>
      <ul>
        {products.map((p, i) => (
          <li key={i}>
            <Link href={`/products/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
      <MeowArticle />
    </>
  );
}
JavaScript
복사

•

하위 코드는 서버상에서 실행이 된다.

// SSG OR ISR
export async function getStaticProps() {
  const products = await getProducts();
  return {
    props: { products },
	  // revalidate: 10, // ISR
  };
}

// ssr
export async function getServerSideProps() {
	const products = await getProducts();
  return {
    props: { products },
  };
}
JavaScript
복사

요약:

•

컴포넌트는 무조건 클라이언트 상에서 동작

•

next에서 정의한 함수는 서버 상에서 동작한다.

import MeowArticle from "@/app/components/MeowArticle";
import { Product, getProducts } from "@/service/products";
import Link from "next/link";

type Props = {
  products: Product[];
};

export default function ProductsPage({ products }: Props) {
  return (
    <>
      <h1>제품 소개 페이지</h1>
      <ul>
        {products.map((p, i) => (
          <li key={i}>
            <Link href={`/products/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
      <MeowArticle />
    </>
  );
}

// SSG OR ISR
export async function getStaticProps() {
  const products = await getProducts();
  return {
    props: { products },
	  // revalidate: 10, // ISR
  };
}
JavaScript
복사

import MeowArticle from "@/app/components/MeowArticle";
import { Product, getProducts } from "@/service/products";
import Link from "next/link";

type Props = {
  products: Product[];
};

export default function ProductsPage({ products }: Props) {
  return (
    <>
      <h1>제품 소개 페이지</h1>
      <ul>
        {products.map((p, i) => (
          <li key={i}>
            <Link href={`/products/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
      <MeowArticle />
    </>
  );
}

// SSR
export async function getServerSideProps() {
  const products = await getProducts();
  return {
    props: { products },
  };
}
JavaScript
복사