인프런 강의 듣고 정리하기
[리뉴얼] React로 NodeBird SNS 만들기

1. Next.js 역할 소개

SSR과 SPA

렌더링이란?
웹페이지 접속 시 페이지를 화면에 그려주는 것

SSR(Server Side Rendering)

요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식

전체가 한번에 그려지지만 로딩속도가 느리다.

SPA(Single Page App) & CSR

최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션. 이러한 방식을 클라이언트사이드 렌더링(CRS) 방식이라고 함

• 브라우저는 프론트 서버에 데이터가 없는 js, css, html, img 등 파일을 먼저 받아서 화면을 그려줌
• 데이터를 받을 때 까지 로딩중을 표시
• 브라우저는 백엔드 서버에 바로 데이터 요청

첫 화면에 로딩창만 보여지게 되면 검색엔진 순위가 떨어질 수 있음

---

SAP의 검색엔진 단점을 보완하기 위한 방법

1. SSR

• Pre-rendering
  사전에 html파일을 렌더링 한다는 것
  즉 html을 미리 생성하고 최소한의 js를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지 js를 불러와 화면에 렌더링 시켜주는 것 (복잡하니까 지금은 쓰지 말자!)
• SSR
  첫 방문만 전통적인 방법대로 하고 그 다음 페이지 전환일 때는 리액트 방식으로 함

2. 코드 스플리팅
지금 당장 필요한 코드가 아니라면 따로 분리시켜서 나중에 필요할 때 불러와서 사용 이를 통해 페이지의 로딩 속도를 개선 할 수 있다.

2. Next.js 실행해보기

설치

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

---

package.json

test를 dev로 바꾸세영

package.json

{
  "name": "react-sns-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next"
  },

---

pages 폴더 생성

pages/index.js

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

next를 사용하면 import React from 'react'를 불러오지 않아도 된다.

🤷‍♀️ 왜!?

• next가 pages폴더를 인식을 해서 안에 있는 파일들을 개별적인 페이지(코드스플리팅된 컴포넌트)로 만들어줌
  폴더 이름은 무조건 pages이어야 함

📚 참고
SSR vs SPA
리액트 프로젝트 코드 스플리팅 정복하기