next.js

[Next.js] 프로젝트 생성

Next.js는 서버사이드렌더링을 지원해주는 프레임워크이다.서버사이드 렌더링의 장점은 아래 포스팅에 정리해놓았다. SSR의 경험을 쌓고 싶어서 Next.js를 사용해보려고 한다.2024.05.30 - [Front-end/React] - [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리 [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPAworld-developer.tistory.com프로젝트 생성하기npx create-next-app@latest 만약 typescript를 사용하고..

[React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리

1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPA는 말 그대로 하나의 페이지로 구현되며 새로운 페이지를 받아오지 않는다. 최초에 첫 페이지에서 데이터를 모두 불러온 이후에 페이지 전환 단계에서는 자바스크립트와 브러우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. SPA는 최초 첫 페이지를 받을 때는 SSR을 사용할 수 있으며 이후에는 CSR을 이용하여 렌더링을 진행해야 한다. 1.1 SPA에서 페이지 전환이 일어나는 과정을 설명하시오페이지 전환 시..