[개인 블로그 renewal] Next.js와 client-side navigation, 상태관리(작성중)

이 주제를 공부하는 이유

Single Page App에서 상태 관리라는 것은 좀 직관적으로 이해가 되었다. 모든 것들이 브라우저 상에서 일어나고 있으니 대충 상태도 브라우저에서만 관리되면 되고.. 하지만 Next.js를 하다보니 도대체 여러페이지로 구성됬다는데, 어떻게 _app.js 내에서 context나 redux store가 있으면 모든 페이지에서 공유가 되는건지 이해가 되지 않아서 상태 및 Next.js자체에 대해서 좀 더 자세히 알아보는 시간을 가졌다. 

 

 

우선 상태란?

우선 이 글을 읽어보았다. How State Management works? Dead simple SM in Vanilla JavaScript

How State Management works? Dead simple SM in Vanilla JavaScript

핵심은 이런식으로 state도 그냥 객체라는 것이다. 

App.state = {
  count: 0,
  increment: () => {
    App.state.count++;
  }
};

 

Next.js에서 상태 관리

Next.js는 첫번째 request에서 html 파일및 기타 필요한 assets를 받는다. 

 

https://nextjs.org/learn/basics/navigate-between-pages/client-side

Learn | Next.js

 

나는 Next.js가 server-side, static side build를 한다고 햇떤 것때문에 막연히 html 파일을 request때마다 받아오겠거니 했었는데 좀 Next.js를 다루다가 다시 문서를 읽어보니, Link 컴포넌트를 통해서 client-side navigation을 하고 있다는 말을 이제야 좀 이해할 수 있었다.

 

Client-side navigation이란?

https://stackoverflow.com/questions/64644248/next-js-client-side-navigation-vs-changes-in-html

Next.js - Client Side Navigation vs. changes in html

https://web.dev/route-prefetching-in-nextjs/#:~:text=The%20component%20%23&text=js%20automatically%20prefetches%20the%20JavaScript,navigations%20to%20new%20pages%20quicker.

Route prefetching in Next.js

위의 두 글을 통해서 client-side navigation의 참뜻을 이해하자면

 

• Next.js APP에 요청이 있으면 html + 기타 파일들이 다운로드된다. 
• 이 페이지에 link 컴포넌트가 있다면, Next.js에서 prefetching을 한다. 
  • prefetching이란 필요한 데이터를 미리 다운로드 받는것이다. link 에 연결된 페이지를 그리기 위해서 필요한 js 파일을 받아온다
  • 이건 Intersection Observer API로 viewport에 어떤 link 컴포넌트가 나타나고있는지를 파악해서 지원하는 것이다. 
  • link 컴포넌트는 그래서 잘방문하지 않는 페이지로 prefetch: false 설정을 통해서 prefetch를 하지 않도록도 지원이 가능하다. 
• 실제로 해당페이지로 갔을때 미리 js파일이 와있기때문에 rendering을 좀더 빨리 할 수 있다. 

 

하지만 예전에 이부분을 공부했을때 잘 이해가 안되었던것은 미리 js 파일이 와있다는 것이었다. 내생각에는 multi page app 을 만드는건데, 뭔 js 파일을 받아오나? html을 받아와야하지 않나... 싶었는데 위의 stackoverflow 글의 답변에 설명된 내용에 따르면 Next.js는 페이지를 pre-processing을 해줘서 client-side의 리소스를 아껴주는데, 링크 컴포넌트의 경우 미리 데이터를 불러오기 때문에 일반적인 SPA 보다 리소스를 미리 준비해놓기 때문에 빠른 것이라는거다. 그리고 최초의 요청이후에는 pre-fetching을 하지만 Single Page App 마냥 동작한다는 것이다(이렇게 표현해도 되는진 모르겠다..?)

 

실제로 아래 예시를 살펴보자. 

localhost:3000/ 에서 body 태그에 style="background-color:red" 주입

/ 페이지에서 background-color:red를 주었다.

그리고 네트워크 탭에 가보면 내 상단의 nav 메뉴에 해당하는 페이지의 데이터들을 다 pre-fetching 해오는 것을 알 수 있다. 그리고 중요한 사실을 client-side navigation을 하기 때문에 link 메뉴를 클릭하면 full page reload가 일어나는 것이 아니라는 것을 다른 페이지로 이동했을때 background-color: red 속성이 사라지지않는 것으로 확인이 가능하다. 

 

/blog 페이지로 이동

이 페이지로 이동했는데 pre-fetching 해온 데이터로 렌더링이 빨리 일어나지만, page가 reload되거나하지는 않는다. 위의 이유로 next.js app이 여러페이지에 걸쳐서 상태를 공유할 수 있는 것이다. 

 

 

 

Redux랑 Storage

이제 앞으로 알아볼건 이거다. 

 

https://dev.to/link2twenty/react-redux-and-localstorage-2lih

React: Redux and localStorage