8. Next.js

저번 글에서 SPA 장점은 웹사이트를 앱처럼 개발한 것이니 아이콘 등을 전부 지원하니 한번 개발하면 끝, HTML 내용을 전체 불러오지 않으니 페이지 이동방식보다 데이터 소모가 적다고 했다 : 하지만, 가장 큰 단점은 검색엔진의 노출이 안되는데, 여기에 SSR이라는 해결방식이 존재한다고 했었다

 

여기서 SEO(Search Engine Optimization, 검색 엔진 추적)를 알아볼 필요가 있다 : 구글, 네이버 등 다양한 검색 엔진들이 있음 : 이 검색 엔진들은 봇이 존재해서, 매 시간마다 웹사이트 내용을 한 번씩 모두 읽어드린 다음에 그 검색 엔진을 만듦 : 그래서 어떤 키워드하고 매칭되는 게 있으면 해당 페이지 내용을 보여줌 : 그래서 이러한 구글 등이 우리의 웹사이트 내용을 잘 긁어가야 구글 검색창에 노출될 확률이 높아지는 것

 

하지만 여기서 문제가 존재함 : 클라이언트(구글봇)가 서버한테 HTML을 달라고 요청 : 해당 서버는 React로 구현 : 그러면 이 React는 클라이언트한테 컨텐츠가 아무것도 없는 HTML 내용(예 - <div id="root"></div>)을 줌 : 클라이언트는 서버에서 HTML을 받아오지만, 실제 콘텐츠는 JS가 실행된 후 렌더링됨 : 그러면 결국에 클라이언트는 '이 웹사이트에는 콘텐츠가 없네?'라고 파악을 하게 됨 : 즉, 검색봇은 HTML 내용 안에 컨텐츠가 없으니 이 웹사이트 페이지에는 컨텐츠가 없다고 판단을 함 : 즉, 우리 웹사이트는 실제로 콘텐츠가 있음에도 React 가지고 제작된 어플리케이션이 응답을 할 때는 HTML 내용에 컨텐츠가 없음 

 

여기서 말하는 것이 바로 CSR임 : 클라이언트 측에서 렌더링을 한다 : 즉, 클라이언트 측에서 JS 가지고 화면을 그려준다는 의미를 가지고 CSR이라고 함 : 그러면 SSR은 JS가 화면을 렌더링 시켜주는 것임 : React지만 서버 단에서 HTML 내용 컨텐츠까지 완벽하게 다 준비해 준 다음에 클라이언트한테 넘겨주자 해서 나온 게 SSR의 개념 : 그래서 Next.JS라고 하는 이 프레임워크가 SSR이라고 하는 것을 지원하는 것

 

SSR이란 무엇인가?

SSR(Server-Side Rendering, 서버 사이드 렌더링)이란 페이지를 서버에서 렌더링하여 클라이언트(브라우저)로 전달하는 방식이다. 첫 페이지 로딩 속도가 빠르나, 서버 부하가 증가하고, 페이지간 전환 속도가 느릴 수 있다.

 

CSR이란 무엇인가?

CSR(Client-Side Rendering, 클라이언트 사이드 렌더링)이란 페이지 로딩 후, 브라우저에서 JavaScript가 실행되어 콘텐츠를 렌더링하는 방식이다. 페이지 전환이 빠르고 서버 부담이 감소하나, 초기 로딩 속도가 느릴 수 있다.

 

Next.js란?

Next.js는 React 기반의 프레임워크로, 프로젝트의 특성에 맞게 SSR과 CSR 등의 렌더링 방식을 선택할 수 있는 것이 특징이며, 자동 코드 분할, API 라우팅 등 유용한 기능을 제공한다.

 

 

npx create-next-app@latest : npm run dev

global.css는 전역(Global) 스타일을 정의하는 CSS 파일 : 즉, 앱 전체에 공통으로 적용되는 글꼴, 여백, 배경색 등의 관련 코드를 넣는 곳 : 기존 내용 삭제 후 와일드 카드(*)를 통해 폰트 지정 

layout.js의 title(웹사이트 제목) : layout.js는 app 디렉토리 내에서 공통 레이아웃을 정의하는 파일로, 모든 페이지가 공유하는 UI 구조를 설정할 수 있음 : 일반적으로 헤더, 푸터, 네비게이션 바 등의 공통 UI 요소를 포함 : import에 사용할 글꼴 수정 후, weight 설정 : body 태그도 같이 사용할 글꼴로 수정 : 모든 텍스트 줄 높이 설정 : 즉, global.css를 import하여 전체 페이지에 일관된 구조 및 UI를 적용 : 이제 애플리케이션을 위한 기본 설정 완료

 

tailwind.config.mjs는 Tailwind CSS의 사용자 설정 파일로, 프로젝트에 맞게 Tailwind를 커스터마이징하기 위해 사용 : 즉, tailwind CSS를 사용자만의 스타일로 커스터마이징하는 설정 파일

 

백틱(` `)을 통해 템플릿 리터럴(${})을 활성화시켜줄 수 있음 : 문자열 안에서 변수를 넣거나 줄바꿈을 자유롭게 할 수 있는 문자열 표현 방식

 

유튜브의 Next.js 포트폴리오 영상(https://youtu.be/Y2kGqbzvAn4?si=EQEjMeqwB6n8Pd7P)을 통해 코드 이해하며 제작하기 완료