오늘 공부한것 & 기억할 내용
Next.js
- 리액트는 자바스크립트 라이브러리이고 Next.js는 프레임워크
- 코드 분할code splitting
- 서버 사이드 렌더링(SSR)
- 파일 기반 라우팅(react-router를 사용하지 않고 Next.js에서의 내비게이션은 pages/ 디렉터리를 사용)
- 경로 기반 프리페칭pre-fetching
리액트 문제점
리액트는 기본적으로 클라이언트 사이드에서만 작동
사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 검색 엔진 최적화search engine optimization(SEO)의 효과를 거의 볼 수 없으며, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담
웹 앱을 완전히 표시하려면 브라우저가 전체 웹 애플리케이션 번들을 다운로드한 다음 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 하기 때문 그래서 아주 큰 웹 애플리케이션에서는 첫 화면을 표시하기까지 수 초가 소요되기도 함
이 문제를 해결하기 위해 많은 개발자들이 웹 애플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작
서버 사이드 렌더링을 사용할 수 있다면 리액트 앱을 순수한 HTML 페이지로 미리 렌더링해둔 다음 브라우저가 이를 다운로드하여 즉각 화면에 표시하고, 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용
이러한 연구의 결과로 Vercel이 Next.js를 만듦
rendering
- rendering은 react code를 브라우저가 이해할 수 있는 html으로 바꾸는것
CSR (client side rendering)
- react는 사용자 브라우저인 client단 에서 모든 rendering작업을 수행해야한다.
- client가 사용자 브라우저에 UI를 구축
- index.html을 보면 root안이 비어있다 (seo에 좋지 않다 - 검색 엔진이 보는 것은 비어있는 root뿐)
- 브라우저가 모든 javascript파일을 다운 후 실행해야 화면이 보여진다(브라우저의 javascript엔진에 의해 화면 출력)
- client는 javascript를 로드 하고 그 후에 javascript가 UI를 빌드한다.
SSR (server side rendering)
- 우선적으로 모든 component들을 server에 rendering한다(server에 HTML을 생성함)
- 이미 HTML을 가지고 있어 javascript가 활성화 되지 않아도 사용자가 HTML을 볼 수 있다.
Hydration
- 서버사이드 렌더링(SSR)을 통해 만들어 진 인터랙티브 하지 않는 HTML을 클라이언트 측 자바스크립트를 사용하여 인터랙티브한 리액트 컴포넌트로 변환하는 과정 (서버 환경에서 이미 렌더링된 HTML에 React를 붙이는 것)
- HTML을 interactive한 react component로 바꾸는것(onClick, useState등 동적인 페이지에 사용)
use client
- backend에서 render되고 front에서 hydrate가 된다 (client에서만 render가 된다는게 아님)
서버컴포넌트 클라이언트컴포넌트 차이점
서버 컴포넌트:
- 서버에서 렌더링되며, 클라이언트에서 JavaScript를 실행하지 않아도 된다.
- 클라이언트의 JavaScript 번들을 최소화하고 초기 페이지 로딩을 빠르게 할 수 있다.
- 클라이언트 측 이벤트나 상태를 다룰 수 없다.
클라이언트 컴포넌트:
- 클라이언트에서 실행되며, 상태 관리, 이벤트 처리와 같은 로직을 담당
- use client로 클라이언트에서 실행되도록 명시적으로 지정
layout
- 처음 화면에 렌더링 될때 모든 컴포넌트는 layout의 children에 들어가있다.
- 공통으로 사용할 네비게이션, 헤더, 푸터등 layout에 넣을 수 있다.
- 각 페이지마다 별도의 layout을 추가로 가질 수 있다.(중첩 가능, 단 별도의 layout생성시 html, body등을 지워줘야한다)
- 상위 폴더에 layout이 있다면 하위폴더에도 적용이 된다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Header/>
{children}
<Footer/>
</body>
</html>
)
}route group
- 폴더명을 () 괄호를 지정해주면 url이 바뀌지 않는다.
metadata
- matadata는 layout처럼 여러 파일에서 쓸 수 있지만 중첩이 아니라 병합이 된다
- metadata는 컴포넌트에서 내보낼 수 없고 서버컴포넌트에서만 있을 수 있다
layout.tsx
Abous/page.tsx
dynamic route
- /movie/:id 처럼 동적인 url이 들어가는 route
- URL 뒤에 동적인 parameter가 추가되는것 알리기 위해 대괄호가 들어간 폴더 생성
배운점 & 느낀점
예전에 겉핥기로 nextjs를 잠깐 배웠다가 너무 어려워서 이해를 못하는 부분이 많았는데 14로 업데이트 되면서인지 사용방법이 훨씬 쉬워진 느낌이라 배우면서 크게 어려운점이 없었다.
아직 route부분은 조금 헷갈리지만 matadata부분이나 layout기능은 편리한 기능같다.
