🤷♀️ Next.js ?
react에서 SSR(Server Side Rendering)을 가능하게 하는 react 프레임워크
Next.js 공식문서 중 Data Fetching Overview를 가져와보았다.
Data fetching in Next.js allows you to render your content in different ways, depending on your application's use case. These include pre-rendering with
Server-side Rendering
or
Static Generation
, and updating or creating content at runtime with
Incremental Static Regeneration
Next.js에서 Data 가져오기를 사용하면 애플리케이션의 사용 사례에 따라 다양한 방식으로 렌더링이 가능하다고 한다.
SSR, SSG, SCR 등의 방법을 다양하게 이용해서 렌더링이 가능하다.
🏃♀️ 알아보기
SPA( Single Page Application )?
SSR을 알기 위해서는 SPA에 대한 이해가 필요하다.
SPA는 사용자가 요청을 보내고 응답을 받을 때 쓸대없는 relode가 발생하지 않게 한다.
react를 사용해본 분들이라면 직관적으로 SPA를 이해할 수 있을 것이다.
요청과 응답 사이에서 변화가 발생했을 때 전체를 다시 로드하지 않고 필요한 부분만 리렌더링하는 것이 SPA의 큰 특징이다.
장점
렌더링이 한 번 발생한 후 변화된 데이터를 관찰하기 때문에 서버 요청이 상대적으로 적다
사용자 친화적이다
SSG( Static Side Generation) ?
Static Generation, Static Rendering이라고도 불린다.
이 방식은 필요한 페이지들을 사전에 모두 준비했다가 요청을 받은 즉시 완성된 파일을 반환한다.
SSR( Server Side Rendering ) ?
이 방식은 서버에서 렌더링을 마치고,
HTML 안에 Data가 그려져서 등장한다.
그러나 새로운 페이지로 이동시마다 서버에 요청해서 Data를 받아야 하기 때문에 받는 시간동안 깜빡거리는 현상이 나타날 수 있다.
초기 요청 속도가 빠르다
페이지 간 이동시 깜빡거리는 현상이 나타난다
검색엔진 최적화 ( SEO )가 가능하다
CSR( Client Side Rendering ) ?
최초 요청 시점에 HTML, CSS, JS 등을 받아온다.
그 후 서버에 Data만 요청하고 자바스크립트로 화면을 컨트롤한다.
초기 요청 속도가 느리다 ( HTML이 비어있기 떄문에 )
페이지 간 이동이 매우 빠르다
검색엔진 최적화 ( SEO )가 어렵다
SEO( Search Engine Optimization )?
검색엔진 최적화.
검색엔진 봇은 JavaScript를 해석하기 어렵기 때문에 HTML을 읽게 된다.
SSR 방식 같은 경우는 HTML 안에 Data가 그려져서 등장하기 때문에 정보값 있는 HTML을 읽을 수 있지만
CSR 방식은 페이지 구성 전에 HTML에 아무것도 없기 때문에 수집할 수 있는 데이터 정보가 없어 검색엔진에 노출되기가 쉽지 않다.
🤷♀️ Next.js와의 관계
Next.js에서는 이 방식들을 조화롭게 사용한다. ( 하이브리드 )
따라서 페이지마다 다른 방식들을 사용하여 보여줄 수 있다.
예를 들어
첫 로드시에는 SEO를 위한 SSR / SSG 방식을 이용할 수 있고
- 정보가 자주 바뀜 : SSR
- 정보가 거의 바뀌지 않음 : SSG
이후 진행되는 로드 시에는 사용자들이 빠르게 화면을 확인할 수 있는 CSR 방식을 이용하면 된다
🙇♀️ 도움 받은 문서들
https://velog.io/@ru_bryunak/SPA-%EC%82%AC%EC%9A%A9%EC%97%90%EC%84%9C%EC%9D%98-SSR%EA%B3%BC-CSR
https://velog.io/@skypedanny/NextJS-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0
https://nextjs.org/docs/getting-started
https://velog.io/@altmshfkgudtjr/CSR-SSR-SSG-%EC%A1%B0%ED%99%94%EB%A5%BC-%EC%9D%B4%EB%A3%A8%EB%8B%A4
'✍ 공부 > NextJS' 카테고리의 다른 글
| [ TIL ] Next.js 동적 라우팅 ( Dynamic Routing ) (0) | 2022.03.19 |
|---|---|
| [ TIL ] Next.js redirects와 rewrites로 API key 숨기기 (0) | 2022.03.18 |
| Next.js에서 .env 사용하기 (2) | 2022.03.18 |
| [ TIL ] 노마드코더 NextJS #2.0 - #2.1 (0) | 2022.03.16 |
| [ NextJS ] styled jsx ( 노마드코더 NextJS ) (0) | 2022.03.15 |