Next.js를 공부하기 전에, 왜 Next.js를 사용할까를 찾아보니 가장 큰 이유로는 SEO에 있었다.
SEO(Search Engine Optimization)란?
검색엔진최적화 라고 불리는 SEO는 웹사이트와 웹페이지를 검색엔진이 쉽게 발견하고 읽어서 상위 노출 시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해서 웹사이트의 구조나 콘텐츠를 개선하는 작업을 말한다.
SEO가 왜 필요할까?
가장 큰 이유를 뽑자면 광고비절감이다.
우리가 네이버나 구글에 검색을 했다고 생각해보자. 이때 대부분의 사람들은 상위에 보이는 검색 결과에 들어갈 확율이 높을 수 밖에 없는게 당연할 거라고 생각한다. 그리고 상위에 노출되는 것들 중에는 비용을 들여 상위에 노출되게 하는 경우도 많다. 이때 광고비로 나가는 비용이 상당히 높을 것이다. 이때 SEO를 잘 해두었다면 광고를 굳이 하지 않더라도, 상위에 노출되게 할 수 있게 되는 거라고 생각한다!그렇다면 SEO와 Next.js는 무슨 연관이 있는 걸까? 그건 바로 브라우저 렌더링 방식에 있다.
React.js는 CSR방식으로 렌더링하고, Nest.js는 SSR방식으로 렌더링 한다.
- 브라우저 렌더링이란?
HTML, CSS, Javascript로 작성된 문서들을 파싱하여 브라우저에 출력하는 것을 말한다.
Client Side Rendering은 주로 SPA(Single Page Application)에서 주로 사용하는 방식의 렌더링이다.
최초에 브라우저가 렌더링 될때 필요한 모든 파일들을 가져와 사용한다고 보면 된다.
출처 : The Benefits of Server Side Rendering Over Client Side Renderin
- 사용자가 브라우저에 접속하면, 클라이언트는 서버에 요청을 합니다.
- 서버는 javascript 정보가 들어있는 빈 페이지를 클라이언트에게 전달합니다.
- 클라이언트는 javascript파일을 다운로드하고, 다운로드가 끝나면 React.js를 실행시킵니다.
- 브라우저에서 실행된 React코드를 기반으로 화면을 렌더링하고, 기능도 동작되게 됩니다.
Server Side Rendering은 주로 MPA(Multiple Page Application)에서 주로 사용하는 방식의 렌더링이다.
페이지를 요청할때 마다 서버와 통신하여 필요한 것들을 받아와서 렌더링 하는 방식이다.
출처 : The Benefits of Server Side Rendering Over Client Side Renderin
- 사용자가 브라우저에 접속하면, 클라이언트는 서버에 요청을하고 서버는 렌더링 준비가 된 HTML파일을 브라우저에 보내줍니다.
- 브라우저는 서버에서 받은 HTML파일을 렌더링을 해주고 javascript파일을 다운로드 합니다.
- 클라이언트는 javascript파일 다운로드가 끝나면 React.js를 실행시킵니다.
- 페이지의 기능도 동작하게 됩니다.
사실 어떻게 마무리를 해야할지 모르겠다!
정리하자면 Next.js는 SEO최적화를 위해 사용하는 이유가 가장 큰데, 찾아본 결과에 의하면
검색엔진이 발달한다면 CSR방식도 충분히 SEO가 가능하기 때문에 이제는 무조건 SEO때문에 Next.js를 사용하지는 않을 것 같다.
그 부분은 Next.js를 공부 하면서 알아봐야겠다!!