빈 화면 없이 자연스럽게 데이터 갱신하여 SSR UX 개선하기
·
프론트엔드 기록/리액트
페이지 새로고침 시 빈화면이 나타남SSR 페이지를 개발했을때, 새로고침을 하면 전체 HTML이 없어졌다가 나타나는 현상을 발견했다. ssr 페이지라서 HTML을 모두 전달받고나서 화면을 뿌려주는 원리인건 알겠는데, 사용자 경험(UX)측면에서 무언가 별로였다. 별로야.  그래서 다른 서비스들은 ssr페이지를 새로고침하면 어떻게 처리되는지 레퍼런스들을 찾아봤다. 내가 개발 중인 페이지처럼 빈화면을 잠깐 보여주는 곳도 있었고, 로딩 스피너 UI를 나타내는 웹사이트들도 있었다. 로딩 스피너를 넣을까?처음엔 당연히 첫 화면에서에서는 스켈레톤 UI를 적용하는 것은 무의미하니, "로딩스피너 UI를 넣어야겠다"라고 생각했다. 그런데 여러 웹사이트들을 살펴보면서, 웹앱 형태로 제작된 사이트들은 로딩 스피터를 사용하는 것..
NextJS 서버 클라이언트 컴포넌트의 대한 고찰 및 전략
·
프론트엔드 기록/리액트
NextJS 13버전으로 업데이트가 되면서 굉장한 변화들이 있었는데, 그 중 가장 큰 변화라고 생각이 드는 것은 앱 디렉토리(app directory)의 등장이라고 생각이 듭니다. 앱 디렉토리의 이전과 이후를 모두 경험해본 입장에서는 이후가 개발자 경험이 향상되었다고 체감이 듭니다.  NextJS 서버 클라이언트와 클라이언트 컴포넌트의 이해nextjs에는 클라이언트 컴포넌트와 서버 컴포넌트가 있습니다. NextJS 13버전의 app 폴더안에 있는 모든 컴포넌트는 기본적으로 서버 컴포넌트입니다. 개인적인 생각으로는 이 두개의 컴포넌트를 이해하고 차이를 인식하고 개발하는 것이 정말 중요하다고 생각합니다. 들어가기에 앞서 간단하게 결론부터 말하자면클라이언트 컴포넌트는 사용자 상호작용을 처리하는데 중점을 두고 ..
ddhelop
'ssr' 태그의 글 목록