📌 CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 필요한 부분만 서버로부터 받아 클라이언트 내(브라우저)에서 렌더링 하는 것
✏️ 장점
- 저렴한 비용: 웹서버가 필요하지 않아 유지 비용을 절감할 수 있다. Content Delivery Network(CDN)이나 Amazon S3와 같은 정적 파일 호스트로 앱/웹을 유지할 수 있다.
- 빠른 인터렉션: view 렌더링을 브라우저가 하므로 서버 트래픽을 감소시키고 사용자에게 빠른 인터렉션을 제공한다. 새로고침이 발생하지 않기 때문에 네이티브 앱과 비슷한 경험을 할 수 있다.
✏️ 단점
-
첫 페이지 로딩 속도: 서버에 첫 페이지 로딩 요청 시, 전체 페이지에 대한 모든 문서 파일을 받기에 Server Side Rendering(SSR) 보다 로딩 속도가 느리다.
-
검색엔진최적화(SEO) 추가 작업 필요: 검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생 할 수 있다. 구글 검색엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 네이버 또는 다음의 경우 검색엔진이 제대로 크롤링하지 못하지 때문에 별도의 보완작업이 필요하다.
📌 SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
SPA 단점을 보완하기 위해서
1) SEO 최적화
- 서버에서 렌더링 된 페이지를 사용하면 검색 엔진 크롤러가 웹 페이지의 콘텐츠와 메타 태그를 쉽게 읽을 수 있기 때문에 웹사이트의 검색 엔진 순위를 향상 시킬 수 있다.
2) 초기 로딩 시간 개선
- 서버측 렌더링된 애플리케이션은 동등한 클라이언트측 렌더링된 애플리케이션보다 빠르게 로드된다. 또한, 서버가 무거운 작업을 처리하기 때문에 성능이 낮은 장치에서도 빠르게 로드 된다.
📌 Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
Next.js 프로젝트에서 yarn start / npm run start 스크립트를 실행하면 아래 에러 메시지가 나온다.
Error: Could not find a production build실행되는 코드가 아니라 에러 메시지여서 Next.js Github 레포지토리에서 찾아보니 https://github.com/vercel/next.js/blob/canary/errors/production-start-no-build-id.md 이렇게 나온다. 뭔가 잘못 된 것인가... 잘 모르겠다.
구글해보니 stack overflow에 아래와 같이 나온다. 3번에서 요구하는 파일이 이거인지 모르겠다.
In Next.js, next dev is used to run the app in development mode. On the other hand, next start is used to run the app in production mode, but requires next build to be run first to generate an optimized production build.
