Nextjs : 리액트와 차이, a와 Link의 페이지 전환 차이, getServerSideProps 유무

디저트 레시피 프로젝트에서 회원가입 부분에 formData를 저장하고 주고받는 것을 구현하는 중,

좀 더 정확하고 깊은 리액트 문법으로 적용하고 싶어 책을 샀다. 모던 리액트 딥 다이브.

오프라인에서 잠깐 펼쳐봤는데 form에 대한 목차도 있었고, 리액트를 깊게 배우기에 좋다는 평도 많아서 구매했는데

대부분 Nextjs 환경에서 실습이 이루어지는 것 같아서 일단 Nextjs도 같이 실습하면서 레시피 프로젝트(리액트)도 겸하려 한다.

 

 

근데 이거... 실습하다보니 작동 원리랑 라우팅이 여태 리액트와는 정말 다르다!!

프로젝트 구조도 책으로 좀 더 정확하게 배울 수 있고, 파일 이름이 곧 url 이름이라니... 너무 신기한데 빨리 잊어버리고 싶지 않아 배운 내용을 블로그에 정리한다.

자세한 배움은 모던 리액트 deep dive (김용찬 지음) 도서를 참고하도록!

 

 

---

 

리액트와 Nextjs 차이 (일부, 구조)

리액트	Nextjs
App.js에서 <Route path="...">로 일일이 등록해야 함	❌
App.js에서 컴포넌트의 주소를 설정 해야 함	파일 이름이 URL 경로
ex) <Route path="/about" element={<About />} />	ex) pages/about.tsx 라면 /about ex) pages/ppp/[...props].tsx 라면 ppp/a, ppp/123 등 다 됨 ppp/는 안 됨(해봄)

 

와아아아우 정말 다르다!

처음에 라우트 주소 설정하는 설명이 없었고 실습 페이지에서 [...props].tsx인 파일명으로 눈치껏 컴포넌트명이 곧 라우트 주소라는 것을 직감할 수 있었다.

 

 

리액트에서는 App.js에서 라우팅을 설정해주는 대신에 개별 컴포넌트에 props를 받기만 하면 되었지만

Nextjs는 개별 파일 안에 query와 props를 통해 라우트 주소의 props를 각각 작성해주는 것 같다.

 

 

Nextjs Props 설정하기

export const AAA = (context: NextPageContext) => {
  const {
    query: { props },
  } = context
  
  return {
    props: {
      props,
    },
  }
}

 

 

 

Nextjs는 SSR + 클라이언트가 모두 실행된다

 

모던 리액트 deep dive 중 예제

cmd에서는 서버, 개발자 콘솔에서는 클라가 뜬다.

 

 

넥스트와 리액트의 차이 1 ─

Nextjs는 서버 + 브라우저 둘 다 에서 실행됨

리액트는 브라우저에서만 실행됨

 

SSR은 서버사이드렌더링을 의미하는데 

 

 

내가 알기론 리액트는 js를 이용해서 형태를 만든다고 들었다.(추후 정확한 말이 있으면 교체예정!)

Nextjs는 서버에서 HTML을 먼저 만들어 보낸다. 그리고 브라우저에서 받아 js를 연결해서(hydration) 작동한다고 한다.

사진 코드에서 typeof window가 뜻하는 건, 서버에서 window가 없으면 undefined, 브라우저에서 window가 뜨면 클라이언트라고 뜨게 확인을 시키는 코드다. 저 코드는 결국 Hello라는 컴포넌트가 서버에서 실행 중인지, 브라우저에서 실행 중인지 확인하는 코드다.

확인이 왜 중요하느냐, 그건 Nextjs가 서버랑 브라우저에서 모두 작동을 한다는 방증을 확인할 수 있는 방법이기 때문이다.

서버와 브라우저 모두에서 작동을 한다는 게 무슨 의미일까?

 

 

 

💬 서버와 브라우저 모두에서 작동을 한다는 건 어떤 의미인가?

 

