실전에서 바로 쓰는 Next.js - YES24
서버 사이드 렌더링(SSR) @이희령
- 렌더링(Rendering): Javascript를 이용해서 HTML 코드를 만드는 행위
- 하이드레이션(Hydration): 서버에서 렌더링한 페이지에 스크립트 코드를 집어넣어서 나중에 웹 페이지를 동적으로 처리하는 것
- 사용자가 페이지에 접근하면
서버는 페이지를 렌더링해서 결과로 생성한 HTML 파일을 클라이언트로 전송한다.
- 브라우저는 페이지에서 요청한 모든 스크립트를 다운로드한 다음 DOM 위에 각 스크립트 코드를
하이드레이션한다.
클라이언트에서의 내비게이션(p.55) @정윤숙
Link 컴포넌트를 쓰면 Link에 연결 된 부분 및 페이지를 미리 로드한다.
- 미리 불러오는 기능 비활성화 ⇒ Link 컴포넌트에
preload={false} 속성 추가
router.push 는 미리 로드하지 못 하기 때문에 특정 상황이나 이벤트가 발생한 경우에만 사용하는 게 좋다.
데이터 요청 서버 vs 클라이언트 (p.104) @박성환
- 동적 웹 앱에서는 클라이언트가 데이터를 불러오는 경우가 많다. 그러나 서버가 데이터를 불러오는것이 좀더 안전하다.
- 서버에서 HTTP 요청을 보내면 요청을 보내는 API 엔드포인트 주소가 외부에 알려지지 않는다.
- 그외에 전송하는 매개변수 값이나 HTTP 헤더, 심지어 사용자의 인증 토큰값도 외부에 노출될 일이 없다. e
SEO와 성능 관리 (p.226) @이희령
- 클라이언트 사이드 렌더링(CSR)
- 동적 콘텐츠에 적합
- SEO 점수 낮고 보안상 문제 가능성 있음
- 서버 사이드 렌더링(SSR)
- SEO 점수 높고 보안상 매우 안전함
- 서버 관리에 부담 생길 가능성 있음
- 정적 사이트 재생성(SSG)
- 정적 콘텐츠에 적합
- SEO와 성능 면에서 가장 뛰어남
- 보안상 문제 가능성 있음
페이지별 렌더링 전략 (p.227) @이희령