[Web] Next.js 란 무엇일까?
Next.js 실습을 진행하다가 너무 ..너무 좋아서 갑자기 쓰는 정리글이다. 😚
VanillaJS → 여러 라이브러리 → React → Redux(상태 관리) → NextJS 순서대로 배우다보니까,
와 이거 안되네 → 헐 이게 이렇게 하면 된다고? → 근데 다른걸 사용하면 더 편해??
신문물을 접하는 원시인처럼 깜짝깜짝 놀라게 된다. …네.. 짜릿했습니다.
일단 Next.js를 접하기 전에 서버 사이드 렌더링의 개념을 먼저 짚고 넘어가자.
SSR (Server Side Rendering)
멀티 페이지 어플리케이션 + ajax + pushState가 합쳐지면 서버 사이드 렌더링이 실현된다.
즉 서버 사이드 렌더링은 그저 서버로부터 렌더링 데이터를 받는 것을 의미한다.
그렇다면 서버 사이드 렌더링을 도입하면 뭐가 좋을까?
SSR 장점
검색 엔진 최적화
과거에는 ajax 호출을 통한 렌더링 결과를 수집하지 못했지만, 요즘엔 검색 엔진이 발전하여 수집하는 경우도 있다.
더 빠른 초기 로딩 속도
Client-side 렌더링은 브라우저 렌더링 후 데이터를 가져오기 위한 로직이 수행되어야 해서 더 느릴 수 밖에 없다.
따라서 첫 렌더링은 SSR, 그 후에는 Client-Side 렌더링을 택하면 된다.
기존의 SSR에서는 Server-side, Client-side 렌더링 코드를 각각 작성해야 한다는 문제가 있었지만
지금은 Isomorphic (Universal) 방식으로 같은 코드로 server와 client가 동일하게 실행될 수 있다.
Next.js는 무엇인가
위에서 말한 Isomorphic 방식을 사용할 수 있는 라이브러리가 Next.js이다.
리엑트에는 정말로 좋은 라이브러리가 많고, 편리하다. (물론 초기 학습 비용이 꽤나 든다고 생각하지만) 그런데 왜 Next.js를 사용할까? 🤔
리엑트의 렌더링 방식
그 이유를 알기 위해선 React의 렌더링 방식을 짚고 넘어가야 한다.
React는 기본적으로 Client Side Rendering을 한다.
Client Side Rendering이 무엇이냐 하면, 웹 사이트를 요청했을 때 빈 html을 가져와 script를 로딩하는 방식이다. 따라서 첫 로딩 시간도 굉장히 걸릴 뿐더러, 검색 최적화에 취약하다는 단점이 있다.
반면 Next.js는 pre-reloading을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로, 첫 로딩 시간도 짧으며, 검색 최적화도 지원한다.
따라서 Next.js는 React에 필요한 여러 도구, 구성들을 처리하고 어플리케이션에 필요한 추가 구조나 최적화를 지원한다.
사실 Next.js가 없이도 SSR을 구현할 수 있다.
하지만 이미 리엑트로 대규모의 프로젝트를 구현해놓은 상태라면 리팩토링에 꽤 많은 시간을 소요한다.
따라서 Next.js를 통해 깔끔하고 쉽게 SSR을 도입하는 것이 좋은 방식이라고 생각한다. 🤔
Next.js 기능
Server Side rendering 외에 Next.js가 추가적으로 제공하는 기능들에 대해 알아보자.
1. 라우팅 시스템
(개인적으로 이 라우팅 시스템 너무 맘에 들었다)
Next.js는 페이지 기반 라우팅 기능을 제공한다.
pages 폴더 내부에 페이지 파일을 생성하거나 폴더를 생성하고 안에 index.js를 생성하면 자동으로 라우팅이 가능하다.
또한 페이지 폴더 내부 [id].js와 같은 동적인 라우팅도 지원한다. 😮
2. API Routes
API 경로가 제공된다. pages 내부의 api 디렉토리 내부에 만들 수 있다.
import { NextApiRequest, NextApiResponse } from "next";
export default function handler(req: NextApiRequest, res: NextApiResponse) {
res.status(200).json({
name: "Jung Ji-young",
email: "sky990106@naver.com",
query: req.query,
});
}
해당 경로는 json 내부의 내용과 200의 상태코드를 응답으로 전송한다.
서버에서 받아온 데이터를 손쉽게 가공해서 사용할 수 있다..!
또한 외부 경로가 유출되지 않으며, 서버에서 환경변수를 사용할 수 있다.
주의할 점은 API Routes는
CORS Header를 지정하지 않는다. 따라서CORS 미들웨어를 사용해서 따로 설정을 해야 한다.
3. client-side navigation
Next.js는 Link를 통한 페이지 간 매끄러운 이동을 제공한다.
<Link href="/posts/[id]" as={`/posts/${post.id}`} key={post.id} passHref>
<a>
<li key={post.id}>{post.title}</li>
</a>
</Link>
어떻게 매끄러운 이동이 가능할까 찾아봤다.
Next.js의 Link 컴포넌트가 뷰포트에 보였을 때, 관련 페이지를 백그라운드에 미리 가져다 놓기 때문에 페이지 리로딩이 없다고 한다.
따라서 정말 빠르게 페이지 이동이 가능하다.
4. Code Splitting
코드 분할이란, 웹의 첫 페이지가 로딩될 때 거대한 JS payload 자체를 보내는 것이 아닌 번들을 여러 조각으로 쪼개 처음에 가장 필요한 부분만 전송해주는 방식이다.
따라서 빠른 웹 페이지 로딩이 가능하다.
이는 webpack, parcel 등의 모듈 번들러도 지원하는 기능이자 Next.js도 지원한다.
Next.js는 동적인 import를 사용하여 모듈이 호출될 때만 해당 모듈을 import하는 방식으로 코드 분할을 하고 있다.
이 외에도 내장 CSS, Sass 지원, Fast Refresh, 확장 가능 등의 여러 기능이 있다.
일단은 사용해본 기능 위주로 정리했다.
Next.js 시작
해당 명령어 중 하나로 Next.js를 시작할 수 있다.
필자는 typeScript를 사용해서 프로젝트를 진행했기에, 3번째 명령어로 Next.js를 시작했다.
// React + Next.js
npx create-next-app app-name
// TypeScript (골라서 입력)
npx create-next-app --typescript
npx create-next-app@latest --ts
설치된 이후에는 해당 명령어로 개발 서버를 실행할 수 있다.
npm run dev
끝마치며
아직 Next.js를 능숙하게 사용해본 것이 아니라, 부족한 글이 되었다고 생각한다. 그리고 역시 공식 문서가 최고시다..! 😊 역시 만든 사람이 작성한 문서가 가장 정확하다.
조만간 포트폴리오 웹 사이트를 만들어볼 계획이 있는데, 이 때 React+ TypeScript + Next.js를 적극적으로 활용해봐야겠다.
출처
https://defineall.tistory.com/1037
댓글남기기