리액트는 개발자도구를 통해 엘리먼트를 확인해보면 브라우저에 <div id="root"></div>와 같이 태그들의 핵심들이 그닥 기재되어있지 않다. 그런데 서버와 브라우저 모두 실행되는 넥스트는 서버에서부터 완성된 HTML을 바로 보여줄 수 있다고 한다. 그 후에 리액트가 붙는다고 한다.

 

• 화면이 미리 만들어져서 바로 뜨기때문에 빠르게 첫 화면을 구성할 수 있다.
• 로딩 시간이 줄어든다.

 

 

 

리액트 딥다이브 예제를 그대로 실습해보았다. 코드 출처는 모두 모던 리액트 딥다이브(도서).

import type { NextPage } from 'next'	
import Link from 'next/link'			// Nextjs에서 제공하는 라우팅 컴포넌트

const Home: NextPage = () => {
  return(
    <ul>
      <li>
        <a href="/hello">A 태그로 이동</a>
      </li>
      <Link prefetch={false} href="/hello">next/link로 이동</Link>
    </ul>
  )
}

export default Home;

 

a태그와 Link태그는 비슷한 역할을 하지만, 개발자 - Network탭에서 작동하는 원리를 보면

a태그는 전체 리소스가 다시 리로드 되고, Link는 필요한 js와 json파일만 추가된다. SPA처럼 페이지 전환이 된다.

 

Link에서 뜨는 js 파일은 Network탭에서만 존재하는데, hello 페이지를 위한 js이다.

next/link를 통해 이동할 땐 SSR이 아니라 클라에서 필요한 js만 불러와서 라우팅하는 CSR 방식으로 작동한다고 한다.

이게 무슨 말이야?! 싶겠지만, 찾아보니 이걸 하이브리드 렌더링 모델이라고 부른다 한다.

즉 파란 글씨와 이 예제가 nextjs의 장점을 한 번에 말해주는 셈.

 

 

 

∴ nextjs는 초기에는 SSR로 빠른 로딩을 하고, 이후 클라이언트에서는 CSR로 필요한 파일들만 가져와서 새로고침 없이 빠르게 페이지 전환이 가능하다.

💬 초기는 SSR, 내부 페이지 이동은 CSR

 

 

 

getServerSideProps 유무

 

책에서는 이 유무에 따라 빌드크기가 달라지고 정적인 페이지가 되냐 아니냐를 분류할 수 있다고 한다.

<a>와 <Link>태그 둘 다 서버에 로그가 안 남는다고 했는데, 나는 저 부분을 삭제해도 <a>에서는 계속 cmd에 서버라는 문구가 남아서 이 점은 잘 모르겠다.

그런데 Time은 조금 달랐는데

 

 

 

<a>일 때 유무

유

 

무

 

 

<Link>일 때 유무

위: 무, 아래: 유

 

 

getServerSideProps에 따라 유는 시간이 오래걸리고, 무는 시간이 적게 걸렸다. getServerSideProps를 정리하면

 

 

 

 

a  vs  Link

	유	무
a	시간 오래걸림	시간 비교적 적게 걸림
Link	시간 짧음 json파일 0.3kb 추가	비교적 오래걸림 파일은 비교적 작음
a  vs  Link	Link가 유무 상관없이 압도적 빠름 파일크기는 a가 작음

 

 

 

Link  vs  Link

getServerSideProps	유	무
차이점	json이 생김	json이 없음
이유	페이지 데이터 미리 로딩을 위해 자동 fetch를 함(hello.js를) SSR -> CSR로 하기 위해
	json이 생겨 요청 수가 1개 증가 파일 용량 증가 시간은 더 빠름	파일 용량 비교적 작음 시간은 좀 걸림

 

 

getServerSideProps는 결국 SSR -> CSR을 준비하기 위한 과정에서 사용할 때 좋은 건가아!

파일 크기는 조금 늘어나지만 시간은 짧게 수행된다.