코드 팩토리님의 영상을 개인 메모용으로 정리

랜더링 - 서버로부터 HTML파일을 받아 브라우저에 뿌려주는 과정

일반적인 홈페이지 열기

1. User가 www.naver.com 서버에 요청
2. 서버가 HTML을 보냄
3. 브라우저가 보여줌

서버가 유저에게 랜더링이 된 HTML을 보내줌 -> 이게 서버 사이드 랜더링의 기초

클라이언트 사이드 랜더링의 시초

1. 유저가 서버에게 API를 요청
2. 서버는 데이터를 JSON 형식으로 보내줌 (HTML데이터를 만들어서 보내주는게 아니라 JSON형식으로 보내줌 - ajax등)
3. jquery가 요청받은 JSON을 화면에게 랜더링 -> 편함
4. 그렇다면 jquery로 랜더링하는게 편하니 웹사이트 전체를 다 해버리는건 어떨까?
5. 그래서 시작이 된게 SPA(Single Page Application) ex) React,Vue,Angular

SPA

하나의 빈 페이지에서 javascript가 v-dom을 랜더링 하면서 여러가지 페이지를 네이네이션 하는 착각을 주게 함

그래서 Vue , React, Angular 를 SPA라고 불름

-> 결국에 자바스크립트가 코드가 클라이언트에서 랜더링을 하니깐 처음에는 Vue , React, Angular들은 CSR이였다.

CSR 의 장점

1. SSR보다 빠르고 효율적이였음 -> 필요한 화면의 부분만 업데이트 하기때문

CSR 의 단점

1. 첫 로딩이 느리다! -> 처음에 랜더링을 하게될 js파일(로직,라이브러리등 모든 코드)을 불러오기 때문
2. 페이지 캐싱이 잘 안된다. -> 화면을 클라이언트에서 랜더링하기 때문에 서버든 어디든 캐싱을 할 수가 없음
3. SEO(Search Engine Optimization)최적화가 잘 안됨 -> 네이버,구글 이런애들이 우리 사이트를 크롤링 해서 읽어야하는데 우리는 빈 블랭프 파일이기 때문에

SSR의 장점

1. 초기 랜더링 속도가 빠름.
2. SEO 최적화가 잘됨

SSR의 단점

1. 간단한 데이터 수정도 서버를 거침
2. 서버과부하 -> 서버가 HTML을 만드니깐

Isomorphic App(CSR , SSR의 장점을 모아둠) -> NEXT.js

Next.js를 사용하면 서버사이드랜더링을 REACT로 할 수 있음 -> 서버에서 HTML코드를 뱉어줌 (캐싱,SEO,첫로딩 해결)

참고 - 코드팩토리