Dev Blog

close Develoment Study Publish CS

squirrel309@naver.com

[Next] Next-Theme의 FOUC를 위한 의도된 불합리함

2024. 12. 08

15분 이내 소요

Comments

loading....

Phm_

@Front Developer

목차보기

본문 크기

100%

포스트 인사이트

관련 게시물

Next Suspense, Client, Server 각 환경에서의 동작원리?

Next.js :: SuspenseSuspense 바운더리는 React 18버전 공식 출시 이후 Concurrent Rendering 방식을 통해 도입된 기능이다. React에서 이 Suspense 바운더리는 비동기 함수의 상태를 받아 Suspense의 fallback을 반환하게 되고, 이후 상태가 성공하거나 실패하게 되면 자식 컴포넌트들을 렌더하게 된다.Next.js에서도 Suspense는 유용하게 쓰인다. 사실 클라이언트의 경우에는 SWR이나 RTK같은 라이브러리가 프로미스 상태에 따라 너무 좋은 인디케이터를 지원하기 때문에 클라이언트에서는 근래 잘 쓰이지 않는 추세다. 다만 Next.js의 서버 컴포넌트의 Suspense는 스트리밍을 도입함에 따라 서버에서도 인디케이터를 제공할 수 있어 더 유용하게 사용할 수 있다. 해당 포스팅은 클라이언트와 서버에서의 Suspense 실행을 복습하고 원리를 이해하는데 도움이 될 것이다.클라이언트 : SuspenseNext.js의 클라이언트 컴

Next.js 공부 어떻게 시작할까? 『한입 크기로 잘라 먹는 Next.js』

한입 크기로 잘라 먹는 Next.js프론트엔드에서 React를 다룬다면 이제 TypeScript와 함께 Next.js는 사실상 필수로 여겨지는 프레임워크다.Next는 React의 한계를 보완하고 성능을 극대화할 수 있는 강력한 도구다.나는 1년 전 Udemy에서 “한입 Next.js” 강의를 수강했고, 정환 님은 강의에 따라 학습을 완주목표로 챌린지를 진행하시는데 나는 “한입 챌린지 2기 - Next”에 참여한 경험이 있다.그때 수많은 개념과 실습을 통해 큰 성장을 했고, 지금도 그 경험은 내 개발 공부의 중요한 자산으로 남아 있다.그런 가운데 이번에 이정환 님의 Next.js 책 집필 소식을 듣게 되었고, 서평단에 선정되어 누구보다 먼저 책을 접할 기회를 얻었다. 단순히 복습이 아니라, 강의에서 배운 지식을 다시 구조적으로 정리하고 싶다는 기대감으로 책을 받아 보았다📌 본 포스팅은 강의 경험이 있는 상태에서 책을 접한 시점을 기준으로 서평하였다는 점 참고바란다.Udemy - 한입

Next.js에서 Soft, Hard Navigation

Navgation 방식?Soft & Hard Navigation 방식의 간단한 개념설명Hard Navigation 방식과 Soft 방식은 웹에서 페이지를 전환 시에 페이지를 전체 로드하는지,특정 컴포넌트만 재 랜더링 하는지의 차이를 가진 라우팅 방식이다.Hard의 경우는 전통적인 라우팅 방식으로 주소창에 새로운 url을 입력하는 것 처럼서버에서 페이지를 다시 생산하여 사용자에게 제공하는 라우팅 방식으로 페이지에 대한 모든 상태가 초기화되며최신 데이터를 직접 받아오기 때문에 특별한 설정을 하지 않았다면, 항상 신선한 데이터를 제공한다.Soft Nav의 경우는 Client에서 이루어지는 라우팅 방식으로 SPA 형식에서 채용되는 라우팅 방식이다.Ajax의 등장으로 가능해진 방식으로 하나의 세그먼트로 지정된 path에 지정된 컴포넌트를 랜더하게 되며,이때 랜더되는 컴포넌트 내의 비동기 함수를 실행하고 Api 요청 반환된 데이터를 통해 React의 가상DOM이나JS의 DOM 핸들링 통해서 시

[Next] generateStaticParams를 이용한 캐싱으로 성능 최적화

generateStaticParams App Router는 page Router에서 채용 했던 SSG , ISR 캐싱 방식을 사용하지 않는다.대신 비슷 한 작동을 하는 revaildate(ISR), generateStaticParams(SSG)를 이용하여정적 페이지를 build 시에 Full Router Cache 한다."generateStatic Para

Dev Blog

[Next] Next-Theme의 FOUC를 위한 의도된 불합리함

Comments

Phm_

카테고리

본문 크기

포스트 인사이트

Toc

관련 게시물

Next Suspense, Client, Server 각 환경에서의 동작원리?

Next.js 공부 어떻게 시작할까? 『한입 크기로 잘라 먹는 Next.js』

Next.js에서 Soft, Hard Navigation

[Next] generateStaticParams를 이용한 캐싱으로 성능 최적화

관련 게시물

Next Suspense, Client, Server 각 환경에서의 동작원리?

Next.js 공부 어떻게 시작할까? 『한입 크기로 잘라 먹는 Next.js』

Next.js에서 Soft, Hard Navigation

[Next] generateStaticParams를 이용한 캐싱으로 성능 최적화