서버사이드 렌더링

Next.js 프레임워크

✔️ Next.js 프레임워크가 무엇이고 동작 원리 및 페이지 역할에 대해 살펴보자 Next.js란?https://nextjs.org/Vercel에서 만든 풀 스택 웹 어플리케이션 구축 프레임워크페이스북 팀에서 만든 react-page라는 리액트 기반 서버 사이드 렌더링 프로젝트 → 여기서 영감을 받음라이브러리가 아니다서버 사이드 렌더링의 원리(스텝)해당 페이지에서 필요한 모든 데이터가 서버로 fetch된다 (A)서버는 이 HTML을 렌더링을 한다 (B)B에서 만든 HTML과 CSS, JavaSCript가 클라이언트로 보내지게 된다 (C)인터랙션이 없는 UI가 HTML과 CSS에 의해서 보여지게 된다마지막으로, React는 Hydration이라는 과정을 통해서 인터랙션을 브라우저 화면에서 적용을 시켜준다..

[Web] SSR (서버사이드 렌더링) vs CSR (클라이언트 사이드 렌더링)

우선 렌더링이 뭘까? 서버로부터 받은 내용을 브라우저 화면에 표시 하는 것 렌더링의 과정 Loader 가 서버로 부터 정보들을 불러옴 파싱을 통해 문서를 DOM 트리로 만든다. DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축 CSS 설정/레이아웃 위치 지정 렌더링 트리가 그려짐 이렇게 렌더링 받은 페이지를 어떻게 보여줄까? MPA vs SPA MPA (Multi Page Application)의 약자로 여러 페이지로 구성된 웹 어플리케이션. 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로은 html을 받아와 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SPA (Single Page Application)의 약자로 하나의 페이지로 구성된 웹 어플..