[Next]Next.js 알아보기

Next.js란?

Vercel에서 만든 React framework

Vecel은?

Vercel은 프런트엔드 개발자를 위한 플랫폼으로, 혁신가가 영감을 얻는 순간에 만드는 데 필요한 속도와 안정성을 제공합니다.

프론트엔드 서비스를 배포하고 관리하는 플랫폼을 제공

라이브러리를 표방한 React의 장점을 살리고 다양한 편의 기능들을 추가한 Framework의 필요를 충족함.

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

CSR이란?

CSR은 react,vue 등의 SPA(Single Page Application)에서 쓰이는 기법
서버에서 화면을 구성하는 SSR과 달리 클라이언트에서 화면을 구성

하지만 초기에 html에 데이터가 없다보니 검색 봇이 해당페이지를 빈페이지로 착각하여 SEO(Search Engine Optimization) 검색엔진 최적화에 취약할 수 있는 단점이 존재한다.

SSR이란?

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

• 클라이언트 랜더링의 속도를 빠르게 하여 사용자 체감 속도 증진

• 검색 엔진이 javascript를 실행하지 않고 크롤링 가능 SEO

  주요 기능

• 각종 Optimization

• Hot code Reloading

• Automatic Routing

• Automatic Code splitting

• Prefetching

• Dynamic Components Import

• Static Exports

---

CNA 설치하기

node version 관리 n 설치

	npm install -g n

위 사진 처럼 에러가 발생
여러 사이트를 찾아본 결과 window는 지원하지 않는다는 이야기 있음.

next.js에는 node version이 12.22.0 || 14.17.0 || >= 16.0.0이되야지만 설치가 가능하다.

npx create-next-app next-app

npm run dev 

로 프로젝트 실행하기

---

data fetching

page -> launches

import React, { useState,useEffect } 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>
        <ul>
            {data.map((launch,index)=>(
                <li key={index}>{launch.mission_name}</li>
            ))}
        </ul>
    </div>
  )
}

cna에서 내가 만든 페이지가 보고 싶을 때는 url에 component의 이름을 줌으로써 볼 수 있다.

지금 현재는 CSR로 만들어져 있다.

getServerSideProps

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

SSR쓰럽게 만들어보기

//import React, { useState,useEffect } 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>
        <ul>
            {data.map((launch,index)=>(
                <li key={index}>{index +1}.{launch.mission_name}</li>
            ))}
        </ul>
    </div>
  )
}

export async function getServerSideProps(context) {
    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 fetching을 확인하면 확인되지 않는다.

getStaticProps

//import React, { useState,useEffect } 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>
        <ul>
            {data.map((launch,index)=>(
                <li key={index}>{index +1}.{launch.mission_name}</li>
            ))}
        </ul>
    </div>
  )
}

export async function getStaticProps(context) {
  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
  }
}

npm run build 한번만 빌드해와서 어딘가에 데이터가 저장되어 있다.
serverside는 클라이언트가 새로 요청할때마다 서버가 요청 받을때마다 api을 요청하여 받아온다.

---