이번 포트폴리오 작업을 할 때 저번 작업에서 겪었던 문제를 고려해야 했다. 크게 2가지가 있었다.
1. react에서 이미지가 많은 작업일 경우 처음 불러오는 데 시간이 걸린다는 점
2. 열심히 작업물을 만들어도 구글에서 검색이 잘 안된다는 점
그래서 빠르게 이미지를 로딩하면서, 페이지 전환도 빨라야 하고, 내 포트폴리오를 누군가 검색해서 봤으면 하는 바람이 있었다. 이걸 해결해 줄 기술은 없을까? 생각하다가 찾게 된 기술이 Next.js다.
결론부터 말하자면 ‘나는 정적 페이지를 작업할 것이고, 처음 방문했을 때 빠르게 로딩이 되면서, 검색이 됐으면 좋겠다!‘때문에 쓰게 되었다. 아래는 react.js와 next.js 기능적으로 뭐가 다른거야?를 적었다.
Next.js는 말로는 엄청 많이 들어봤지만 실제로 활용하는 것은 이번이 처음이다.
Next.js의 장점은 검색만 해도 수천 가지 글이 나오지만 여기서도 정리하자면
CSR의 단점을 보완한 SSR방식을 활용한다는 것이다.
CSR과 SSR
CSR(Client Side Rendering)
CSR은 최초로 한 번 HTML,JS 등을 다 받아와서 로딩한다. 그리고 클라이언트의 요청이
있을 때마다 자원을 서버에 전달하고 클라이언트가 해석 후 렌더링한다.
SPA 형식의 JS 라이브러리인 React, Vue의 방식이다.
SSR(Server Side Rendering)
신기하게도 이 방식은 전통적인 방식이다.
클라이언트가 서버에 요청하고 서버가 클라이언트에 응답한다.
이 과정이 반복되면서 페이지가 전체적으로 렌더링 되기 때문에 느리다.
SSR -> CSR -> SSR
“맥북도, 아이폰도 메트로를 따라간다지만 기술도 과거로 회귀하는 건가? “
라고 생각할 수도 있지만 CSR의 단점을 SSR로 메꾼다고 해석하고 있다.
구동 방식
SSR과 CSR이 구동되는 방식을 적어보자면,
SSR
1. 서버에서 완성된 index.html를 받아온다.
2. 동적 제어가 가능한 JS는 받아오지 않는다. (이 순간에는 한마디로 작동 불가)
3. JS 파일을 서버에서 받아온다.
이 순간에서 웹 브라우저와 작용을 할 수 있다. 즉, 1번과 3번 사이에는 기능이 작동하지 않지만 사용자에겐
빠르게 view가 보인다.
CSR
1. 서버에서 빈 index.html를 받아온다.
2. 웹에서 필요한 로직이 있는 js를 요청하고 동적으로 생성할 수 있는 로직이 담긴 JS 파일을 받아온다. (app.js)
3. JS 파일을 서버에서 받아 돈다.
즉 CSR 방식에선 보여줌과 동시에 모든 기능이 작동된다.
두 방식의 차이를 봤을 때
이렇게 정리할 수 있을 것 같다.
이야기가 샜지만 위 점이 next.js를 쓰게 된 이유이다.
내 포트폴리오 사이트는 동적인 기능보다 상품 리스트같이 정적 페이지이다.
조금만 구동이 늦으면 인사담당자님이 “뭐야~”하고 홈페이지를 닫고 떨어트릴 거 같아 최대한 빠르게 보여준 것이 좋다. 그리고 내 포트폴리오 사이트가 검색돼서 지원하지 않았지만, 혹시나 연락이 오는 희망 때문이다.
열심히 만든들 뭐하나! 사람들이 찾아주지 않으면 잊히는 것을!
