REACT를 공부하고 있는 이 시점에서 Next.js를 왜 배워야 하는지 알아보자.
사용자가 3초 이내에 화면이 보이지 않으면 떠난다고 할 정도로 속도가 중요한 시대이다.
그렇다면 3초 이내에 화면을 그려주는 것이 중요하다는 말이다.
화면이 보이기 시작하면 어느정도 사용자가 인내심이 늘어난다. 적어도 로딩창이라도 있다면 기다리는 시간을 더 갖게 해줄 수 있을텐데 화면이 아예 보이지 않는다면 바로 사용자는 나가게 될 것이다.
Next.js를 알아보기 이전에 먼저 전통적인 웹사이트의 요청방식과 리액트에서 사용하는 요청방식이 어떤것이 다른지 알아보자.
1. 전통적인 웹사이트요청방식 VS 리액트,뷰,앵귤러 요청방식
전통적인 웹사이트에서는 브라우저에서 어떤 페이지를 달라고 요청하면, 프런트서버에서 백엔드 서버로 데이터를 달라고 요청한다. 백엔드서버에서 데이터 베이스를 받아와서 프런트서버로 보내주고 프런트 서버에서는 HTML과 데이터를 합쳐서 브라우저로 보내준다
- 전통적인 엡사이트 요청방식의 특징
- 한번에 그려진다는 장점이 있지만, 과정이 길기 때문에 로딩이 오래 걸린다.
2. 리액트 뷰 앵귤러의 요청방식
리액트나 뷰 앵귤러와 같은 거는 먼저 DATA 없이 화면만 구성된 페이지를 먼저 받는다. 그리고 DATA는 LOADING창 돌아가는 중에 , 백엔드 서버에서 직접 받아온다. 이것이 가장 큰 차이점이다. 싱글페이지는 딱 한 번만 받아오고 데이터는 계속 바꿔서 백엔드에서 직접 받아오는 것이다. (그림의 숫자로 하나씩 그려나가면 좀더 쉽게 이해할 수 있을것이다. )
- 리액트 , 뷰 , 앵귤러등의 요청방식
- 사용자에게 화면이 먼저 보이기 때문에 기다리는 시간을 사용자가 느끼지 않게 할 수 있다.
리액트를 사용할 때는 사용자가 빠르게 인테렉션을 필요로 할 때이다. 그래도 단점이 있다는 걸 잊지 말라.
- next를 사용하지 않아도 되는 것은?
- 코드스플링도 필요없고, 서버 사이드렌더링도 필요없는 곳 : admin(관리자페이지) * 단, B2B같은 프로젝트의 admin 페이지라면 고려해보는것도 좋다.
구글의 검색엔진은 똑똑해서 화면이 로딩페이지여도 ' 아 로딩하는데 시간이 필요하구나 '하고 생각하는데, 국내 검색엔진은 로딩페이지만 뜨면 '아 이 페이지가 미완성이구나' 하고 검색엔진 순위에서 떨어뜨린다.
그리고 첫 페이지에 검색엔진이 방문을 했을 때, 보이는 게 로딩창 밖에 없다? 그러면 검색엔진은 로딩창만 보고 나가버리는 꼴이다. 그래서 여기서 해결법이 2가지가 있다. 이 두 가지는 실무 할 때는 반드시 적용을 시켜야 한다(서버사이드 렌더링, 코드스플리팅)
1. 서버사이드 렌더링 Server-side Rendering
1-1 프리렌더
Next.js에선 기본적으로 모든 페이지를 프리 렌더링한다. 즉 HTML이 클라이언트 사이드에서 자바스크립트를 통해 생성이 되는 게 아니라 Next.js가 사전에 각 페이지를 만들어 놓는다. 이때 각 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 결합되어 있다. 페이지가 브라우저에 의해 로드될 때는 hydration이라는 프로세스를 거치게 된다. hydration은 자바스크립트 코드가 실행되어 해당 페이지를 완전히 인터렉티브 하게 만드는 것을 의미한다.
프리 렌더링을 할 경우, 프리 렌더링을 하지 않을 때보다 더 나은 성능과 SEO를 갖출 수 있다.
*Next.js는 프리 렌더링 및 서버사이드 렌더링을 포함한 페이지 렌더링을 위한 런타임으로 Node.js를 사용한다. 서버 사이드 렌더링과는 다르게 빌드 시점에 이미 만들어진 페이지를 전송하는 방식이다. webpack의prerender-loader를 사용할 수 있다.
1-2 서버사이드 렌더
SPA 사이트에서 사용자에게 필요한 정보를 빠르게 보여주기 위해서 사용하는 기술이다. 서버 사이드 렌더링은 사용자의 요청이 오면 서버 측에서 페이지를 생성하고 전송하는 방식이다.
(클라이언트 사이드 렌더링(CSR)의 경우 초기에 javascript를 로드하는데 시간이 걸리기 때문에 초기 렌더링 시간이 SSR에 비해 오래 걸리는 단점이 있다.)
2. (필요 한 페이지만 불로 올 수 있게) 코드 스플리팅 : 싱글페이지 어플리케이션의 단점은 필요하진 않은 페이지의 로직을 전부 불러와 용량도 커지고 로딩속도가 지연된다. 그러나 이에 대처할 수 있는것이 코드 스플리팅이다.