본문 바로가기

렌더링

(2)
<FE> Next.js 13 으로 알아보는 FE 렌더링 방식 (SSR vs RSC) 1. 소개 FE 개발자라면 CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)이라는 용어는 매우 익숙할 것이다. 이번 포스팅에서는 이와 같은 렌더링 방식에 대해 다룰 예정이다. 최근에 Server Components가 Next.js 13의 출시와 함께 등장하면서 렌더링 방식이 획기적으로 변했기 때문에 지금까지의 렌더링 방식의 변화과정과 RSC(React Server Components)와 SSR을 Next.js를 통해 비교해볼 것이다. 결론부터 확인하고싶다면 "3.비교" 부분부터 봐도 좋다. * 렌더링 방식의 변화 비교적 최근 FE에서 자주 볼 수 있는 렌더링 방식의 변화과정이다. 리액트와 같은 도구의 등장으로 CSR(Client-Side Rendering)..
<네트워크> 페이지 렌더링 과정 1. 소개 - 지난 포스팅에서는 페이지 로딩 과정에 대해 알아보았다. 거기서 렌더링을 간단하게 짚어보았는데, 이번 포스팅에서는 그 부분에 대한 과정을 좀 더 자세히 알아보고자 한다. - 브라우저가 렌더링 하는 과정을 간단하게 미리 언급하자면, 먼저 html과 css를 처리하여 DOM트리와 CSSOM 트리를 빌드한다. 그리고 그 둘을 결합하여 렌더트리(렌더링트리)를 만들고, 각 레이아웃을 실행하여 형태를 계산한다. 마지막으로 그들을 그린다. 이제 이 과정을 세세하게 알아보자. 2. 과정 * DOM - 다운받은 html을 파싱하며 DOM트리를 만든다. - html을 파싱하는 것은 다음 일련의 과정을 거친다. ∙ Conversion : 바이트를 읽고 인코딩하여 문자열로 바꾸는 과정을 의미한다. ∙ Tokeni..