TIL - 2022.08.01

Next.js vs React

Next.js와 React는 비슷하면서도 다르다.

---

Framework vs Library

Framework

뼈대, 기반
기본적인 틀이 잡혀있으며, 그 틀에 맞게 사용을 해야 한다.
Next.js

Library

활용 가능한 도구의 집합
React

프레임워크와 라이브러리의 가장 큰 차이점은 흐름(Flow)를 누가 가지고 있냐이다.

프레임워크는 스스로가 흐름을 가지고 있으며, 사용자는 거기에 맞게 코드를 작성해야 한다.
반면에 라이브러리는 사용자 스스로가 흐름을 가지고 원하는 대로 코드를 작성한다.

---

SSR vs CSR

SSR

Server-side Rendering

동작 과정
1. 서버에서 HTML 파일을 만들어 클라이언트에 전달
2. 클라이언트는 생성된 HTML을 먼저 보여줌(JS는 아직 받아오지 못함)
3. JS를 받아오기 전까지는 사용자와 상호작용이 이루어지지 않고 어떤 조작을 했는지 기억만 하고 있음
4. JS 로드 완료시 기억하고 있던 동작을 수행

필요한 HTML과 CSS를 먼저 불러오기 때문에 초기 로딩이 빠르나, 페이지 이동시에는 해당 부분을 추가로 다운로드해야 되기 때문에 CSR에 비해 느릴 수 있음
서버단에서 렌더링을 수행하기 때문에 과부하가 생길 수 있음
SEO(검색 엔진 최적화, Search Engine Optimization)에 유리함

CSR

Client-side Rendering
1. HTML과 JS를 동시에 다운로드(사용자는 빈 화면을 보게 됨)
2. 로드 완료시 JS가 실행되며 상호작용이 가능해짐

HTML과 JS 모두를 불러오기 때문에 초기 로딩은 느리지만, 페이지 이동시에는 추가로 로딩할 것이 없기 때문에 SSR에 비해 빠름

---

Next.js의 라우팅

써드파티 라이브러리인 react-router-dom을 반강제적으로 사용해야 하는 react와는 다르게 Next.js에서는 pages 디렉토리 하위에 컴포넌트 파일을 위치함으로써 보다 쉽게 라우팅이 가능하다.

컴포넌트 파일명이 곧 url이 되고, 파일 내에서 export 하는 컴포넌트명은 크게 중요하지 않다.
(단, export default는 강제적이다..)

다른 페이지(컴포넌트)로 이동할 때는 Link 태그를 import 하면 된다.

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link href="/">
    	<a style={{ color: "red"}}>About</a>
      </Link>
      This is Home.
	</div>
  )
}

특이하게도 Link 태그 내에 a 태그가 존재하는데, Link 태그에는 style, class 등의 프로퍼티를 사용할 수 없기 때문에 a 태그에서 사용하면 된다.

---

참조
프레임워크와 라이브러리의 차이점
SSR과 CSR의 차이
Next.js Link 태그안에 a tag를 안넣어도 왜 잘 작동될까?