반응형 개발/Next.js36 React Server Component React Server Component Next app-router에서 app 폴더에 컴포넌트를 만들면 자동으로 서버 컴포넌트(이하 RSC)로 만들어진다. 그런데 SSR과 RSC는 어떤 차이일까? SSR 일단 SSR은 다음과 같다. (이미지에 DOM이라고 적었는데 document로 정정) 먼저 서버에서 document를 렌더링하고, JS 번들을 다운받아 hydration이 이루어진다. 그 후 data fetching을 한다. fetching 중에는 loading UI가 나타나고, fetching이 완료되면 나머지 content들이 paint된다. 네트워크탭에서는 다음과 같이 확인할 수 있다. Data fetching을 렌더링 전에 수행하는 방법 그럼.. 만약 data fetching을 서버에서 미리 한.. 2023. 10. 12. 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. 이전 1 2 3 4 5 ··· 9 다음 반응형
