sooleeandtomas

크롬의 lighthouse에서 확인할 수 있는 최적화에는 LCP, FCP가 있습니다. FCP: First Contentful Paint 초기 DOM 콘텐츠를 렌더링하기까지 걸리는 시간을 말합니다. LCP: Largest Contentful Paint 페이지의 주요 내용이 화면에 렌더링되기까지 걸리는 시간을 말합니다. 사용자가 빈 화면만 보고 있다면 페이지가 로드되고 있는지 알 수 없습니다. 하지만, FCP이후, 첫번째 콘텐츠 비트를 렌더링하여 첫 피드백을 사용자에게 제공하기 때문에, 사용자가 페이지가 로딩 되고있음을 느끼게 됩니다. (FCP 이후엔 사용자가 조금더 인내심을 갖고 기다릴 수 있게 되는..) 그래서 저는 최적화의 첫단추로, FCP에 조금 더 초점을 맞춰보려 합니다. FCP의 속도는 아래와 같..

a와 Link태그의 차이에 대해 알아보겠습니다! a태그는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. 하이퍼링크란 주소와 주소가 비선형적으로 엮인 인터페이스를 의미합니다. 주소와 주소 사이를 중간 과정 없이 옮겨다닐 수 있는 특징이 있습니다. download, href, hreflang, ping, referrerpolicy, rel, target, type을 프롭으로 가집니다. next의 Link태그는 prefetching, client-side navigation을 위해 a태그를 확장한 리액트 컴포넌트입니다. a태그를 확장했다는 말은, next에서 를 사용하게 되면 태그가 생성된다는 것입니다. a의 사..

getServerSideProps 만약 페이지에서 getServerSideProps를 사용한다면, next.js는 페이지를 요청할 때마다 데이터를 가져옵니다. function Page({ data }) { // Render data... } // This gets called on every request export async function getServerSideProps() { // Fetch data from external API const res = await fetch(`https://.../data`) const data = await res.json() return { props: { data } } // 페이지의 컴포넌트에 이 props를 전달하게 된다. } export default..

CSR 2021년 대 흥행했던 react는 이제 점점 막을 내리는 듯 보입니다. 그것은 바로 아래의 CSR 치명적 단점때문입니다. 1. 구글 검색 노출 (안습) 2. 페이지 로딩속도 (안습) 이 두가지가 사이트 수익성에 치명적 악영향을 끼치는 것이 큰 문제입니다. SSR 이에 반해 SSR은 아래와 같은 장점을 가지고 있습니다. 다른말로, 이제 대세는 SSR입니다.. 1. 구글 검색 노출 (좋음) 2. CSR을 선택적으로 적용할 수 있음. 3. 캐싱이 쉬움 4. 최적화된 이미지 렌더링이 가능 .... 등등 Next 🙌 react기반의 SSR로, 대세 오브 SSR은 next입니다. 새회사에서 next를 많이 사용하기도 하고 대세니까 next에 대해 알아보겠습니다. 아래 그림을 보면, next가 팀 버너스리의..