[원티드 7월 프리온보딩] 직접 만져보는 Next.js해부학 교실 - CSR / SSR with Next.js 후기 (with 오종택)

오종택 챌린지메이커님의 강의를 들을 수 있었다.

 

프리온보딩 커리큘럼은 사전과제와 총 4번의 강의가 있다.

 

사전과제

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

- CSR(Client Side Rendering)는 말그대로 클라이언트측에서 랜더링을 하는것.

- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트는 그것을 받아 랜더링을 시작한다.

- SPA(Single Page Application) : 단일 페이지로 구성된 애플리케이션 SPA는 CSR방식으로 랜더링하기 때문에 단 한번만 리소스(HTML, CSS, JS)를 로딩하고 이후엔 데이터를 받아올 때만 서버와 통신하고 기존페이지의 내부를 수정해서 보여준다.

 

2.

장점

- 빠른 랜더링 (첫 페이지 로딩시 나머지 부분을 구성하는 코드를 받아왔기 때문에 이후 로딩에선 빠르다. SSR의 경우 과정을 다시 실행하기 때문에 느림)

- 필요한 부분만 갱신하기 때문에 네이티브앱에 가까운 자연스러운 페이지 이동과 UX를 제공할 수 있다

- 서버와 템플릿 연산을 클라이언트로 분산시켜 서버부하감소 - 컴포넌트 별 개발에 용이해 동일한 API를 사용하도록 설계가 가능하다

- 웹앱의 경우 복합적인 UI디자인을 갖는다. 그 말인 즉슨 다양한 기능을 가진 페이지들로 구성되기 때문에 많은 양의 동적데이터가 필요하다. 이 때 SSR에 비해 월등한 속도를 가지게 된다

 

단점

- 느린 첫로딩

- 외부 프레임워크 라이브러리 필요

- 크롤러가 볼 컨텐츠가 미비해 SEO가 어렵다

- 일부 또는 전체 콘텐츠 미포함

- 프론트에 보이는 정보들이라 보안이슈가 생길 수 있다

 

이전에 써둔 포스팅을 한번 더 읽어보았다.

SSR? CSR? SEO?

 

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

- 클라이언트에 주는 부담을 줄일 수 있다. 

- CSR에서는 SEO 최적화가 어렵다는 문제가 있는데, SSR(Next.js)방식은 완성된 형태의 HTML파일을 서버로부터 전달받기때문에 SEO 검색엔진 크롤러가 랜더링된 페이지를 직접 볼 수 있어 크롤링에 적합하다. 

 

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

 

 

npm run dev로 실행하면 localhost:3000에서 아래와 같은 화면을 볼 수 있다.

 

 

 

npx create-next-app@latest

로 생성한 디렉토리 구조.

layout.tsx가 리액트 index.html이랑 app.jsx 가 섞여있는 기분이다.

그리고 page.tsx 가 있는데 뭔가 ejs랑 jsp느낌이 난다.

page.tsx를 보니 페이지 단위로 이렇게 만들어지는구나 라는게 보여서 SSR 이라는 느낌이 확 들었다.

 

 

 

강의후기

- 자바스크립트의 발전은 어떻게 웹을 바꾸었는가

- 프레임워크 없이 직접 React SSR을 구현하는 방법

- Next.js는 어떻게 React 개발 커뮤니티의 뉴노멀이 되었는가

- 미래로 가는 Next.js와 React, 우리는 어디로

 

 

인상깊었던것들

- 기지개펴자!

- 낙곱새 비조리포장과 조리포장이 완벽하게 CSR과 SSR 구조에 맞아 떨어졌다. 비조리는 CSR 조리는 SSR

- SSR과 SSG 차이는 SSR은 요청이 들어왔을 때 서버측에서 랜더링이 일어나지만 SSG는 개발을 완료하고 빌드하는 순간에 랜더링이 일어나서 SSG는 SSR보다 정보의 변화가 적은 사이트에 적합하다.

- csr은 빤스사이드랜더링... 일단 빤스만입고 나오는 경범죄친구..

- 동결건조 대파는 직렬화 수분보충 대파는 hydrate

 

강사님은 3강 4강이 찐이라 하셨지만 개인적으로 많은걸 배운거는 2강 3강이었던 것같다! 

1강때부터 친근하고 재밌게 수업해주셔서 진짜 어려웠는데,.. 4강까지 무사히 마쳤다.

 

매 강의마다 주셨던 과제는 결국 다 못해냈지만 ;-; 앞으로도 꾸준히 공부해서 3분기가 되기전에는 배포하는게 목적이다.

netlify랑 vercel 비교해서 둘중에 더 관리하기 편한걸로 배포까지 할 것!

 

매 수업마다 제공해주신 강의자료도 다시읽어봐도 어렵고 아직은 70퍼정도만 이해되지만.. 계속 들여다보다보면 익숙해지지 않을까 라는 기대를 가져본다.....

 

처음엔 타입스크립트도 Next.js도 몰랐지만 지금은 Next 12버전이랑 기본 타입정도는... 쓸 수 있..어!... 13버전까지 드가자