Next.js 2

[Next.js] pages 폴더 라우팅 구조 및 Link 이동 하기

📑Next.js pages 폴더구조 이해하기 Next.js에로 프로젝트를 생성하면 자동으로 pages 폴더가 생성이 된다. Next.js 특징으로 폴더 구조 내 파일 이름으로 라우팅을 자동으로 잡아주는 것이 가능하다. 기본으로 생성되는 index페이지 외 about.jsx, users.jsx 페이지를 추가로 생성해 줬다. next.js에서는 별다른 작업이 없어도 자동적으로 해당 페이지에 접근이 가능하다. export default function about() { return ( About ) } export default function users() { return ( users ) } '/about' → /pages/about.jsx 파일 화면 접근 '/users' → /pages/users.jsx..

FrontEnd/React 2023.03.29

React 서버사이드랜더링 적용을 위한 Next.js

🔎서버사이드 랜더링이란? Server Side Rendering(SSR)로 브라우저에서 화면을 그려주는 주체가 서버인 경우이다. 반대의 개념으로는 Client Side Rendering(CSR)이 있다. 우리가 사용하는 react는 기본적으로 CSR을 이용한다. 하지만, SSR이 주는 장점들이 있어서 SSR 환경에서 개발이 필요할 때가 있다. 👏서버사이드랜더링(SSR) 장점 검색엔진(SEO) 최적화, 검색엔진에서 웹페이지 수집 가능 초기 렌더링 속도가 CSR에 비해 빠르다. 🥰Next.js 이용하기 서버사이드랜더링을 적용을 하려면 코드로도 가능하지만 Next.js라는 프레임워크를 이용하면 간단한 설정으로 SSR 설정이 가능해진다. 🙂Next.js 의 또 다른 장점은? 1️⃣코드스플리팅 코드스플리팅은 빌드..

FrontEnd/React 2023.03.26