Quiz - Next, Suspense, LCP, FCP
1. hydration에 대해 알고 있나요?
- hydration은 SSR(server-side rendering)이나 SSG(static site generation)을 실행해 생성된 HTML을 브라우저에서 초기화하는 프로세스를 말합니다.
- React의 경우, 서버에서 생성된 HTML에 React 컴포넌트 로직을 넣어줍니다.
2. Next의 렌더링 수행 방식에 대해 설명해주세요.
- Next는 모든 페이지를 사전 렌더링합니다.
- 각 페이지에 필요한 최소한의 JavaScript 파일과 함께 HTML을 만들고, 브라우저에 페이지가 로드될 때 JavaScript 코드가 실행되면서 페이지가 상호작용할 수 있게 만듭니다. 이를 hydration이라고 합니다.
2.1 Next의 사전 렌더링 방식 2가지에 대해서 설명해주세요.
- Next는 Static Site Generation과 Server-side Rendering 2가지 방식으로 사전렌더링합니다.
- SSG 방식은 HTML이 빌드할 때 생성되서 페이지 요청시 재사용됩니다.
- SSR 방식은 HTML이 요청할 때 만들어집니다.
3. Next의 장점에 대해서 얘기해주세요.
- 사전 렌더링하여 Client-Side Rendering보다 더 빠르게 페이지를 불어올 수 있습니다.
- 동적 라우트을 지원합니다.
- 페이지 기반 라우트 시스템을 제공하기 때문에 별도의 라우트 라이브러리가 필요하지 않습니다.
- 자동 코드 분할 기능 덕분에 각 페이지와 모든 가져오기가 번들로 묶어서 함께 제공됩니다.
- 코드 변경사항을 저장하면 자동으로 리로드해주는 빠른 refresh 기능을 제공합니다.
4. Next를 구성하는 기본 설정 파일에 대해서 알고 있나요?
- app, document, error, 404 파일 등이 있습니다.
- app 파일 : 모든 페이지의 공통 페이지 역할을 합니다.
- document 파일 :
<html>, <body> 태그를 보강하는데 사용합니다.
- error 파일 : 에러가 발생했을 때 보이는 에러 페이지입니다.
5. Next에서 Data feching 관련된 함수에는 무엇이 있나요?
- getInitialProps, getStaticProps, getStaticPath, getServerSideProps 함수가 있습니다.
5.1 각 함수는 어떤 경우 사용되는지 설명해주세요.
- getInitialProps는 초기 데이터를 가져와서 페이지를 렌더링할 때 사용하지만, 자동 최적화 기능이 지원되지 않아서 다른 함수 사용을 권장합니다.
- getServerSideProps는 요청했을 때의 데이터를 사용하여 페이지를 렌더링 해야할 때 사용합니다.
- getStaticProps는 빌드 시 사용 가능한 데이터를 사용해서 페이지를 렌더링할 때, SEO를 위해 페이지가 사전 렌더링해야 할 때 사용합니다.
- getStaticPaths는 동적 라우트를 사용한 페이지를 정적으로 사전 렌더링해야 할 때 사용합니다.
6. Suspense가 뭔가요?
- 자식 컴포넌트가 로딩을 마칠 때까지 fallback을 보여주는 컴포넌트입니다.
6.1 Suspense를 언제 사용할 수 있나요?
- suspense를 사용할 수 있는 프레임워크(Relay, Next)에서 데이터를 가져올 때 suspense 컴포넌트를 사용합니다.
lazy를 사용한 지연 로딩 컴포넌트 코드는 suspense 컴포넌트를 사용합니다.
7. LCP가 뭔가요?
- LCP는 Large Contentful Paint의 약어로, 웹 페이지에서 가장 큰 컨텐츠 요소를 로드해서 사용자가 볼 수 있는데 걸리는 시간을 나타낸 성능지표입니다.
7.1 LCP가 저하되는 원인에 대해 얘기해주세요.
- 느린 서버 응답 시간, JavaScript와 CSS의 렌더링 블로킹, 느린 리소스 로딩 시간, 클라이언트 사이드 렌더링에 의해 LCP가 저하됩니다.
7.1 LCP를 개선하는 방법에는 무엇이 있나요?
- 느린 서버 응답 시간
- 서버 최적화합니다.
- 사용자와 가까운 CDN을 사용합니다.
- 자원을 캐쉬합니다.
- html 파일을 우선 캐쉬하도록 합니다.
- 중요한 컨텐츠를 나타내는데 사용되는 3rd 파티 자원 요청을 일찍합니다.
- JavaScript와 CSS의 렌더링 블로킹
- css 파일을 최소화하고 중요하지 않은 CSS를 지연시켜서 CSS의 렌더링 블록킹 시간을 줄입니다.
- JavaScript 파일을 최소화하고, 압축하고, 사용하지 않은 JavaScript 파일을 지연시켜서 JavaScript의 렌더링 블록킹 시간을 줄입니다.
- 느린 리소스 로드 시간
- 이미지를 최적화하고 압축합니다.
- 중요한 리소스를
<link rel="preload">를 사용하여 미리 로드합니다.
- 텍스트 파일을 Gzip과 Brotli와 같은 압축 알고리즘을 사용하여 압축합니다.
- Service Worker를 사용하여 리소스를 캐시합니다.
- Client-Side Rendering
- 핵심 JavaScript를 최소화합니다.
- Server-Side Rendering합니다.
- 사전 렌더링합니다.
8. FCP가 뭔가요?
- FCP, First Contentful Paint의 약어로 브라우저가 웹 페이지의 첫 번째 컨텐츠 요소를 렌더링하는 데 걸린 시간을 나타낸 성능지표입니다.
8.1 FCP를 개선하는 방법에는 무엇이 있나요?
- HTML, CSS, JavaScript 파일의 크기를 줄이고 서버에 대한 요청 수를 최소화하여 웹 페이지의 전체 로드를 최적화할 수 있습니다.
- 로드 프로세스에서 우선순위를 지정하여 중요한 리소스의 로드를 최적화할 수 있습니다.
참고
