next.js
next는 리액트 프레임워크, 실무를 위해 더 갖춰진게 많다.
하지만 자유도는 줄어드는 단점이 있다.
next가 첫 방문시에는 서버사이드 렝더링을 해주고 그 다음부터 클라이언트 사이드 렌더링을 해준다
따라서 검색엔진 로봇처럼 첫 방문만 하는 친구들은 SSR을 통해 제대로된 화면 데이터를 긁어가고,
사용자들은 페이지 이동 시 CSR을 통해 원활한 SPA 경험을 할 수 있다.
CRA로 짜면 CSR인데 직접 SSR을 붙일 수 도 있다.
서버사이드렌더링은 핵심 두가지가 있다. pre-Render와 ssr
preRender: 검색엔진이라는걸 알아차렸을때만 백엔드서버에서 데이터를 받아서 HTML을 완성해서 주고 일반 유저일때는 기존 리액트로 주는 방식
SSR: 첫 방문만 전통적인 방법이고 그 후 페이지 전환할땐 리액트 방식, 하이브리드 느낌임
대부분 실무에선 서버사이드렌더링 + 코드스플리팅 적용한다, seo도 중요
코드스플리팅은 csr에서 /blog에 들어갔는데 프론트서버에게 받는건 html과 js 모든 파일을 다 받는다.
그래서 /blog에 들어갈 파일만 부분적으로 받는다.
Next를 안써도 되는 페이지?
어드민 페이지는 리액트 쓰는게 다음. 개발자 경험이 좋지 않겠지만 큰 상관없다.
인터렉션을 위한 로딩창은 언제 써야될까?
리액트라면 프론트엔드 서버 갔다가 html과 js를 받아온다. 데이터없이. 그래서 아직 데이터를 못받아왔으니까 로딩창을 보여주고 로딩하는동안 백엔드 서버에서 데이터를 받아와야된다.
그에 반해 서버사이드 렌더링을 쓰면 브라우저를 통해 첫 방문한 페이지만 브라우저 -> 프론트서버 -> 백엔드 서버 -> 데이터베이스 -> 백엔드 서버 -> 프론트 서버 -> 브라우저 과정을 거친다. 첫 방문엔 데이터를 다 받아온다.
그 다음 다른페이지 방문하면 백엔드 서버한테 데이터만 받아온다. 이 때 로딩창이 생겨야 된다.
설정하기
-
front와 back 폴더를 구분하여 만들어 주고 먼저 front 폴더 안에서 npm init을 해준다.
-
npm i next react react-dom을 설치해준다. -
package.json에서 scripts안에 test를 지우고
"dev": "next"으로 바꿔준다.
스크립트를 실행하는 명령어는npm run이고npm run dev를 치면npm run next가 실행되는 것이다. -
next는 정확히
pages라는 폴더를 만들고 그 안에 페이지들을 정의해야한다. next가 pages를 인식해서 다 개별적인 폴더로 인식한다. 쉽게 말하면 코드 스플리팅된 컴포넌트로 만들어 준다.
기존에 next를 쓰지않은 리액트는 react-router-dom으로 페이지 라우터를 해줬었는데 그냥 pages폴더 안에 컴포넌트별로 작성만 하면 페이지 이름이 리소스 이름인 페이지 인것이다! 대박적이다.
추가사항
next에선 import React from 'react'는 굳이 안써도 된다
next에서 _app.js는 초기에 기본 페이지들의 component로 사용된다. 꼭 기억하자
CORS 에러라는 것은 브라우저에서 domain 주소가 다르면 요청을 막아버리는 것이다.
=> 자세히 알기
브라우저가 리액트면, 프론트 서버는 노드, 백엔드 서버에 노드가 하나 더있는 것이다. (서버를 두개로 구축한다. 노드가 두개)
여기서 프론트서버란 웹팩 데브서버나 클라우드서버를 말한다. 프론트서버에서 백엔드서버로 요청을 보내는 것
즉, 서버 끼리 통신을 할 때는 cors에러가 발생 안된다는것도 기억하자.
=> 프론트 서버 / 백엔드 서버 (개념)
