반응형 개발/Next.js35 Next App router에서 use client가 CSR을 뜻하지는 않는다. Next App router에서 use client가 CSR을 뜻하지는 않는다. next app router를 이용해서 블로그를 만들고 있는데, javscript를 꺼도 클라이언트 컴포넌트가 렌더링되었다. "use client"; import { gql } from "@apollo/client"; import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"; import React from "react"; const PAGE_CONTENT_QUERY = gql` query Article($ItemId: ItemId!) { aritlcle(filter: { id: { eq: $ItemId } }) { id markdown(ma.. 2023. 10. 5. Next.js-before-hydration, Next.js-hydration Next.js-before-hydration, Next.js-hydration 회사 홈페이지 performance탭에서 timing을 보니 next.js-before-hydration, next.js-hydration이 있었다. SSR 기능이라고 어렴풋이 알고 있었지만 정확한 정의를 몰라서 이번기회에 살펴보았다. hydration와 next렌더링 방식 일단 네트워크탭을 보면 document 데이터를 먼저 다운받고 그 이후 js파일들을 다운받고 있다. Next.js의 렌더링과정을 복기해보면 Next server에서 html을 만들어 보내주고 이후에 React로 CSR이 작동하면서 js가 작동한다. 이때 2번 작업을 hydration이라고 하는데 물을 공급하는 것 처럼 html에 js를 뿌려주는 것을 상상했.. 2023. 9. 2. afterInteractive, lazyOnLoad lazyOnLoad와 afterInteractive를 사용하는 이유 GTM, Naver Script, 채널톡 등 마케팅툴들은 html 이후에 로드되어도 무방한 써드파티 라이브러리이다. (반대로 말하면 일단 빨리 페이지를 로드해서 사용자에게 보여주는 것이 중요하다.) 하지만 이 써드파티 라이브러리들이 html 로드를 차단하고 있었다. lazyOnLoad와 afterInteractive는 Next.js의 라우팅과 페이지 로딩 관련 옵션인데, 이 둘을 이용하면 써드파티 스크립트를 비동기 로드 시켜서 써드파티 스크립트가 html 로딩을 차단 시키지 않도록 할 수 있다. 결과적으로 초기 로딩 속도를 빠르게 하여 사용자 경험을 개선할 수 있다. lazyOnLoad와 afterInteractive의 차이 lazyOn.. 2023. 6. 7. Next에서 Sharp로 이미지 로드하기 Sharp Sharp는 Node.js의 빠른 오픈 소스 이미지 처리 모듈이다. 압축되지 않은 이미지 데이터의 일부 영역만 메모리에 저장하므로 처리 속도가 빠르다. Sharp는 여러 이미지 형식(JPEG,PNG,GIF,Webp,Avif,SVG)과 압축되지 않은 원시 픽셀 데이터도 지원한다. (Node.js 버전 10 이상을 권장한다.) 단, OS간의 호환성이슈가 있음을 유의해야 한다. 예를들어 로컬이 윈도우, 배포시 사용하는 aws 환경이 리눅스라면 로컬에서 다운받은 윈도우 환경의 Sharp는 배포시(혹은 후에) 리눅스 환경에서 찾아지지 않는 경우도 있다고 한다. Next/Image next/image는 Next.js에서 제공하는 Image 최적화 컴포넌트이다. 이때 최적화를 위해 sharp와 squoos.. 2023. 6. 1. 이전 1 2 3 4 5 ··· 9 다음 반응형
