검색 엔진, 크롤러 (crawler), 봇 (bot)

사람이 웹사이트를 보는 것처럼, 봇도 페이지에 접속하여 HTML을 읽어간다. 봇은 HTML 응답만을 받아본다. 브라우저처럼 자바스크립트를 실행하지는 않는다. 최근의 일부 봇은 실행하는 경우도 있다고 한다.

SPA(CSR)는 JS로 화면을 만들기 때문에 봇이 내용을 읽어가지 못해 SEO에 불리하다.

SSR (Server-Side Rendering)

SPA 프레임워트에서도 SEO를 챙기기 위해 도입된 방식이다. 처음 화면만 서버에서 먼저 만들어준 HTML로 빠르게 보여주고, 나머지는 SPA처럼 동작한다.

Next.js의 SSR = 서버 컴포넌트 + 클라이언트 컴포넌트의 조합

• 유저가 블로그 첫 페이지 접속 → page.tsx (서버 컴포넌트) 가 HTML 생성

• 중간에 LikeButton.tsx 같은 클라이언트 컴포넌트 포함 → JS로 따로 번들링 돼서 전송

• 브라우저에선 서버에서 받은 HTML로 뷰를 보여주고, 클라이언트 컴포넌트는 CSR처럼 작동