CSR/SSR (with Next.js)

원티드 프리온보딩 챌린지 10월 과제

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

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

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

- https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)

- https://github.com/vercel/next.js/ (Next.js Github 레포지토리)

 

 

CSR(Client-side Rendering)이란 ?

JavaScript를 사용하여 브라우저에서 페이지를 직접 렌더링하는 것을 의미한다.

즉, 모든 논리 로직과, 데이터 가져오기, 템플릿 및 라우팅이 서버가 아닌 클라이언트에서 처리되는 것이다.

 

CSR의 장단점

장점

- 초기 로드 후에는 SSR보다 웹 사이트 렌더링 속도가 빠르다.

   필요한 데이터만 요청하고 받아서 그 부분만 그려주기 때문이다.

- 페이지의 깜빡임이 없어 좀 더 나은 사용자 경험을 느끼게 할 수 있다.

 

사실 위 내용은 CSR의 장점이라기 보다는 SPA의 장점이다.

CSR만 놓고 봤을 때는 어떤게 장점인지 사실 잘 모르겠다. CSR이라는 개념을 통해 SPA가 나온것이 장점이려나..?

 

단점

- 애플리케이션이 커짐에 따라 필요한 JavaScript의 양이 증가해서 초기 구동이 느려질 수 있다.

- 데이터 리소스를 나중에 받아오기 때문에 SEO에 불리하다.

 

 

SPA에서 SSR이 필요한 이유는 무엇인가?

처음 요청시 리소스를 전부 불러오는 SPA는 프로젝트의 내용이 다양해지고, 커질수록 초기 구동이 느려진다.

 

이렇게 커진 서비스에서 만약 사용자가 공유받은 콘텐츠 URL에 직접 접근한다고 하면,

자신이 당장 보지 않을 페이지들에 필요한 리소스 때문에 흰 화면을 보고 있어야 할 수 있다.

 

그렇기 때문에 SSR로 초기 구동을 빠르게 하고,

초기 로딩이 된 페이지는 서버에 요청하지 않고 데이터만 요청하여 클라이언트에서 랜더링하도록

NextJs와 같은 React의 SSR 버전의 프레임 워크가 나오게 된 것이다.

 

그런데 여기서 또 SSG 라는 개념...이 나타났다고 함ㅠ.. 이건 나중에 더 공부하고... 정리해야지.

 

Next js Start 파일 뜯어보기

 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤,

해당 파일에 대한 간단한 설명 첨부하기

(개인적으로 yarn이 아닌 npm 을 사용했습니다.)

 

우선 start 명령어를 사용하기 위해서는 build를 통해 /.next 폴더가 생성되고, 그 안에 실행파일이 생겨야 한다.

이후, yarn start 또는 npm start를 하면 실행된다.

 

그런데, build하는 과정에서 에러가 발생했고, 글이 길어져서 따로 포스팅을 분리했다.

https://tistory.rooteun.com/97

[NodeJs] Exit status 3221225477 발생. 및 해결

 

Error 해결하다가 시간이 훅...

2일차 수업 이후에 뜯어보겠습니다 😢

 

2일차 과제 제출을 위해 사전과제를 잠시 뒤로 합니다...ㅎ

 

 

---

node_modules/next/dist/bin/cli/next-start.js 파일

 

 

 

 

참고글

https://web.dev/rendering-on-the-web/