패스트캠퍼스 챌린지 21일차 (Next.js 소개, 환경 설정 및 프로젝트 생성)

22.2.13 (일) +21days

Vercel이 만든 React Framework (for production)

https://nextjs.org/

Next.js by Vercel - The React Framework

 

Vercel 은?

SWR로 한 번 소개 했었던...

https://vercel.com/

Develop. Preview. Ship. For the best frontend teams – Vercel

 

 

Frontend deploy platform

TMI. Zeit라는 이름에서 2020년 4월 Vercel로 바뀜

https://github.com/vercel

Vercel

Next.js / Vercel / Hyper / SWR 등의 라이브러리를 제공하고 있는 회사다

 

Next.js는?

리액트 프레임워크다. 리액트는 라이브러리를 표방하는데, 이러한 리액트의 장점은 살리되 다양한 편의 기능들을 추가한 Framework의 필요를 충족시킨 버전이 Next.js다.

 

Next.js 하면 무조건 나오는 단어 ⇒ SSR

 

SSR vs CSR

SSR이란?

클라이언트로 전달될 HTML 파일 내용(일부를)를 미리 그려서 내려주는 것

• 클라이언트 렌더링의 속도를 빠르게 하여, 사용자 체감 속도 증진
• 검색 엔진이 JavaScript를 실행하지 않고 크롤링 가능 SEO

 

그외 주요기능 (https://nextjs.org/docs/basic-features/pages)

• 각종 Optimization
• Hot Code Reloading
• Automatic Routing
• Automatic Code Splitting
• Prefetching
• Dynamic Components Import
• Static Exports

CRA vs CRA

npx create-react-app

npx create-next-app

 

node version 관리 n 설치

npm install -g n

 

next.js를 사용하려면 특정 버전의 node를 사용해야 하기 때문에 n을 이용해 node 버전 알맞게 설치

 

npx create-next-app으로 프로젝트 생성

npm run dev로 기본 화면 실행

개발자 도구로 확인해보면,

 

 

id=”__next” 라는 부분이 있는데 next.js는 이 div 안에서 동작한다.

크롬 개발자도구의 설정에서 자바스크립트 사용을 중지해본다.

 

 

그리고 화면을 Reload 하면 샘플 화면의 css 등은 일부 깨지지만 화면이 나오는 걸 확인할 수 있다.

 

 

이 부분이 SSR을 확인할 수 있는 기능이다.

 

2. 환경 설정 및 프로젝트 생성

launches data를 fetching 해보기

(https://docs.spacexdata.com/)

CSR로 한번, SSR로 한번

import { useEffect, useState } from 'react';

export default function Launches() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchLaunches = async () => {
      const res = await fetch('https://api.spacexdata.com/v3/launches');
      const data = await res.json();

      setData(data);
    };

    fetchLaunches();
  }, []);

  if (data === null) {
    return null;
  }
  return (
    <div>
      <ol>
        {data.map((launch, index) => (
          <li key={index}>{launch.mission_name}</li>
        ))}
      </ol>
    </div>
  );
}

spacexdata에서 data를 가져온 후 단순히 리스트로 표현하는 코드이다.

Next.js의 아무 기능도 사용하지 않아 CSR로 렌더됐다.

SSR로 렌더하기 위해서는 getServerSideProps를 살펴본다.

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js

 

import { useEffect, useState } from 'react';

export default function Launches({ data }) {
  // const [data, setData] = useState(null);

  // useEffect(() => {
  //   const fetchLaunches = async () => {
  //     const res = await fetch('https://api.spacexdata.com/v3/launches');
  //     const data = await res.json();

  //     setData(data);
  //   };

  //   fetchLaunches();
  // }, []);

  if (data === null) {
    return null;
  }
  return (
    <div>
      <ol>
        {data.map((launch, index) => (
          <li key={index}>{launch.mission_name}</li>
        ))}
      </ol>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://api.spacexdata.com/v3/launches');
  const data = await res.json();

  return {
    props: { data }, // will be passed to the page component as props
  };
}

 

 

공식문서의 예제 코드를 복사해와서 data를 fetch 하는 부분만 getServerSideProps 안으로 옮겨주고 data를 넘겨주면 된다.

export async function getServerSideProps() {
  const res = await fetch('https://api.spacexdata.com/v3/launches');
  const data = await res.json();

  console.log('getServerProps');

  return {
    props: { data }, // will be passed to the page component as props
  };
}

 

getServerSideProps에서 console을 찍으면 아래와 같이 서버 터미널에 log가 찍힌다.

 

다양한 쇼케이스

https://nextjs.org/showcase

커머스

https://nextjs.org/commerce

 

 

Pages

Two forms of Pre-rendering

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

• Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
• Server-side Rendering: The HTML is generated on each request.

Importantly, Next.js lets you choose which pre-rendering form you'd like to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.

You can also use Client-side Rendering along with Static Generation or Server-side Rendering. That means some parts of a page can be rendered entirely by client side JavaScript. To learn more, take a look at the Data Fetching documentation.

export async function getStaticProps() {
  const res = await fetch('https://api.spacexdata.com/v3/launches');
  const data = await res.json();

  console.log('getStaticProps');

  return {
    props: { data }, // will be passed to the page component as props
  };
}

export async function getServerSideProps() {
  const res = await fetch('https://api.spacexdata.com/v3/launches');
  const data = await res.json();

  console.log('getServerSideProps');

  return {
    props: { data }, // will be passed to the page component as props
  };
}

 

getStaticProps는 빌드시에 data fetch까지 포함해서 빌드한다.

getServerSideProps는 페이지가 실행될 때마다 api를 호출해서 가져온다.

 

엄청 다양한 Example

https://nextjs.org/examples

 

 

정리

Next.js ⇒ React Framework

Vercel ⇒ Frontend Deploy platform

SSR vs CSR ⇒ 보여질 화면을 그리는 주체

SSR 장점 ⇒ SEO / 렌더 속도 / 기타

 

CSR vs SSR ⇒ Next.js로 둘 다 가능

쇼케이스 ⇒ Next.js 실제 사용 예

SSG vs SSR ⇒ getStaticProps vs getServerSideProps

예시 ⇒ github

 

 

 

 

22.2.13 +21days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다