서버사이드 렌더링의 이점
- 클라이언트 사이드 렌더링을 이용하게 된다면 초기 HTML 자체가 비어있기 때문에, 브라우저가 렌더링을 진행하는 동안 사용자가 빈 화면을 볼 수 있는 시간이 있기 때문에, 서버에서 렌더링을 진행하면 HTML을 반환해 주어 빈 화면이 아니라 화면에 내용을 보여줄 수 있다
- Javascript의 다운로드 양이 작아진다.
- metaTag의 유무로 인해 SEO(검색엔진 최적화)에 유리하다.
- data Fetching에 유리하다 (DB 통신 가능, API Key 직접 사용 가능)
페이지 생성방법
기존에 React 같은 경우 해당 Url에 맞는 컴포넌트를 직접 매칭해줘야 했다면, Next에서는 app 안에 page.tsx 파일을 만들면 동적으로 생성해 준다.
해당 사진을 예시로 들면 저런 경우에는 compose/tweet 이런 식으로 접근 가능하다.
만약 compose까지만 입력한다면 compose 폴더 안에 page.tsx를 생성해 주지 않아 404 not Found가 출력될 수 있다.
렌더링 방법
- 모든 렌더링은 서버사이드 렌더링이다. ('use client'가 붙어 있는 컴포넌트도 빠짐없이)
- non interactive 한 HTML을 반환하고 사용자에게 출력한다.
- 해당 시점에 next와 react를 initializ 하여 non interactive를 interactive 하게 hydrate를 진행한다.
- 단, hydrate 되는 component들은 'use client'가 붙어 있는 컴포넌트들이다.
Frontend Junior