프론트엔드 개발

SSR과 hydration 고성능의 웹사이트를 만들기 위해서 우리는 Next.js의 수정버전을 사용할것이다. next는 기본적으로 SSR과 함께 성능 최적화 기능이 들어있다. next는 react를 다음과 같은 순서로 사용한다. 1. 서버에서 리액트 컴포넌트를 HTML string 형태로 렌더링한다. 2. 렌더링된 HTML을 클라이언트에게 보낸다. 3. javascript로 된 리액트 코드를 클라이언트에게 보낸다. 4. html을 리액트로 hydrate한다. next가 HTML 위에 돌돌 말려진 리액트 코드를 푸는것을 hydrate 라고 이해하면 된다. 그 후에 Next는 React에게 다음과 같이 말한다. hydration :: 미리 HTML을 로드해 두고 --> 페이지에 접근하게 되면 --> java..

앞서 CSR과 SSR을 비교해 보면서 정리해보면, 각 브라우저의 크롤러들이 해당 페이지에서 내용을 찾게 될 때, SEO적인 측면에서 SSR을 고려해볼 필요가 있다고 생각하였습니다. SEO 뿐만이 아니라 html을 먼저 뿌려주기 때문에, 유저가 처음 들어왔을 때, 빠르다고 느끼다고 생각할 수 있습니다. React에서, SSR을 적용하려면 몇 개의 프레임워크들이 있습니다. https://jthcast.dev/posts/gatsby-versus-nextjs/ 이글에서Gatsby와 Next.js의 차이를 알 수 있습니다. 저는 SSR과 SSG방법을 모두 사용 가능한 Next js를 선택하겠습니다. Next.js는 리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크입니다. Next js는 ..

CSR 동작 방식 처음에 웹서버에 요청할 때, 서버는 데이터가 없는 문서를 반환한다. HTML 및 static파일들이 로드되면서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다. Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering 한다. 필요에 따라 데이터를 서버에 요청해서 받아와 Rendring 한다. SSR 동작방식 서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식. SSR과..