✨ Nextjs
Nextjs 는 React 의 대표적인 프레임워크로 서버서이드 렌더링(Server-Side Rendering, SSR)을 대표적 기능으로 내세우는 것이 특징이다.
처음 접하는 사람들은 현재 사용하는 React에서 불편함을 느끼지 못하는 경우도 있고, 서버사이드렌더링 이 얼마나 유용한 기능인지 와닿지 않는 사람들도 있을 것이다.
따라서 해당 챕터에서는 Nextjs의 대표적인 특징인 SSR 과 이것이 어떤 이득을 주는지와
30기 앱잼 nori 에서 중점적으로 사용하고 공부했던 Next 에서의 라우팅 기능을 소개하고자 한다.
✨ Server-Side Rendering(SSR)
30기 앱잼 초창기때, 29기 앱잼 서비스인 북스테어즈 에서 서비스를 기존 React 에서 Next로 리팩터링 한다는 이야기를 들었다.
북스테어즈에서 리팩터링을 하는 이유, 많은 서비스, 블로그에서 기술하듯이 Next를 사용하는 가장 큰 이유는 SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)이 가능하기 때문이라고 한다.
이게 무슨 뜻일까? 예시를 통해 보도록 하자.
기존 React 에서는 Client-Side Rendering(CSR)을 한다.
CSR 에서는 위 그림처럼 웹사이트를 요청했을 때 빈 html을 가져온 후 script를 로딩하기 떄문에, 첫 로딩 시간도 오래걸리고 SEO에 취약하다는 단점이 있다.(html 자체는 비어있기 때문에!)
또한 네트워크가 연결이 되어있지 않거나 느린 경우에 서비스 이용자는 script가 로딩되기 전까지 빈 화면을 보게 되는 경우가 생기게 된다.
반면 Nextjs 는 pre-reloading 을 통해 미리 데이터가 렌더링된 페이지를 가져올 수 있게 해 준다.
이는 사용자에게 더 좋은 경험을 주고 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다.(HTML이 비어있지 않기 때문에!)
✨ Next의 가장 중요한 기능 라우팅
지난 번 APP-JAM 에서 nori 서비스를 개발하며 가장 인상깊게 남았던 부분은
Header는 각각의 페이지로 이동하는, Community는 고유의 내용이 담겨있는 페이지로 이동해야 하는 기능을 구현하는 것과 SSR을 적용시키는 방법이었다.
기존의 React와 Next에서 제공하는 라우팅이 어떻게 다른지 비교하며 알아보자.
1. Next.js 의 라우팅(파일시스템 기반 라우팅) / 정적라우팅
기존의 React에서의 라우팅이라 함은 Router를 별도로 설치하여 Router 파일에 컴포넌트를 import 하고 pathname을 지정해주는 방식이다.
// 합동세미나 당시 React 로 구현한 Router.
import Home from 'pages/Home';
import Room from 'pages/Room';
import WishList from 'pages/WishList';
import React from 'react';
import Wish from 'pages/Wish';
import ScrollToTop from './ScrollToTop';
import { BrowserRouter, Route, Routes } from 'react-router-dom'; // 컴포넌트 import
function Router() {
return (
<BrowserRouter>
<ScrollToTop />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/wishlist" element={<WishList />} />
<Route path="/wish/:id" element={<Wish />} />
<Route path="/wish/room/:id" element={<Room />} />
<Route path="/*" element={<p>Page Not Found</p>} />
</Routes>
</BrowserRouter>
);
}하지만 Next.js는 파일시스템 기반 라우팅 을 지원한다.
때문에 더 직관적인 라우팅과 컴포넌트 구분이 가능하다.
- 최초 프로젝트를 생성하면 자동적으로
pages라는 폴더가 생성된다. pages폴더 안에 컴포넌트를 생성 하면 자동으로 경로가 설정되게 된다..tsx(혹은 .jsx, js, ts)파일을 생성 한 후useRouter나Link컴포넌트를 이용하여 해당 파일의 이름으로 경로를 설정한다.
// /common/Header.tsx 의 Menu 컴포넌트 일부
<Link href="/viewProduct">
<StMenuBtn type="button" onClick={handleClickExcept}>
상품보기
</StMenuBtn>
</Link>
<Link href="/community">
<StMenuBtn type="button" onClick={handleClickExcept}>
커뮤니티
</StMenuBtn>
Link컴포넌트는next/Link모듈에서 불러와 사용 할 수 있으며href속성으로 이동할 경로를 지정한다.- 위 코드의
StMenuBtn을 클릭하게 되면Community컴포넌트를 렌더링 하게 되고, 경로 또한 자동적으로 파일명인/Community가 된다. - 이처럼 파일명으로 직관적으로 라우팅을 할 수 있음으로써 컴포넌트의 이름과 path의 이름을 통일하여 더 직관적인 컴포넌트 관리가 가능하다.
- 또한
Link컴포넌트는 브라우저의 History API를 지원하여 뒤로가기를 하더라도 이전에 렌더링한 페이지를 불러온다. 따라서 새 페이지를 불러오기 위한 요청을 하지 않아도 되며, 이전 페이지를 다시 컴파일할 필요가 없다는 장점이 있다.
2. 동적라우팅
Next.js 에서는 지정된 주소로의 정적 라우팅 뿐 만 아니라, 동적인 주소로의 라우팅도 가능한데
- 동적 라우팅을 사용하기 위해서는 폴더 구조를 조금 수정을 해야 한다.
- 위 사진의
community폴더 안의index.tsx는 path가/community인 파일이다. 이렇게 해당하는 pathname 안에 있는 index 파일은 폴더 이름을 path로 가진다. - 다음으로 대괄호
[]로 파일명을 감싸면 해당 페이지는 동적으로 경로가 지정되는 페이지가 된다. - 이제 동적 페이지가 존재하는 경로에 임의의 주소를 대입하면 대입한 주소를 쿼리명으로 갖는 페이지로 이동 할 수 있다.
<StMainInfo
onClick={() => Router.push({ pathname: `/community/${id}` })}
>
<h1>{title}</h1>
<p>{content}</p>
</StMainInfo>위 코드는 {title} 과 {contnet}를 클릭하면 해당 {id}값을 가지는 path로 이동하게 되는 기능을 구현한 코드이다.
여기서 {id} 는 API 에서 가져오는 각 게시글의 id 값이다.
- 동적 라우팅을 사용할떄는 하나의 주의사항이 있는데, 한 동적 경로에는 한 개의 동적 페이지만이 존재 할 수 있다.
/.next
/pages
ㄴ-- index.jsx
ㄴ-- /community
ㄴ-- [cid].jsx
ㄴ-- [name].jsx -> Error!
/public
/styles