csr 3

[Next.js] - 코드잇(단기 심화) 프로젝트 성능 최적화

✅ 프로젝트 성능 최적화 — 어떻게 접근했는가?Next.js의 가장 큰 장점 중 하나는 기본적으로 자동 코드 분할과 SSR(서버사이드 렌더링)을 지원한다는 점이다.하지만 프로젝트 규모가 커지거나 다양한 외부 라이브러리를 쓰다 보면 불필요한 리렌더링, 번들 크기 증가, 느린 TTFB 등이 성능 이슈로 이어질 수 있다.단기 심화 과정에서 배운 이론에 그치지 않고, 개인적으로 블로그와 기술 아티클을 찾아보며 실습을 병행했습니다.이러한 능동적인 학습을 통해 최적화 전략들을 빠르게 이해하고 적용할 수 있었으며, 새로운 기술을 빠르게 익히는 데 강점을 가지고 있음을 직접 확인할 수 있었다.이미지 최적화→ next/image를 활용해 lazy loading 및 자동 리사이징 적용→ 빠른 이미지 로딩이 필요할 땐 pr..

frontend 2025.04.18

[Next.js] 최적화(데이터 패칭) 및 성능 비교

최적화란?프론트엔드에서 최적화는 웹 페이지나 애플리케이션의 성능을 개선하기 위해 자원(로딩 시간, CPU 사용량, 메모리 등)을 효율적으로 관리하고, 사용자 경험을 향상시키는 과정입니다. 주로 이미지 압축, 코드 분할, 캐싱, 비동기 로딩 등을 통해 웹 애플리케이션의 속도와 반응성을 높이는 것이 포함됩니다. 목표 (비동기 로딩 - 데이터 패칭)Next.js에서 CSR 방식과 SSR 방식을 사용하여 LightHouse 퍼포먼스 성능 비교Next.js의 CSR과 SSR 방식에서 LightHouse 성능 점수를 비교하여 각 방식의 성능을 평가합니다.CSR 방식과 SSR 방식의 초기 로딩 속도 비교CSR 방식과 SSR 방식 각각의 초기 페이지 로딩 시간을 비교하여 어떤 방식이 더 빠른지 분석합니다.CSR 방식과..

frontend 2025.01.31

[Next.js]렌더링 방식(CSR, SSR, SSG, ISR) - 퍼포먼스 성능 비교

렌더링이란?쉽게 말해서 우리가 평소에 핸드폰으로 유튜브를 보거나 컴퓨터를 통해서 쇼핑몰 사이트에서 쇼핑을 하듯이 화면에 출력이 되는걸 렌더링이라고 표현을 해! 프코 : 인제 렌더링이 무엇인지 바로 느낌이 오지??자 그럼 렌더링 방식은 무엇이냐?먼저 초창기에는 MPA(Multi-Page-Application)라는 SSR방식으로 화면을 렌더링 했었어.여러 개의 정적 페이지를 미리 만들어 놓은 후 각 페이지별로 서버에 요청을 해서 HTML 문서를 서버에서 받아오는 방식이러한 MPA의 방식은 미리 만들어 놓은 페이지를 다른 페이지로 이동 시 전체 페이지를 새로 로드하므로, 깜빡거리는 느낌이 사용자 경험이 떨어질 수 있고, 오래 걸리는 게 단점이었어!MPA 방식의 단점을 보완하고자 SPA(Single-Page-A..

frontend 2025.01.25