본문 바로가기

SSR

(2)
[React] CSR에서 SSR로의 전환, react 18은 어떤 SSR을 하는가. 이 글은 react 18버전 도입 시기에 주요 기능이었던 ssr과 그것의 개선점에 대한 정리이다.글의 내용은 아래의 글을 정리한 것이다.(글의 초반에서 SSR의 필요성과 CSR의 한계점에 대한 내용은 필자 개인의 정리를 첨가했으며 이 부분에 대해 오류나 부족한 점이 있다면 말씀해주시면 감사하겠습니다)https://github.com/reactwg/react-18/discussions/37 New Suspense SSR Architecture in React 18 · reactwg react-18 · Discussion #37Overview React 18 will include architectural improvements to React server-side rendering (SSR) perform..
[nextJS] nextJS(page router)의 빌드 방식에 대해 알아보자.(pre-render, static, SSR, SSG) nextJS는 react를 기반으로 하는 풀스택 프레임워크다. nextJS는 react로 프로젝트를 만들 때 많이 사용하는 CRA(creat-react-app)과 어떤 차이가 있을까. 이 글은 여러 차이점 중에서도 빌드 방식에 대해 다루려고 한다. 1. react의 JSX 컴포넌트 react의 컴포넌트는 html이 아니라 javascript로 만들어진 결과물이다. 이런 컴포넌트는 서버단에서 생성되지 않고 클라이언트단에서 생성된다. (그래서 페이지 소스를 보면, html 요소가 존재하지 않는다.) 업계에서는 이런 방식을 CSR(Client-Side-Rendering)이라고 부른다. CSR은 아래와 같은 특징을 가지고 있다. 페이지가 로딩된 이후에는 유저와 상호작용이 빠르다. 특히 url를 변경하는 과정에서..