React로 SNS 만들기 - Next.js(1)

1. hello, Next.js

SSR과 SPA(CSR)의 차이점

(1) SSR

• 브라우저 => 프론트서버 => 백엔드서버 => 데이터베이스 순서대로 데이터 요청 후,
  다시 데이터베이스 = 백엔드서버 => 프론트서버 => 브라우저 순서대로 데이터를 줌
• 이 과정에서 프론트서버가 받은 데이터를 html에 합쳐서 브라우저에 보냄
• 왕복과정이 복잡한 편

• 장단점
  • 장점
    • 전체가 한번에 그려짐
  • 단점
    • 로딩 속도가 오래 걸림

(2) SPA(CSR)

• 브라우저는 프론트서버에 js, css, html, img 같은 파일들만 먼저 받아 사용자 화면에 그림
• 이외의 다른 데이터들이 받아지기 전까지 로딩중임을 표시
• 브라우저는 백엔드서버에 바로 데이터를 요청함
• 브라우저가 데이터를 받으면 사용자 화면에 그려짐
• 리액트, 뷰, 스벨트, 앵귤러와 같은 싱글 페이지 어플리케이션이 구동하는 방식

• 장단점
  • 장점
    • 사용자에게 먼저 화면을 빠르게 보여줌
  • 단점
    • 데이터까지 받아오는 전체적인 시간 사실 더 걸릴 수 있음
    • 첫 화면에 로딩창만 보여지게 되면 검색엔진 순위가 확 떨어질 수도 있음

2. Next.js 역할 소개

SAP(CSR)의 검색엔진에 관한 단점을 보완하기 위한 방법

(1) SSR

• 프리랜더
  검색엔진을 알아차린 후 검색엔진일때만 백엔드서버에서 받은 데이터를 html과 합쳐서 보여주고 일반 유저일때는 기존 리액트 방식으로 보여줌
• SSR
  첫 방문만 전통적인 방법대로 하고 그 다음 페이지 전환일 때는 리액트 방식으로 함

(2) 코드 스플리팅

필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고, 유저가 현재 필요하지 않은 코드는 로드 하지 않음

Next.js를 쓰지 않아도 되는 사이트는?
어드민 페이지
=> 검색엔진에 나올 일도 없고 사용자가 보는 사이트의 속도만큼 중요하지 않음

3. 실전 예제와 준비사항

node 버전과 npm 버전 확인!

4. Next.js 실행해보기

• 터미널 사용

  npm init
  npm i next@9
  npm i react react-dom

• package.json

  test 부분을 바꿔줌
  => "dev": "next",
  "build": "next build"

• pages 폴더 생성 후 안에 index.js 파일 생성

  const Home = () => {
    return <div>Hello Next!</div>;
  };
  export default Home;

=> next를 사용하면 react를 불러오지 않아도 됨