✨ 리액트의 CSR(Client Side Rendering)
리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering) 방식
이런 CSR 방식의 경우 브라우저가 리액트 서버로부터 빈 html 파일을 전달받아서 빈 화면을 렌더링한 후 번들링된 JS파일을 전달 받고 실행하면, 클라이언트 사이드에서 실제로 리액트로 작성된 코드를 렌더링함으로써 화면이 나타나게 됨
=> 페이지 간 이동이 빠르다는 장점이 있는 동시에, 초기 페이지 로딩이 느리기 때문에 UX에 좋지 않고, 빈 html파일을 전달받는다는 점 때문에 SEO(검색 엔진 최적화)에 좋지 않다는 단점이 존재함
💡 SEO 검색 엔진 최적화 ?
보통 웹사이트는 크롤러라는 로봇이 웹사이트의 정보를 수집해서 어떤 사이트인지와 같은 정보를 차곡차곡 쌓아놨다가 사용자가 뭔가를 검색하면 연관성있다고 판단되는 사이트를 제공해주게 됨
이 때 단순히 첫번째 접속 요청시 전달받은 html의 내용을 보고 전달하는데 CSR 방식의 경우빈 html을 제공하므로 수집할 정보가 없어 정보를 저장하지 않고, 그렇게 되면 검색 노출이 안되므로 크게 불리함!
✨ Next.js의 프리렌더링
next.js는 리액트를 위해 다양한 기능을 제공하는 웹 개발 프레임워크로 아래와 같은 다양한 최적화 기능을 제공하는데
- 파일 시스템 기반의 라우팅
- 다양한 최적화 기능
- 프리렌더링
💡 프리렌더링(Pre-rendering)?
사전 렌더링이란 서버가 요청받은 페이지를 HTML로 직접 렌더링해서 응답하는 기술을 말함
이 중 Next.js 의 사전 렌더링 기능을 이용하면 서버에서 직접 렌더링을 완료한 HTML파일을 받아오기 때문에 정보를 포함하는 html 페이지를 크롤러에게 제공하게 되고 SEO에 훨씬 유리해짐
=> 리액트의 CSR 방식으로 인한 단점을 보완할 수 있으므로 함께 사용하면 좋다
Next.js의 SSR
기본적으로 넥스트는 SSR, SSG, ISR이라는 세 가지 버전의 프리렌더링을 제공하는데 그 중 SSR(서버 사이드 렌더링)은 서버 측에서 페이지를 직접 렌더링하는 방식을 말한다
브라우저로 부터 요청을 받을 때 마다 렌더링한다는 특징이 있음
💡 Next.js의 SSR 과정
- 먼저 브라우저에서 서버 단으로 페이지 요청을 보냄
- 서버는 요청을 받으면 페이지에 필요한 데이터를 불러와 사전 렌더링 후 html을 반환함
- 그러면 브라우저는 사전 렌더링이 완료된 페이지(반환받은 html)를 화면에 렌더링함
- 리액트로 작성한 자바스크립트 번들 파일을 후속으로 전달한 후 javascript 와 html을 연결해주는데 이 때 이 과정을 메마른 HTML 요소들에 마치 물을 뿌려주듯이 JS 코드들을 연결해 줘서 동작할 수 있도록 하는 과정이라고 해서 hydration(수화) 라고 함
(hydration이 이루어지기 전까지는 html 파일 하나만 받은 상황이므로 아직 인터렉션이 안되고 hydration을 거쳐야 인터렉션이 발생할 수 있음!)
