next.js 13으로 예제를 만들어보다가, 알게된 개념! 정리해보자,.. 큼큼
React 18 이전의 렌더링
1. CSR (Client Side Rendering)
리액트 18이 나오기 전에는 리액트 컴포넌트의 모든 렌더링은 클라이언트에서 이루어졌다.
- 서버는 React로 작성한 JS 코드들을 브라우저에 응답
- 브라우저는 응답받은 JS 파일을 해석하여 HTML 파일로 렌더링, 인터랙션이 필요한 코드들을 장착했다.
2. SSR (Server Side Rendering)
- Next.js를 통해 서버에서 페이지별로 Code Split을 하고, HTML을 렌더링 한 다음에 브라우저에 응답을 한다.
- 브라우저는 전달받은 HTML을 보여주고, 추가로 전달받은 JS 코드들을 결합하는 과정(Hydration)을 거친다.
** Hydration : 뼈대 뿐인 HTML에 JS코드를 결합해, 인터랙션을 장착하는 과정
But! 이 때도 CSR이 기본이었다. SSR을 적용하려면 추가적인 코드 작성이나 설정이 필요했다.
React 18 이후의 렌더링
이때부터 Server Component가 도입되고, Next.js 13이 완전히 지원하게 되었다.
Next.js 13부터는 두가지로 컴포넌트를 만들 수 있다.
Server Component : 서버에서 HTML을 렌더링하여 브라우저에 응답. no Hydration
Client Component : 서버에서 기본적인 HTML은 렌더링해서 브라우저에 응답. Hydration.
** 기본적인 HTML은 모두 서버에서 렌더링 된다. But, Hydration 과정이 있냐 없냐 차이!
Server Component
Next.js에서 /app 디렉터리 내부에 컴포넌트를 만들면, 기본적으로 Server Component가 된다.
- 모든 컴포넌트는 Server Compoent가 디폴트
- 서버에서 렌더링 되므로 브라우저 환경에서 쓰이는 코드는 쓸 수 없다.
- onClick, useState, webStorage ... 등- Server Component는 Client Component 포함 가능
- async 함수로 정의 가능 -> 컴포넌트 내부에서 바로 await fetch() 호출 가능
장점 : 페이지 로드 시, 자바스크립트가 별로 필요가 없어서 빠름
단점 : html 안에 자바스크립트를 못 넣는다. useState, useEffect, onClick ..사용 불가능.
export default async function Home() {
const res = await fetch("https://어쩌구 저쩌구.com/like");
const data = await res.json();
return (
<main>
<h1>Home</h1>
<p>{data.title}</p>
</main>
);
}Client Component
컴포넌트 파일 최상단에 "use Client" 추가하기
"use client";
import { useState } from "react";
export default function Counter() {
const [number, setNumber] = useState(0);
return (
<div>
<p>You clicked {number} times</p>
<button onClick={() => setNumber((prev) => prev + 1)}>Click me</button>
</div>
);
}- 컴포넌트 파일 최상단에 "use Client" 붙여주면 Client Component가 된다
- 클라이언트에서 렌더링 되므로, 브라우저 환경 코드 사용 가능
- 이 컴포넌트 내부에 포함되는 자식 컴포넌트들은 자동으로 Client Component가 된다.
- Client Component는 Server Component를 포함할 수 없다.
장점 : html 안에 자바스크립트 맘대로 넣어서 기능 개발 가능
단점 : 쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩 속도도 약간 느려질 수 있다.
사용 방법
기본적으로 모든 컴포넌트를 Server Component로 만들고, 유저 인터랙션이나 React hooks을 사용할 때만 Client Component를 추가해주면 좋다.
