Next.js에 대해 공부하기 전에!

Hwang Tae Young·2022년 12월 16일
0
post-thumbnail

Next.js를 공부하기 전에, 왜 Next.js를 사용할까를 찾아보니 가장 큰 이유로는 SEO에 있었다.

SEO(Search Engine Optimization)란?

검색엔진최적화 라고 불리는 SEO는 웹사이트와 웹페이지를 검색엔진이 쉽게 발견하고 읽어서 상위 노출 시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해서 웹사이트의 구조나 콘텐츠를 개선하는 작업을 말한다.

SEO가 왜 필요할까?

가장 큰 이유를 뽑자면 광고비절감이다.
우리가 네이버나 구글에 검색을 했다고 생각해보자. 이때 대부분의 사람들은 상위에 보이는 검색 결과에 들어갈 확율이 높을 수 밖에 없는게 당연할 거라고 생각한다. 그리고 상위에 노출되는 것들 중에는 비용을 들여 상위에 노출되게 하는 경우도 많다. 이때 광고비로 나가는 비용이 상당히 높을 것이다. 이때 SEO를 잘 해두었다면 광고를 굳이 하지 않더라도, 상위에 노출되게 할 수 있게 되는 거라고 생각한다!

그렇다면 SEONext.js는 무슨 연관이 있는 걸까? 그건 바로 브라우저 렌더링 방식에 있다.


🎯 그래서 오늘 알아 볼 것은!

CSR(Client Side Rendering) & SSR(Server Side Rendering)

React.jsCSR방식으로 렌더링하고, Nest.jsSSR방식으로 렌더링 한다.

  • 브라우저 렌더링이란?
    HTML, CSS, Javascript로 작성된 문서들을 파싱하여 브라우저에 출력하는 것을 말한다.

✅ CSR(Client Side Rendering)이란?

Client Side Rendering은 주로 SPA(Single Page Application)에서 주로 사용하는 방식의 렌더링이다.
최초에 브라우저가 렌더링 될때 필요한 모든 파일들을 가져와 사용한다고 보면 된다.

✅ 렌더링 방식

출처 : The Benefits of Server Side Rendering Over Client Side Renderin

  1. 사용자가 브라우저에 접속하면, 클라이언트는 서버에 요청을 합니다.
  2. 서버는 javascript 정보가 들어있는 빈 페이지를 클라이언트에게 전달합니다.
  3. 클라이언트는 javascript파일을 다운로드하고, 다운로드가 끝나면 React.js를 실행시킵니다.
  4. 브라우저에서 실행된 React코드를 기반으로 화면을 렌더링하고, 기능도 동작되게 됩니다.

✅ 장점

  • 모든 요소를 가져와 렌더링을 하기 때문에, 초기 로딩만 끝난다면 이후 렌더링이 빠르고 페이지 이동시 화면 깜빡임과 같은 불편함은 최소화 되어있다.
  • 클라이언트에서 대부분을 처리하기 때문에, 서버에 요청할 것이 적다.

✅ 단점

  • 모든 JS 다운로드 후 브라우저 측에서 동적 DOM 생성한 뒤 렌더링이 완료되기 때문에 초기 로딩속도가 SSR에 비해 느리다.
    (code splitting을 사용해 어느정도 해결 할 수 있다.)
  • 웹 크롤러가 크롤링 할때, 렌더링이 완료된 시점이 아닌 빈뼈대 시점을 크롤링 하고, HTML정보가 있는 JavaScript을 실행하지 않기 때문에 검색엔진최적화(SEO)에 불리하다. 하지만 이와 같은 얘기가 나온 이유는, 많은 크롤러들이 JavaScript를 지원하지 않기 때문이라고 한다. 실제로 Google Bot(크롤러)은
    JavaScript를 지원하기 때문에 CSR로 만든 사이트들도 SEO잘 된다고 한다.
    출처 : 왜 CSR(Client Side Rendering)에서 SEO가 단점일까?



✅ SSR(Server Side Rendering)이란?

Server Side Rendering은 주로 MPA(Multiple Page Application)에서 주로 사용하는 방식의 렌더링이다.
페이지를 요청할때 마다 서버와 통신하여 필요한 것들을 받아와서 렌더링 하는 방식이다.

✅ 렌더링 방식

출처 : The Benefits of Server Side Rendering Over Client Side Renderin

  1. 사용자가 브라우저에 접속하면, 클라이언트는 서버에 요청을하고 서버는 렌더링 준비가 된 HTML파일을 브라우저에 보내줍니다.
  2. 브라우저는 서버에서 받은 HTML파일을 렌더링을 해주고 javascript파일을 다운로드 합니다.
  3. 클라이언트는 javascript파일 다운로드가 끝나면 React.js를 실행시킵니다.
  4. 페이지의 기능도 동작하게 됩니다.

✅ 장점

  • 페이지를 렌더링 해올 때, 그 페이지에 필요한 것들만 받아와 하기 때문에, 초기 로딩속도가 CSR에 비해 빠르다.
  • 웹 크롤러가 크롤링할 시점에, 서버에서 렌더링 가능한 HTML을 받기 때문에 SEO에 유리하다.

✅ 단점

  • 페이지를 이동할 때마다 필요한 것들을 렌더링 해오기 때문에, 페이지 이동시 새로고침 한 것 처럼 깜빡임이 있다.

✅ 마무리

사실 어떻게 마무리를 해야할지 모르겠다!
정리하자면 Next.jsSEO최적화를 위해 사용하는 이유가 가장 큰데, 찾아본 결과에 의하면
검색엔진이 발달한다면 CSR방식도 충분히 SEO가 가능하기 때문에 이제는 무조건 SEO때문에 Next.js를 사용하지는 않을 것 같다.
그 부분은 Next.js를 공부 하면서 알아봐야겠다!!

profile
더 나은 개발자가 되기 위해...☆

0개의 댓글