SEO(Search Engine Optimization)

⭐️검색엔진 최적화

구글, 네이버와 같은 포털사이트에서 검색엔진을 볼 수 있다. 이 검색엔진들 즉, 각각의 사이트가 가진 검색봇은 쉬지 않고 여러 사이트를 방문하며 해당 사이트가 어떤 사이트인지 파악하는데, 서버사이드 렌더링 처리가 되지 않은 사이트는 초기 렌더링 시 데이터가 모두 비어 있게 되어 검색봇은 페이지가 무슨 페이지인지 알 수 없게 된다.

CSR(Client-Side-Rendering)

클라이언트 사이트 렌더링은 서버에서 전체 페이지를 한번 렌더링해서 그려주고나서 사용자가 새로운 작업을 요청할 떄 소스를 서버에서 제공받아 클라이언트가 해석하여 렌더링 하는 방식이다.

서버사이드 렌더링은 서버에 html문서를 요청하는 것이며,
클라이언트 사이드 렌더링은 브라우저에서 자바스크립트로 콘텐츠를 렌더링한다. CSR의 단점은 사용자가 첫화면을 보기까지 시간이 오래 걸릴 수 있다. 또한 추가적으로 필요한 데이터를 받아오기 때문에 첫 화면은 비어있을수 있다.
이를 보완하여 등장한 것이 서버사이드 렌더링(SSR)이다.

Build

빌드(build)는 우리가 작성한 코드, 프로젝트를 실행 할 수 있는 형태로 만들어 주는 것이다.
빌드방식은 크게 SSR, SSG 방식으로 나눌 수 있다.

SSR(Server-Side-Rendering)

빌드할 때 매번 요청을 받을 때마다 서버에서 HTML을 그려서 전달하는 방식

• 컴퓨터를 24시간 켜놓고 항상 최신 상태를 유지하여 요청이오면 즉시 응답한다.

• 벡엔드에 데이터를 요청해 데이터를 받아올 서버가 필요하며, 데이터를 받아서 화면을 그려내야하기 때문에 S3에 넣어놓을 수가 없다.

• 동적 라우팅으로 제작된 페이지는 일정한 주소 없이 항상 변경되기 때문에, 하나의 고정된 파일로 만들어 접근할 수 없다. 따라서 프론트엔드 서버를 운영하며 SSR방식을 통해 유저의 화면을 제공해야 한다.

SSG(Static Site Generator)

빌드 할 때 페이지별로 HTML을 생성하고 요청을 받을 때마다 미리 만들어둔 것으로 응답하는 방식

• html과 같은 정적파일을 미리 뽑아내 S3(simple storage service)에 저장해 놓는다.
• 정적 라우팅으로 제작된 페이지는 일정한 주소를 갖기 때문에 고정된 파일로 만들어 접근할 수 있다.

NEXT는 SSG 빌드와 SSR빌드를 모두 지원한다.

터미널에서 yarn build 명령어를 실행하면,
package.json 파일의 scripts 부분의 build가 실행되고, 빌드된 프로덕션 코드가 .next 폴더에 된다.