Next.js

next.js는 왜 필요해졌는가

클라이언트 사이드 렌더링의 약점 그리고 서버사이드 렌더링

우리가 흔히 검색 포털 사이트에서, 해당 페이지를 찾고자 한다면 해당 사이트의 검색엔진이 관련된 키워드를 모두 찾아 사이트 구조를 읽은 후, 요약된 부분 사항을 검색 자료로 렌더링 합니다.

이때 웹사이트 엔진이 사이트 구조를 읽을 때, HTML의 태그들을 훑어보기 때문에, HTML 이론이 매우 중요하다고 하는 겁니다!!

서비스가 해당 키워드에 맞게 검색 엔진에 읽히도록 SEO (search-engine-optimization) 작업을 하는 것이 중요하다고 할 수 있습니다.

그럼 우리가 흔히 써왔던 CSR을 살펴볼까요?? 우리가 만들어놓은 수많은 컴포넌트가 처음부터 존재하나요??
SPA의 강점은 클라이언트 측에 컴포넌트를 구성하여, 서버 응답과 관련없이 바로바로 빠른 렌더링이 가능하다는 것이죠.
SEO는 자료를 크롤링 할 때, 웹페이지 내의 링크를 타고 서버에서 응답하는 데이터를 바탕으로 자신이 보여줄 요약된 정보를 꾸려나갑니다. 따라서 CSR의 경우 SEO 작업을 하는 것이 매우 어려워집니다, 이는 서비스의 노출을 극단적으로 악화시키는 단점으로 작용하게 되는 것이죠.

next.js 는 이러한 문제를 해결해주는 React 라이브러리 전용 프레임워크 입니다. 기존의 CSR의 장점은 살린체, SEO의 최적화된 작업도 할 수가 있기 때문에, 많은 기업에서 next.js 사용을 권장하고 있습니다.

일반 CSR의 HTML 뼈대 구조 : 기본 뼈대 안에는 웹 사이트의 초기 상태만 나타나기 때문에 검색엔진이 데이터를 크롤링 할 수가 없다.

next.js의 HTML 뼈대 구조 : 검색엔진이 탐색할 수 있는 모든 링크들이 이미 담겨있다.

파일 기반 라우팅

next.js에서는 파일 기반 라우팅을 지원합니다. 기존의 React-router의 경우, 아래의 코드와 같이 여러 설정이 필요했습니다.

  return (
    <Layout>
      <Switch>
        <Route path="/" exact>
          <Redirect to="/quotes" />
        </Route>
        <Route path="/quotes" exact>
          <AllQuotes />
        </Route>
        <Route path="/quotes/:quoteId">
          <QuoteDetail />
        </Route>
        <Route path="/new-quote">
          <NewQuotes />
        </Route>
        <Route path="*">
          <NotFound />
        </Route>
      </Switch>
    </Layout>
  );

파일 기반 라우팅은 프로젝트의 폴더와 파일 구성을 읽고 자동으로 라우팅을 하는 방식을 말합니다. 우리가 파일을 이미 만드는 동시에, 라우팅 기본 설정이 자동으로 적용되는 것이죠.

풀스택 개발

next.js를 사용하는 경우, 독립형 백엔드 코드를 React 프로젝트에 넣는 것이 가능해집니다.
예를들어 리액트 프로젝트안에서 Node.js를 기반으로 파일 시스템을 작업하거나, Rest API를 구현하거나, 데이터베이스에 접근해지는 것이 가능해지죠. 데이터를 변경하거나, 저장하는 등의 백엔드 작업이 가능해지는 것이죠.

Next.js 파악하기

사전 렌더링 pre-rendering

next.js을 사용하면 서비스 접속 당시 검색 엔진이 데이터를 조회하는 데 필요한 완성된 HTML 문서가 보내는 것이 가능합니다. 이를 next.js에서는 pre-rendering이라고 합니다.

중첩 경로 설정하기

파일 기반 라우팅에서 중첩 경로는 폴더나 혹은 파일로 이루어집니다. 파일로만 구성하는 경우, 파일 이름을 통해 설정이 되며,
폴더별로 구성하는 경우, index.js 파일 해당 폴더의 루트 컴포넌트가 됩니다.

localhost:3000/news

동적 경로 설정하기

동적 경로를 설정하는 방법은 우선 동적 경로를 사용할 컴포넌트의 이름 중괄호안에 작성해줍니다.

해당 동적 경로 정보를 확인하느 방법은, next.js에서 자체적으로 만든 useRouter 훅을 사용해주면 됩니다.

// 만약 경로가 localhost:3000/news/someId 라면
import { useRouter } from "next/router";

// our-domain.com/news

function DetailPage() {
  const router = useRouter();
  
  const newsId = router.query.newsId;

  // send a request to the backendAPI
  // to fetch the news item with newsId

  // The someId Page
  return <h1>The {newsId} Page</h1>;
}

export default DetailPage;