원티드 프리온보딩 챌린지 사전 과제 (CSR / SSR with Next.js)

원티드 프리온보딩 챌린지 10월 (CSR / SSR with Next.js)

https://www.wanted.co.kr/events/pre_challenge_fe_3

프리온보딩 프론트엔드 챌린지 3차 | 원티드

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

---

🔎CSR (Client Side Rendering)

• 모든것을 클라이언트가 처리 하는것
• HTML은 빈 파일이고, 소스코드가 담겨있는 JS와 필요한 데이터인 JSON을 다운받아와서 화면에 그려준다. (사이트의 요소들을 직접 렌더링)
• 단점
  • 페이지 로딩이 오래걸린다.
  • 동적 렌더링이라 SEO가 좋지않다.
  • 규모 있는 사이트라면 로딩 속도가 느려진다.
• 장점
  • 필요한 부분만 부분적으로 렌더링 가능

 

 

 

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

---

🔎SPA (Single Page Application)

• 사용자가 한 페이지에 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로만 업데이트
• 하나의 어플리케이션을 사용하듯 사용성이 좋아짐
• SPA 트렌드 + 사용자들의 PC성능 향상 + JS 표준화 + 강력한 커뮤니티 바탕으로
  • Angular, Vue, React 등 CSR 프레임워크가 개발되어 CSR의 시대로 접어듬!

🔎SSR (Server Side Rendering)

• 이미 만들어져 있는 HTML 파일을 클라이언트에게 넘겨준다.
• 장점
  • **페이지 로딩이 빨라진다.**
  • **이미 데이터가 있으므로 SEO가 CSR보다 좋다.**
• 단점
  • 새로고침이 일어날때마다 전체적인 웹 사이트를 서버에서 다시 새로 받아와야한다.
  • 서버에 과부하가 생길 수 있다.
  •  
• nextJS에서 SSR 모드를 사용하려면 별도의 서버가 돌아가야한다.
• 서버에서 페이지의 요소들 중 바로 나타나야 하는 것들을 지정하여서 서버에 미리 업로드 한다.
• 이렇게 하면 첫 로딩은 빠르게 + CSR의 장점을 살리는 코드 작성이 가능하다.

 

 

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

---

pages/_app.js가 실행

import '../styles/globals.css'

function MyApp({Component, pageProps}) {
	return <Component {...pageProps}
}

export default MyApp

• `_app`은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할
• 이후 `_document.js`가 실행되어 _app.js에서 구성한 html이 어떤 형태로 들어갈지 구성

 

 

Reference

https://heokknkn.tistory.com/29

https://merrily-code.tistory.com/154

https://velog.io/@kjh1551/SPA-SEO-SSR-CSR-TTV-TTI-nextJS#seo-search-engine-optimization

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/