목차

1. Route Announcements

2. Static rendering

3. Dynamic rendering

1. Route Announcements

키워드

next/link screen reader assistive technology
document.title SSR CSR

1-1. Screen reader

• 웹접근성과 관련된 기술

• 웹페이지 텍스트를 소리내어 읽어줌

• assisitive technology 라고도 함

• 페이지 전환시 새로운 html 문서를 서버로부터 받은 경우에 변경된 title을 읽어 페이지가 바뀌었음을 알려주는 기능도 포함됨

• 한계: CSR 에서 페이지 전환시에는 위 기능이 작동하지 않음

1-2. Route announcer

• 넥스트에서 기본적으로 지원해주는 기능

• 스크린 리더가 페이지 전환시 title을 읽어 페이지가 변경되었음을 알려주는 기능을 보강

• 페이지 전환이 CSR 방식으로 발생된 경우 페이지 전환을 assistive technology에 알려줌

• title 을 읽어서 알려줌 (브라우저 탭에 있는 웹페이지 타이틀)

• title 값이 없으면 해당 페이지의 h1 태그 값을 알려줌

• h1도 없으면 해당 페이지의 url 경로 값을 알려줌

• next/link 의 Link 컴포넌트를 클릭한 경우 CSR 페이지 전환이 발생함

• 이때 Route announcer 가 assistive technology 에 정보를 알려줌

1-3. next/link

import Link from 'next/link';
export default function Home() {
return (
<Link href="/about">
페이지 이동
</Link>
)
}

• a 태그를 상속한 컴포넌트라고 공식문서에서 소개

• 누르면 해당 경로로 페이지 이동

• 이때 페이지 전환은 Link 컴포넌트 설정에 따라서 SSR 이거나 CSR 일 수 있음

• prefetch 라는 속성이 존재하고 이 속성이 렌더링 방식을 결정

• prefetch 값이 true 라면, Link 컴포넌트가 화면에 보일때 미리 해당 페이지 관련 데이터를 내려받아서 Link 컴포넌트를 눌렀을때 서버랑 통신시키는게 아니라 미리 받아놓은 데이터를 이용해 CSR을 함

• 이 CSR 페이지 전환에서 route announcer가 스크린 리더에 페이지 전환에 관련된 정보 전달
  (title or h1 or url)

2. Static rendering

키워드

cache CDN

1. 프로젝트 빌드

2. HTML 파일 생성

3. CDN에 분산 저장 (캐싱)

4. 유저가 웹페이지 접속

5. CDN에 캐싱되어있는 HTML 완성본을 유저에 전송

장점

• 매 요청마다 서버에서 HTML 파일 생성을 하지 않으므로 서버 운영 효율적

• HTML 파일 생성 과정이 생략되므로 유저는 빠르게 페이지를 받아볼 수 있음

단점

• 캐싱된 HTML 완성본을 받아보므로 접속할때 최신 데이터를 볼 수 없음

3. Dynamic rendering

키워드

SSR

1. 유저가 웹페이지 접속

2. 서버에서 해당 페이지의 HTML 파일 생성

3. HTML 문서 전송

장점

• 유저가 웹페이지 접속할 때마다 최신 데이터를 볼 수 있음

단점

• 매 요청마다 서버에서 HTML 파일을 생성해야함