안녕하세요 오늘은 Next.js에 무엇인지 배워보겠습니다! ╰(°▽°)╯
Next.js란?
Next.js는 react 라이브러리의 프레임워크입니다.
Next.js는 왜배우나요?
새로운 기술이 나오는 이유는 본래 쓰던 기술들의 단점을 보안하기 위해 나온다고 생각합니다.
그렇다면 본래 쓰던 react라이브러리의 단점은 무엇일까요?
리액트는 CSR을 사용합니다.
CSR은 좋지 않은 SEO, 느린 초기 렌더링이라는 단점을 가지고있습니다.
여기서 그 단점을 보안하기위해 SSR+CSR을 모두 쓸 수 있는 next.js라는 기술이 나온겁니다.
next.js는 SSR의 빠른 초기 렌더링과 좋은 SEO(검색 엔진),
CSR의 유연한 페이지 라우팅의 장점을 모두 가지고 있습니다.
SSR(Server Side Rendering)과 CSR(Client Side Rendering)에 대해서 짧게 얘기해보겠습니다.
1.SSR(Sever Side Rendering)
말 그대로 서버쪽에서 렌더링 준비를 끝내고 클라이언트에게 전달하는 방식입니다.
SSR의 동작 방식입니다.
1. 사용자가 구글에 접속합니다.
(Website에게 요청을 보냄)
2. 요청을 받은 서버는 바로 쓸수 있는 html파일을 줍니다.
3. 클라이언트는 현재 페이지의 html파일을 받고 html의 js파일을 다운받습니다.
4.렌더링 가능한 html을 받았기떄문에 바로 화면이 띄워지고 js가 다운되기전에는 js코드가 작동이 안되지만 다운받은후부터 사용자 조작이 가능합니다.
2.CSR(Client Side Rendering)
SSR과 달리 클라이언트쪽에서 렌더링을 담당합니다.
CSR의 동작 방식입니다.
1. 사용자가 구글에 접속합니다.
(Website에게 요청을 보냄)
2. 서버는 접근을 허용하며 빈 html파일을 클라이언트에게 넘겨줍니다.
3. 클라이언트는 html 안에 있는 js를 다운받습니다.
(react는 번들화를 하기떄문에 html안에 js를 다운받게 되면 모든 페이지의 html,js를 다운받게됩니다
그렇기 떄문에 초기렌더링이 오래걸립니다.)
4. 그후 페이지는 사용자 조작이 가능해집니다.
SSR의 장단점
장점
- SEO가 좋다
(서버에서 가져온 HTML파일을 보고 검색 엔진이 결과를 호출하기 떄문입니다.) - 초기렌더링이 빠르다
( 렌더링된 HTML을 서버에서 미리 가져오기 떄문에 필요한 부분의 JS만 다운받으면 되기떄문입니다)
단점
- 페이지를 요청할때 마다 새로고침이 됩니다.
(새로운 HTML ,JS를 전체적으로 다시 가져오기 떄문입니다.) - 페이지가 바뀔떄마다 서버에 요청을 해야해서 서버의 부하가 커집니다.
CSR의 장단점
장점
- 초기렌더링후에 부분적으로 가져오기떄문에 페이지 전환이 빠르다.
- 초기렌더링떄 한번에 모든 JS+HTML파일을 다운 받았기 떄문에 그후 요청 횟수가 적어져 서버 부담이 적다
단점
- SEO가 나쁘다 (처음에 서버가 빈HTML을 주기때문입니다)
- 초기렌더링이 느리다 (모든 HTML,JS파일을 다운받아야하기 떄문입니다)
Next.js의 동작방식
- 사용자가 구글에 접속한다
(Website에게 요청을 보낸다) - 초기렌더링은 SSR방식으로 서버가 미리 렌더링된 html파일을 클라이언트에게 보내고 클라이언트는 js를 다운받는다.
- 그후에는 CSR방식으로 전부 다운로드된 HTML,JS을 부분적으로 바꿔주면서 유연하게 페이지를 전환해준다.
Next.js의 장점
장점
- Next.js는 SEO 문제를 해결한다.
- Next.js는 SPA의 장점을 유지한다.
결론
- Next.js는 react라이브러리의 프레임워크다.
- Next.js의 초기렌더링은 SSR 그후는 CSR으로 작동한다.
마치며
어떤 기술을 공부하기전에 왜 배우는지부터 알아야한다는 생각에
정리해서 블로그 글을 올렸는데 아직 미숙한 부분이 많은거같아요
틀린 부분이나 부족한부분이 있다면 얘기해주시면 참고하겠습니다! ╰(°▽°)╯
