Next.js

Next.js

Next.js는 리액트를 기반으로 만들어진 프레임워크이다. 기능이 더 추가 되었지만 프레임워크다 보니까 자유도는 떨어졌다.

그리고 서버 사이드 렌더링(SSR)을 사용한다.

 

전통적인 SSR

이런식으로 요청을 한다. 이런 방법도 비교적 간단한 방법이다.

 

-단점

사용자는 방문 할 페이지가 1개인데 다른 페이지도 주면 낭비가 될 수 있다.

=> 코드 스플리팅을 하면 모든 페이지를 불러오지 않아도 되기 때문에 위에서 말한 단점을 해결할 수 있다.

Pre-Rendering

프리 랜더링은 검색 엔진이라는 것을 알아차리고 검색 엔진일때만 백엔드 서버에서 데이터를 받아서 html을 완성해서 준다.

일반 유저에서는 리액트 방식처럼 준다.

Sever Side Rendering

첫 방문만 전통적인 방식으로 불러온다. 그리고 페이지 전환을 할 때는 리액트 방식으로 하는 하이브리드 같은 방식이다. 첫 방문 후 다른 페이지에 들어갈 때는 브라우저가 백엔드에서 데이터만 받아온다. 만약 다른 페이지의 링크가 있으면 같이 받아오고 캐싱해준다.

그렇기에 SSR과 코드 스플리팅을 진짜 단순한 사이트가 아니고서는 반드시 적용해야 한다.

검색 엔진에 나오고 싶으면 ssr를 하는 것이 좋다!

 

-Next.js를 굳이 사용하지 않아도 될 경우

예시로 admin 사이트를 만들 때는 굳이 사용하지 않아도 된다. 왜냐하면 검색 엔진에 나올일도 없고 관리자들은 좀 느리지만 고객들의 반응 속도에는 상관이 없기 때문이다. 따라서 admin 사이트를 만들 때는 그냥 리액트만 사용해도 된다.

리액트에서의 방식(CSR, Clinet Side Rendering)

리액트는 SPA 방식을 사용한다. 따라서 다른 페이지로 넘어가게 보이는 것은 눈 속임일 뿐이다. 

 

-과정

1. 브라우저가 /blog를 요청

2. 프론트 서버에서 하나의 js, html, css, img 파일을 브라우저에 넘겨준다.(넘겨주는 파일에는 데이터가 없다.)

3. 결국 브라우저에서 화면은 그려주는데 데이터가 없다. 그렇기에 프론트 개발자는 로딩창을 띄워야한다.

4. 그 동안 브라우저는 프론트 말고 바로 백엔드 서버에 데이터를 요청하고 DB에서 받아와 데이터를 그려준다.

 

=> 결국 브라우저는 프론트에서 데이터 없는 화면만 먼저 받고 데이터는 백엔드에서 직접 받아온다.(ssr과의 가장 큰 차이점) 이렇게하면 로딩 속도가 빨라진다.

 

-장점

화면 전체가 한방에 그려진다.

 

-단점

하지만 반방에 그리는 과정이 길기 때문에 로딩 속도가 많이 걸림(이를 해결하기 위해 로딩창을 띄워야 함)

• 사용하는 이유

SPA 방식은 모든 페이지를 불러와야해서 전통적인 방식과 시간은 비슷할 수도 있다. 그럼에도 사용하는 이유는 화면에 뭐라도 보이기 때문이다.(로딩창이라고 보이면 사용자들이 인내심이 생김)