React(리액트) vs Next.js(넥스트) 무엇을 써야하나요?

웹 개발을 하다 보면 한 번쯤 들어봤을 리액트(React)와 넥스트.js(Next.js)!

이 둘의 차이점 중 하나는 바로 렌더링 방식이야. 그럼 이 두 강력한 툴의 렌더링에 대해 알아볼까? 🔥

---

리액트: 클라이언트 사이드 렌더링(CSR)의 대표주자! 🌐

리액트는 클라이언트 사이드 렌더링(CSR)을 사용해. 여기서 "렌더링의 주체가 클라이언트"라는 말이 무슨 뜻이냐고? 쉽게 말해, 웹 브라우저에서 모든 걸 처리한다는 뜻이지.

• 리액트 렌더링 방식
  • 웹 브라우저에서 렌더링이 이루어짐
  • 페이지 소스를 보면 자바스크립트로 가득 찬 파일들만 보임
  • 검색엔진 최적화(SEO)에 불리할 수 있음 🤔

리액트 공식 홈페이지에 가서 페이지 소스를 보면, 실제 화면에 보이는 텍스트나 버튼 등이 HTML 소스에는 없고, 자바스크립트 파일로만 되어있는 걸 볼 수 있어. 그래서 검색엔진이 이런 파일들을 가져가면 비어있는 HTML 파일들만 보게 되는 거야. 결국, SEO( Search Engine Optimization)측면에서 약간의 불이익이 있을 수 있어.

---

넥스트.js: 서버 사이드 렌더링(SSR)의 최강자! 🖥️

넥스트.js는 서버 사이드 렌더링(SSR)을 사용해. 여기서 "렌더링의 주체가 서버"라는 말이 무슨 뜻이냐면, 서버에서 모든 것을 처리한 후 결과를 클라이언트에 보내준다는 뜻이야.

• 넥스트.js 렌더링 방식
  • 사용자가 페이지를 요청하면, 서버에서 HTML과 CSS, 자바스크립트를 모두 한 번에 보내줌
  • 가벼운 HTML을 먼저 렌더링하고, 나중에 자바스크립트를 다운로드 받아서 기능을 추가
  • 정적 페이지를 먼저 보여주고, 이후에 자바스크립트를 적용해 동적 기능을 제공함
  • SEO에 유리함 🏆

넥스트.js는 사용자가 index.html을 요청하면, HTML과 CSS, 자바스크립트를 모두 포함한 페이지를 보내줘. 그래서 첫 번째로 가벼운 HTML 페이지를 먼저 렌더링하고, 두 번째로 자바스크립트를 받아와서 적용하는 방식이야. 이렇게 하면 사용자에게 빠른 첫 화면을 보여줄 수 있고, SEO에도 훨씬 유리해.