Next.js
-
[포트폴리오] 포트폴리오 웹사이트 최적화 - 2 (next/dynamic를 사용한 code splitting)Next.js 2024. 2. 14. 22:30
라이트 하우스의 검사결과를 보고 번들 크기를 줄여야 겠다는 생각이 들었다 구글링을 해보니 next/analyze-bundler를 많이 사용하고 있었다 시각적으로 자바스크립트 번들 파일들을 볼 수 있어서 해당 라이브러리를 사용하기로 했다 https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer Optimizing: Bundle Analyzer | Next.js Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin. nextjs.org 설치 npm i @next/bundle-analyzer # or yarn add @next/..
-
SSR, CSR, SSGTIL 2024. 1. 26. 18:00
SSR, CSR, SSG SSR, CSR, SSG, 모두 다 웹페이지가 렌더링하는 방식들임 크게 CSR(Client Side Rendering)과 SSR(Server Side Rendering)으로 나뉨. 이외에도 SSG와 ISR라는 방법도 있음 이걸 얘기하기 전에 연관되는 개념으로 SPA와 MPA에 알아야 함 SPA, MPA SPA(single page application) 한 개의 페이지로 구성된 어플리케이션 웹 어플리케이션에 필요한 모든 정적 리소스(HTML, CSS, Javascript 등)을 최초 렌더링 시 한 번에 다운로드 함. 그 후 새로운 요청이 있을 때 서버에 필요한 데이터만 요청해 받아서 페이지를 갱신함 결국 SPA를 CSR 방식으로 렌더링한다고 할 수 있음(하지만 SPA가 전부 CS..