전체 글 (19) 썸네일형 리스트형 [Next.js] 라우팅과 네비게이션의 동작 라우팅과 네비게이션 동작을 이해하는데 도움이 되고자 How Routing and Navigation Works 내용을 더 상세하게 정리했습니다. 1. 코드 분할 (code splitting) 유저가 페이지에 접속하면 최초 경로에 대한 분할된 코드만 응답합니다. 이게 가능한 이유는 Next.js 서버가 각 경로마다 코드를 별도의 청크로 코드 분할하기 때문입니다. 후속으로 경로를 탐색해도 새로 탐색한 경로에 대한 코드만 가져오게 됩니다. 따라서 요청에 따른 응답 데이터양과 전송 시간이 줄어듭니다. 2. 미리 가져오기 (prefetching) 유저가 링크로 된 경로로 이동하기 전에, Next.js는 코드를 미리 로드합니다. Link 컴포넌트의 prefetch를 설정하면, 위 이미지와 같이 사용자의 뷰포트.. React Server Components 딥 다이브 누군가 RSC가 무엇이냐?라 묻는 질문에 대한 답을 한 번 생각해 봤습니다.그에 대한 저의 대답은 "RSC는 서버에서 렌더링 되는 새로운 컴포넌트로, 빌드 시 JSX 트리를 구성하여 HTML을 산출한다."입니다. 어떻게 이렇게 대답할 수 있을까요? 자, 우선 RSC가 일반적인 리액트 컴포넌트와 어떻게 다른지 보겠습니다. 아래는 일반적인 컴포넌트와 서버 API입니다.클라이언트가 요청을 보내면, 서버는 db에서 데이터를 찾아서 응답합니다. 클라이언트는 이 데이터를 받아서 렌더링하죠.// bundle.jsfunction Note({id}) { const [note, setNote] = useState(''); // NOTE: loads *after* first render. useEffect(() =>.. CSR부터 RSC까지 렌더링 방식의 변화 Next.js의 서버 컴포넌트와 서버 액션을 보면서 관련된 개념들이 헷갈렸습니다.그래서 그 흐름을 정리하고, 각각의 렌더링을 비교해 보겠습니다. CSR(SPA) - 2013CSR은 브라우저에서 코드를 사용자 인터페이스로 변환하는 렌더링 방법입니다렌더링 순서클라이언트가 요청합니다.서버가 빈 HTML을 응답으로 보냅니다.클라이언트가 JS 코드를 로드합니다.클라이언트는 HTML을 생성하고, 하이드레이션 하면서 상호작용이 가능한 UI를 만듭니다.💡 하이드레이션 (hydration)비유하자면, 말라비틀어진 HTML에 상호작용이 가능하게 물을 주는 것과 같습니다.구성 요소를 렌더링 하고 이벤트 핸들러를 연결합니다.약점SEO에 적합하지 않습니다. 크롤러가 인덱싱 하기에 번들 사이즈가 크고 다운로드 속도가 느립니다.. 이전 1 2 3 4 5 6 7 다음
