이론적에서 시작하기
wanted_pre_onboarding 3주차 첫 번째 학습내용은 SEO를 위해 SPA, CSR, SSR에 대한 특성을 파악하는 것이었다. 각각을 간단히 설명하자면 이렇다.
- SEO(SearchEngineOptimization) - 검색 최적화
웹 개발자의 첫 번째 목적은 웹페이지를 만드는 것! 하지만, 한 번더 생각해보면, 결국 회사의 상품이나 서비스를 노출시키기 위한 '수단'을 만드는 것이다. 그렇기 때문에 구글이나 네이버 등 검색엔진에서 웹 페이지가 더 잘 노출되게 하는 것은 궁극적인 의미에서 중요한 요소라고 할 수 있다. SEO는 회사의 매출과 큰 연관이 있기 때문에 React의 발전은 SEO중심으로 이뤄지는 듯하다.
SEO에 대한 나의 더 많은 생각은 다음 노션 링크를 참고하길 바랍니다.😉
웹 개발자는 웹 개발만 잘하면 될까?
-
SPA(SinglePageApplication)
다수 페이지로 구성되어있던 사이트의 단점은 페이지를 오갈 때마다 해당 페이지에 필요한 데이터를 서버로부터 받아야하는 것이다. 통신상태에 따라 매번 일정 기간의 대기가 필요할 수 있기때문에 유저에게 불쾌한 경험을 줄 수 있다. 이것을 개선하기 위해 SPA가 트랜드로 부상하였고, 우리가 배우는 React역시 대표적인 SPA다. SPA의 가장 큰 특징은 html, css, script 각 파일에 페이지 전체의 정보가 들어있다는 것이다. 이로써 유저가 처음 사이트를 방문한 시점에 모든 파일을 다운받고, 그 이후에 기능 작동은 서버와 통신 없이 script또는 React가 내부적으로 실행시키는 것이다. 그렇기 때문에 최초 데이터 통신이 잘 이루어졌다면, 그 이후에는 많은 기다림이 필요없다는 것이다. 통신에서 오는 기다림에서 해방될 수 있는 것이다! -
CSR(ClientSideRendering)
CSR은 서버와 통신 없이 JavaScript나 React 엔진에 의해 렌더링 하는 것을 말한다. 서버와 통신이 없기 때문에 통신이 최소화 되는 장점이 있지만, 데이터 전체를 받아야하기 때문에 최초 페이지 로딩시 렌더링이 비교적 느리다는 단점이 있다. -
SSR(ServerSideRendering)
SSR은 서버에서 미리 렌더링을 하고, 통신을 통해 그 결과를 전송해주는 것을 말한다. 유저가 특정 경로에 진입하면 그 경로에 필요한 렌더링을 서버에서 해준다. 서버에서 미리 렌더링을 했기 때문에
Next.js를 사용하는 이유
Next.js는 CRA의 단점을 보안하기 위해 탄생하였다. CRA는 간편한 초기 세팅으로 편한 React개발을 가능케 했지만, 유저가 사이트에 진입하기 이전에는 비어있는 html파일이기 때문에 SEO의 측면에서 너무나도 불리했다.
결국 SEO를 위해 탄생하였고, SSR이기 때문에 노출이 필요한 부분은 미리 구성해놓는 것이 가능하다. 경우에 따라 관리자 페이지나 정적 사이트의 경우는 기존 CRA로 가볍게 하는 것이 유리할 수 있다.
