[원티드 프리온보딩 10월 Next.js] 사전 과제

CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.

CSR

JavaScript를 사용하여 브라우저에서 콘텐츠를 렌더링하는 것이다. HTML 문서 자체에서 모든 콘텐츠를 가져오는 대신 초기 로드에서 JavaScript 파일이 포함된 HTML 문서가 수신되어 브라우저를 사용하여 사이트의 나머지 부분을 렌더링한다.

 

장점

• 첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 경험(UX)이 좋다.
• 페이지에 필요한 부분만 변경하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.
• 서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없고 서버에게 요청하는 횟수가 훨씬 적어 서버의 부담이 덜하다.

단점

• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(SEO)의 문제가 있다.
• 모든 스크립트 파일이 로드 될때까지 기다려야하기 때문에 초기 페이지 로드가 느리다.

 

CSR을 사용하기 좋은 경우

• 애플리케이션에 많은 페이지/기능이 있고, 매우 복잡한 UI가 있는 경우
• 애플리케이션이 크고 동적 데이터가 있는 경우
• 이용자 수가 엄청 많은 경우

 

SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.

SSR

전통적인 웹 어플리케이션 렌더링 방식(MPA)으로 브라우저가 페이지를 요청할 때마다 해당 페이지에 관련된 HTML, CSS, JS 파일 및 데이터를 받아와서 렌더링을 시킨다. 사용자가 페이지의 링크를 클릭하면 브라우저가 서버에 요청을 보내고 전체 프로세스가 서버에서 다시 수행된다.

 

장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
• 검색엔진 최적화가 가능하다.
• 정적 사이트에 적합하다.

단점

• 빈번한 서버 요청으로 서버의 부하가 커진다.
• 전체를 로딩하다보니 전반적으로 페이지 렌더링이 느리다.
• 모든 요청에 관해 필요한 부분만 수정하는 것이 아닌 전체 페이지가 새로고침 되어 사용자 경험이 좋지 않다.

CSR을 사용하기 좋은 경우

• 애플리케이션에 페이지/기능이 적고, 매우 단순한 UI를 가지고 있는 경우
• 애플리케이션에 동적 데이터가 적은 경우
• 복잡한 사이트가 아니고 사용자가 적은 경우

 

필요한 이유

공식 홈페이지와 같이 일반 사용자에게 검색되어야 하는 사이트라면 SEO 때문에 SSR에 대해 생각하게 된다. 구글은 크롤러 안에 자바스크립트 엔진이 들어있어서 크게 문제될게 없지만, 네이버나 다음은 자바스크립트를 해석할 수 있는 엔진이 없어서 빈 페이지로 인식하기 때문이다. 그래서 SPA는 CSR으로 SEO 문제가 발생하기 때문에 SSR이 필요하다.

 

Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

yarn start

yarn start를 실행하니까 오류가 나서

yarn build
yarn start

하니까 잘 실행됐다! 😀

 

실행하면 보이는 터미널. next start가 실행됐다.

 

github 레포에서 실행되는 코드를 찾으라는데 어떻게 찾는지 모르겠어서 다른 분들의 블로그를 좀 봤다..

github 링크

https://github.com/vercel/next.js/blob/canary/packages/next/lib/commands.ts

 

start를 하면 5번째 줄이 실행되는 것 같다.

 

내 프로젝트에 node_modules에서 들어가보니 해당 스크립트 실행할때 코드를 볼 수 있었다.

코드가 긴데... 무슨 말인지.. 모르겠다....🥲 알겠는건 터미널 콘솔에 메세지를 띄워준다...

 

 

사전과제를 이제하다니.. 반성.....