1. 렌더링
: React 컴포넌트를 가져와 브라우저가 이해할 수 있는 HTML로 변환하는 작업
2. CSR
: Client Side Rendering : 브라우저(client)가 렌더링
- create-react-app을 사용해 react로 애플리케이션을 생성
- react는 사용자 브러우저인 client단에서 모든 렌더링을 해야 함
- 페이지들의 내용이 모두 실제 브라우저 코드에 없음
- 자바 스크립트를 로드 → 자바스크립트가 UI를 빌드
- 단점
- 초기 로드 시 HTML이 비어 있고, 자바 스크립트 다운로드 및 실행 후에 화면이 렌더링됨
3. SSR : default 설정
: Server Side Rendering : 서버(백엔드)가 렌더링
- 모든 component를 렌더링해서 그 HTML로 브라우저 요청에 대한 응답을 함
- 페이지들의 내용이 모두 실제 브라우저 코드에 있음
- 장점
- HTML이 미리 렌더링된 상태로 제공 → 페이지의 초기 화면을 빠르게 표시
→ 이미 화면에 표시할 HTML 코드를 가지고 있음 = 비어있지 않음
4. Server component : default 설정
- 서버에서 렌더링 되고 hydrate는 안 됨
- 사용자가 자바 스크립트를 적게 다운받기 때문에 속도가 빨라짐
- 브라우저에 한번만 렌더링되고 다시는 렌더링 될 일이 없다면 component를 위한 코드를 다운받을 필요가 없음
5. “user client” : 클라이언트에서 렌더링
- 지시어를 사용해 클라이언트에서만 렌더링되도록 지정할 수 있음
- 해당 컴포넌트는 서버에서 렌더링되지 않고, 클라이언트에서 자바스크립트로 렌더링됨
- 서버에서 렌더링된 HTML이 브라우저로 전송된 후, 클라이언트 측에서 "use client"로 지정된 컴포넌트가 추가적으로 렌더링됨
- 초기 HTML이 빠르게 로드되며, 자바스크립트가 활성화된 후 React가 해당 컴포넌트를 클라이언트 측에서 렌더링
- 자바스크립트가 활성화된 경우에만 해당 컴포넌트가 렌더링
- React는 이후에 추가되어 Hydration을 통해 클라이언트에서 인터랙티브한 기능을 지원
Share article
