기본적으로 CRA로 설치한 리액트는 SPA/CSR로 동작한다.
브라우저가 서버에 HTMl과 javscript(이하 js) 파일을 요청하고 로드되면, 사용자의 상호작용에 따라 js를 이용해서 동적으로 렌더링 시키는 기법이다.
장점
첫 로딩만 기다리면, 동적으로 빠르게 렌더링 되기 때문에 사용자 경험(UX)이 좋다.
서버에 요청하는 횟수가 훨씬 적기 때문에(처음에 다 가져오기 때문에) 서버의 부담이 덜하다.
단점
첫 로딩에서 모든 스크립트 파일이 로드될 때까지 기다려야한다.
가장 큰 문제는 SEO, 검색엔진 최적화에 문제가 있다.
= 대부분의 검색엔진들은 JS파일을 읽지 못하기 때문이다. 이 문제가 크게 작용해 SSR이 등장한 이유도 있어보인다.
SSR같은 경우에는 모든 파일을 HTML로 변환하여 관리하기때문에 SEO에 강점이 있다.
기존의 SPA - SSR 방식은 위에 작성한 단점이 크게 작용하여, SEO의 문제가 크게 부각되었다.
특히 블로그나 상세페이지, 게시판, 포트폴리오 등 글자들이 검색되어야할 때 SPA-SSR을 사용한다.
하나의 프로젝트 안에서도 CSR과 SSR을 함께 사용하여 효율을 높이는 것으로 알고 있다.
SEO 측면에서 기존의 문제를 해결하기 위해 SPA-SSR의 도입이 필요하다.
https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
https://github.com/vercel/next.js/ (Next.js Github 레포지토리)
디렉토리 : next.js/packages/create-next-app/templates/default/pages/_app.js
_app.js
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
기본적으로 _app.js
가 실행되는데, 이는 함수로 구성되어있다. 함수 이름은 MyApp이 초깃값이다.
CSS관리를 위해 global.css를 import해주고있고, 함수 내부에서는 components
와 pageProps
두 개의 매개 변수를 props로 받는다. 이 함수의 결과는 어떤 컴포넌트를 불러와 실행하느냐에 달려있는데, router 기반이 아니라 page기반이기 때문에 어떤 페이지냐의 정보를 pageProps가 spread로 다 컴포넌트에 뿌려주는 듯하다.
NEXT를 공부하며, 더 깊이 알아봐야겠다.