[TIL] 211021

 

✅ 무엇을 공부했는지

- CSR, SSR, TTV, TTI, SSG

 

✅ 공부한 것에 대한 짧막한 요약

 

클라이언트사이드 렌더링 :

웹 사이트 접속시 우선 빈 html 파일을 클라에 불러오고 그 후에 동적인 js 와 같은 프레임워크, 라이브러리를 불러온다. 

장점 : TTV 와 TTI 가 불일치할 일이 없다.

단점 : 검색엔진최적화가 최악이다. 빈화면만 최초에 보내지기 때문에 검색엔진에 걸러지게 된다. 또한 최초 로딩이 엄청 길수도....

 

서버사이드 렌더링 :

웹 사이트 접속시 필요한 데이터들을 모두 가져와 html 파일을 생성하게 되고, 이렇게 만들어진 html 파일을 동적으로 제어할 수 있는 소스 코드를 클라이언트에 보내주게 된다. 

장점 : 최초 로딩이 빠르다, 검색엔진최적화에 좋다

단점 : TTV 와 TTI 의 불협화음으로 사용자가 클릭같은 동적인 행동을 하게 되면 먹통일때도 있다. 또한 서버 과부화에 걸릴수도...

 

각각 단점이 있기 때문에 라이브러리를 섞어서 쓰면서 두 단점을 보완해 나가는 경우가 있다.

예 ) react + next.js 

 

 

✅ 공부한 것에 대한 느낀점

- next 를 리액트에 사용해보면서 서버사이드 렌더링이 검색엔진최적화에 좋다는 것만 알고 사용했지, 자세하게 왜 좋은지. 클라이언트 사이드 렌더링과는 무엇이 다른지 잘 모르는 상태였다. 그러나 이제 확실히 차이점을 알게 되었고, 두 가지 방식의 장점과 단점을 알게 되었다. next.js 도 왜 사용하는지 이제 이해가 간다. 빡공 하자!