갑자기 왜그래

지금 현재 next.js는 15버전이 최신버전이다.

그런데 이 버전에 최악의 문제라고 생각되는 점이 있는데,

바로 라우팅이 느리다.

느려도 너무 느리다.

vercel 맘에 안드네

왜 사용자들한데 디버깅을 시키냐?????????

그래서 어떡해

일단 로딩바를 이용해 임시로 라우팅이 느린걸 커버쳤다.

pnpm add next-nprogress-bar

위의 라이브러리를 통해 30초안에 프로그레스바를 만들 수 있다.

//ProgressProvider.tsx

"use client";

import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
import { ReactNode } from "react";

const ProgressProvider = ({ children }: { children: ReactNode }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="2px"
        color="#6F69D9"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default ProgressProvider;

이렇게 프로바이더를 만들어서 layout.tsx에 use client를 붙히는 사고가 일어나지 않도록 하자.

//layout.tsx

<ProgressProvider><div className="w-full h-screen bg-bg">{children}</div></ProgressProvider>

이동할때마다 프로그레스바가 생겨난다.

느낀점

이번 프로젝트를 진행하면서 넥스트js에 대해 많은걸 느끼고 있는데,

확실히 잘 다루면 정말 좋은 프레임워크이다.

다만 한가지 걸리는건, 리액트와 생각보다 많이 다르다.

리액트에서 신경써야할 부분과 넥스트에서 신경써야할 부분이 차이가 많이 난다.

리액트에서는 컴포넌트 라이프 사이클 같이, 전적으로 클라이언트 사이드에서 일어나는 이벤트에 대한 최적화가 가장 큰 고민거리라면,

넥스트에서는 어떻게하면 서버컴포넌트를 많이 쓸 수 있을까, 어떻게하면 클라이언트 상태와 서버 상태를 동기화 (동기화라는게 하이드레이션 말고, 쿠키같은 상태 저장 요소들을 클라이언트 사이드와 서버 사이드에서 동시에 사용하는 법을 의미한다.) 시킬까를 많이 고민하는 것 같다.

많은 공부가 필요한 만큼 적극적으로 사용해봐야겠다.

“”vercel형님들 제발 안정화시켜서 메이저 업데이트 해주세요 ㅠㅠㅠㅠ

훈수는 언제나 환영