[React/NextJS] NextJS 시작하기 (1) - NextJS vs ReactJS / CSR vs SSR

NextJS

NextJS  시작하기

 

NextJS란?

NextJS란 React 프레임워크 중 하나로 React의 CSR(Client-Side-Rendering) 의 단점을 보완하여 SSR(Server-Side-Rendering)도 가능하게 만들었다. 

기본 원리로는 브라우저로 서버에서 렌더링된 html을 먼저 보내서 SEO(검색 엔진 최적화)에 용이하게 한 후, JS를 다운로드하여 기존 React처럼 사용가능하게 한다. 사용자 측에선 렌더링된 html 화면까지는 바로 보이고 그 다음 동작하는 JS 관련 부분은 다운로드 후 사용할 수 있게 된다. 따라서 로딩이 길 경우 빈 화면만 보이는 (CSR)방식과는 달리 HTML이 렌더링된 화면 만으로도 사용자는 미리 정보를 확인할 수 있다.

 Next에는 React에서 기존에 만들어 써야하던 모든 것들이 특정 규칙에 따라 사용할 수 있게끔 만들어져 있으며 가져다 쓰면 된다. Next는 Framework, React는 Library라고 생각하면 된다.

 

---

CSR(Client-Side-Rendering) vs SSR(Server-Side-Rendering)

React-CSR		Next-SSR
장점	- 초기 로딩 이후 렌더링이 빠르다. - 서버에 요청할 것이 별로 없다. - 웹 어플리케이션에 좋다.	장점	- 초기 로딩이 빠르다. - SEO에 좋다. - 정적 사이트에 좋다. (데이터 prefetch) - 제공되는 기능이 많아 개발 속도가 빠르다.
단점	- 초기 로딩이 느려 빈 화면이 보일 수 있다. - SEO에 좋지 않다. - 기능을 만들어 써야한다.	단점	- 서버 요청이 잦다. - 페이지 요청 시 새로고침 된다. - 기존 기능을 커스텀해서 써야할 수 있다.

 

---

NextJS 구조

https://nomadcoders.co/nextjs-fundamentals

노마드 코더의 Next.JS 강의를 기반으로 작성되었다.

NextJS 시작하기 – 노마드 코더 Nomad Coders

NextJS App 구조

 

pages 폴더 내에 api를 작성해놓은 api폴더와 각각의 페이지를 나타내는 js 파일들을 넣을 수 있다. pages 폴더 내에선 각 js파일들이 페이지에 맵핑되어 파일명으로 자동 라우팅 된다. ex) 'about.js' ==> 'http://localhost:3000/about', 'index.js' ==> 'http://localhost:3000/'

_app.js는 각 페이지들을 Component로 받아 해당 컴포넌트를 감싸는 다른 HTML Element 및 Component를 만들 수 있다. 이렇게 되면 페이지로 받은 외부의 Navigation은 고정되고 내부 컴포넌트만 따로 관리할 수 있다. 

import '../styles/globals.css'
import Layout from "../components/Layout";

function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default App

import NavBar from "./NavBar";

export default function Layout({children}) {
    return (
    <>
        <NavBar/>
        <div>{children}</div>
    </>
    )
}

 

children을 파라미터로 받고 NavBar로 감싸는 Layout 컴포넌트를 생성하고, 각 페이지들을 App에서 컴포넌트로 받아 <Layout>으로 감싼 예제다. 

이렇게 되면 각 페이지가 전환이 되더라도 <NavBar>를 페이지마다 써야하는 중복을 피할 수 있다.

component 폴더에는 기존 react처럼 각 페이지에 쓰일 component들을 js로 생성해 놓는다. pages 폴더 내에 있는 파일명과 파일 내의 function component명은 일치하지 않아도 된다. 라우팅이 파일 명을 따라가기 때문이다. 

각 컴포넌트에 대한 css 스타일 적용은 아래 처럼 할 수 있다. 제일 바깥 element 내에 <style></style>이 아닌 <style jsx>를 선언하고 {``} 내에 css 스타일 코드를 삽입하면 현재 파일 내의 component에 한해 style을 적용할 수 있다.

반응형

import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <img src="/vercel.svg" />
      <div>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
      </Link>
      </div>
      <style jsx>{`
        a {
          text-decoration: none;
          }
        nav {
          display: flex;
          gap: 10px;
          flex-direction: column;
          align-items: center;
          padding-top: 20px;
          padding-bottom: 10px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
            rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        }
        img {
          max-width: 100px;
          margin-bottom: 5px;
        }
        nav a {
          font-weight: 600;
          font-size: 18px;
        }
        .active {
          color: tomato;
        }
        nav div {
          display: flex;
          gap: 10px;
        }
      `}
      </style>
    </nav>
  );
}

다음 시간인 fetch data와 redirect/rewrite, fetch data를 하는 방법을 알아보도록 하겠다.