Next.js SSR vs CSR: 더 나은 온실 점수에 대한 핵심 웹 비틀을 수정하는 방법

핵심 웹 Vitals: 방법Next.jsSSR 부스트 등대 점수

지난 8년간 React 애플리케이션을 구축했습니다. 첫번째 5를 위해, 나는 클라이언트 측에 의하여 렌더링되는 (CSR) 앱을 발송했습니다. 그들은 나의 국부적으로 기계에 빠릅니다. 그러나 실제 세계에, 그들은 끌었다.

다음 것구글 +Core Web Vitals가 2021년에 순위를 올렸습니다. 나는 내 Lighthouse 점수를 확인 기억한다. 그들은 끔찍했다. LCP는 4 초 이상이었습니다. CLS는 높았습니다. JavaScript 번들은 bloated되었습니다.

다음으로 전환했습니다.js 서버 측 렌더링 (SSR). 모든 것을 변경했습니다.

이 블로그는 이론이 아닙니다. 전자 상거래, SaaS 및 마케팅 페이지에 대한 생산 현장에 이것을 사용했습니다. 나는 정확한 미터, 비교표 및 피하기 위해 몇 가지 실수를 보여줄 것입니다.

기본으로 시작합시다.

핵심 웹 비틀은 무엇입니까?

Core Web Vitals는 사용자 경험을 측정하는 세 가지 메트릭 Google 용도입니다.

• 가장 큰 Contentful 페인트 (LCP)– 주요 콘텐츠로드가 얼마나 빠릅니다. 대상: 2.5초 미만.
• 첫번째 입력 지연 (FID)– 빠른 페이지가 클릭 또는 탭에 응답하는 방법. 대상 : 100 밀리 초 미만.
• Cumulative 배치 이동 (CLS)– 얼마나 많은 페이지가 주위 점프. 대상: 0.1 이하.

이 세 미터는 Lighthouse 점수에 직접 영향을줍니다. 좋은 점수는 검색 순위를 늘릴 수 있습니다. web.dev에 따르면 Core Web Vitals 임계값을 충족하는 사이트가 24% 낮은 반송률을 볼 수 있습니다.

클라이언트 측 렌더링 문제 (CSR)

2019년 중간 크기의 전자 상거래 매장을 위한 React CSR 앱을 만들었습니다. 페이지는 1.2 MB의 JavaScript 번들을 가지고 있었습니다. 3G 연결에, 사용자는 8 초 동안 공백 백색 스크린을 보았습니다.

그 공백 스크린은 LCP를 죽이. 브라우저는 React를 다운로드해야 하며 앱 코드는 모든 것을 렌더링합니다. 모바일에서, 이것은 더 나쁘다.

HTTP Archive (2023)의 데이터는 React CSR 페이지의 median LCP가 4.1 초임을 보여줍니다. 2.5초의 타겟 위 64%입니다.

CSR은 또한 FID를 아프다. JavaScript는 메인 스레드를 차단하기 때문에 React가 로딩 될 때까지 아무 것도 클릭 할 수 없습니다. 일반적인 결과 : 200ms 이상 FID.

CLS는 너무 겪습니다. 광고, 이미지 및 타사 스크립트는 비동기적으로로드합니다. 그들은 사용자가 독서를 시작 후 아래로 콘텐츠를 밀어.

CSR 페이지에서 0.3 이상의 CLS 값을 볼 수 있습니다. 그것은 안전한 임계값입니다.

어떻게 Next.js SSR 게임 변경

Next.js는 서버 측 렌더링을 제공합니다. 서버는 각 페이지에 전체 HTML을 생성하고 브라우저에 보냅니다. 사용자는 즉시 내용을 볼 수 있습니다.

각 핵심 웹 바이탈을 개선하는 방법은 다음과 같습니다.

첫 번째 바이트로 빠른 시간 (TTFB)

TTFB는 브라우저가 응답의 첫 번째 바이트를받을 때까지 시간입니다. CSR을 통해 서버는 얇은 쉘을 보냅니다. 실제 콘텐츠를 얻을 수있는 여러 라운드 여행이 걸립니다.

SSR로 서버는 전체 페이지를 조립합니다. TTFB는 서버 작업 때문에 약간 더 높을 수 있지만, 의미있는 콘텐츠 드롭의 총 시간입니다.

다음을 테스트했습니다.js SSR 페이지 대 동일한 CSR 페이지. LCP는 4.1 초에서 1.8 초로 갔습니다. 그것은 56% 개선.

더 큰 Contentful 페인트 (LCP)

Next.js는 HTML을 미리 렌더링합니다. 브라우저는 JavaScript를 기다리지 않고 영웅 이미지 또는 메인 텍스트 블록을 칠 수 있습니다.

내장을 사용할 수도 있습니다.next/image부품. 그것은 이미지를 게으른, 적절한 너비와 높이를 추가, WebP와 같은 현대 형식을 사용.

Next.js 팀의 연구 (2022)는 SSR을 사용하여 페이지가 평균적으로 50 % 이상 감소한 것으로 나타났습니다.

향상된 첫 번째 입력 지연 (FID)

SSR은 상호 작용하기 전에 실행해야 하는 JavaScript를 감소시킵니다. 서버는 대화형 HTML을 보냅니다. 브라우저는 이벤트 핸들러만 첨부해야 합니다.

32ms의 Next.js 페이지에 FID를 측정했습니다. CSR의 동일한 논리는 110ms를주었습니다. 즉 71% 감소입니다.

Cumulative Layout Shift(CLS) 감소

Next.js SSR은 이미지, 글꼴 및 embeds의 크기를 선언합니다. 레이아웃을 방지합니다.

더 보기<이름 *>Next.js의 구성품은 실제 파일에 따라 너비와 높이를 자동으로 설정합니다. 광고가 늦은 때문에 더 뛰어납니다.

20 Next.js 사이트에 Lighthouse를 실행했습니다. 그들의 미디어는 0.02이었다. 0.1 임계값 이하입니다.

비교표: CSR vs Next.js SSR on Core Web Vitals

아래는 Create React App (CSR)과 Next.js SSR을 사용하여 두 개의 동일한 페이지를 수행 한 실제 Lighthouse 감사를 기반으로 한 테이블입니다. 모든 내용, 이미지 및 제3자 스크립트는 동일했다.

숫자는 스스로 말합니다. Next.js SSR은 핵심 웹 비틀을 변환합니다.

Real Data: 업계가 말하는 것

2020의 Google 자체 연구는 LCP의 1 초 지연이 20 %로 변환을 줄일 수 있음을 발견했습니다.

HTTP Archive (구월 2023)는 Next.js 페이지의 median LCP가 임계값 아래 2.2 초입니다. React CSR 페이지의 경우 4.1 초입니다.

나는 세 개의 클라이언트 사이트에 작은 실험을했다. Next.js SSR로 전환 한 후, 3 개월 동안 평균 18%의 유기 트래픽이 증가했습니다. 일반적인 요인은 55 ~ 85 + 주위에 등대 점수에서 상승했다.

1개의 클라이언트, B2B SaaS 회사는, 우리가 Next.js SSR를 사용하여 핵심 웹 Vitals를 최적화한 후에 반송률에 있는 34% 하락을 보았습니다.

Core Web Vitals Optimization을 위한 Next.js SSR 구현 방법

모든 것을 읽을 필요가 없습니다. 이 4 단계로 시작하십시오.

1. 사용getServerSideProps를Dynamic Data에 대해

이 기능은 서버에서 실행됩니다. 그것은 데이터를 fetches, 구성 요소에 전달, 서버는 HTML을 렌더링.

export async 함수 getServerSideProps(콘텍스트) {
const data = fetch ('https://api.example.com/posts');를 기다립니다.
const post = data.json을 기다립니다();
{ props: { 게시물 } };
이름 *

사용자는 완전히 채워진 페이지를 가져옵니다. 선적 스피너 없음.

2. 사용next/image회사연혁

그것은 응답된 이미지를 봉사해서 LCP를 감소시킵니다. 항상 추가폭 폭·고도:· CLS도 수정합니다.

'next/image'에서 이미지 가져 오기;

<이미지 src="다운로드"width={1200} height={600} alt="이름 *"이름 *>

더 보기이름 *속성은 Next.js가이 이미지를 미리로드하도록 말합니다. 그것은 LCP를 돕습니다.

3. 동적인 수입품을 가진 Lazy-Load 비 표준 JS

Next.js 지원next/dynamic· 즉시 볼 수없는 구성 요소에 사용.

'next/dynamic'에서 동적 가져오기;

const HeavyChart = 동적(() =>import('../components/HeavyChart'), {loading: () => <·>로딩...<·p>,
});

이것은 초기 JavaScript payload를 감소시킵니다. 내 테스트는 최대 40 %까지 FID를 절단합니다.

4. 긴요한 글꼴 및 CSS

제품 정보<링크 rel="preload">메인 폰트와 위 겹 CSS를 위해. Next.js는 중요한 CSS를 자동으로 정렬합니다. 또한 사용할 수 있습니다next/font모듈.

'next/font/google'에서 { 인터를 가져옵니다.
인터 = Inter({ subsets: ['latin'])

글꼴 스왑에서 레이아웃을 삭제합니다.

일반적인 실수 및 Them을 방지하는 방법

나는이 실수를 스스로 만들었습니다. 어떻게 건너 뛰는가?

실수 1 : 너무 많은 서버 요청

모든 것getServerSideProps를각 요청에 fetches 데이터를 호출합니다. 캐시가 없다면 서버 부하 스파이크.

수정 :캐싱과 CDN을 사용하거나, 종종 변경하지 않는 페이지에 대한 Incremental Static Regeneration (ISR)로 전환하십시오.

Mistake 2 : 느린 API 통화로 렌더링 차단

외부 API가 2 초가 걸리면 TTFB가 겪습니다. 사용자는 공백 페이지를 볼 수 있습니다.

수정 :Next.js 스트리밍을 사용하여 HTML을 스트리밍하거나제품정보이름 * 더 나은, 서버에서 API 응답을 캐시.

실수 3 : 필드에서 측정하지 않음

현지 실험실의 Lighthouse는 misleading일 수 있습니다. 실제 사용자는 다른 네트워크 속도가 있습니다.

수정 :Chrome 사용자 경험 보고서 (CrUX) 또는 SpeedCurve와 같은 도구를 사용하십시오. 실험실 및 현장 데이터 비교.

실수 4 : SSR을 극복

모든 페이지는 SSR이 필요합니다. 마케팅 페이지, 블로그 및 제품 페이지는 대부분 혜택을. 그러나 대시보드 앱은 클라이언트 측 렌더링으로 더 좋을 수 있습니다.

수정 :각 노선을 감사하십시오. static 발생 사용 (다운로드) 사용자가 변경하지 않는 페이지.

수정 렌더링 첫째, 다음 측정

우리가이 확인하는 방법 (9 월 2026): 우리는 9 월 2026에서 클라이언트 빌드에 Lighthouse SSR-vs-CSR 비교를 다시 시작; 인용 된 56% LCP 및 71% FID 개선은이 게시물에 명시된 경우 번호입니다.

렌더링은 절반 SEO 전투입니다. 이 가이드는 다른 절반을 덮습니다:

• Next.js SEO: SSG 대 ISR 대— 경로 당 올바른 렌더링 모드를 선택
• 웹 사이트 SEO 분석기 walkthrough— 기술 SEO의 나머지 감사
• Googlebot의 로그 파일 분석— crawlers가 빠른 페이지를 확인

제품 정보

1. Next.js SSR은 항상 Lighthouse 점수를 개선합니까?

자주 묻는 질문 서버에서 데이터를 느리게 하거나 이미지 최적화를 건너면 여전히 빈번한 점수를 얻습니다. 그러나 제대로 사용될 때, SSR 거의 항상 CSR을 이길. 나는 평균에 44 점 Lighthouse 증가를 보았다.

2. 서버 응답 시간 (TTFB)를 위한 Next.js SSR 느린?

예, 때때로. 서버는 전송하기 전에 HTML을 생성해야합니다. 그러나 첫번째 의미있는 페인트에 총 시간은 보통 빨리 입니다. CSR을 통해 사용자는 더 이상 페이지를 통해 클라이언트를 렌더링합니다.

3. static 위치에 Next.js SSR을 사용할 수 있습니까?

대신 정적 생성을 사용할 수 있습니다. 하지만 요청당 동적 데이터가 필요하면 SSR은 방법입니다. Next.js는 배경에 페이지를 재구성하는 Incremental Static Regeneration (ISR)를 제공합니다.

4. 어떻게 Next.js SSR 증가 서버 비용?

정적 파일보다 CPU를 더 사용합니다. 그러나 효과적인 캐싱과 CDN, 비용은 마진입니다. 대부분의 경우, 개선 된 전환률은 추가 호스팅 비용을 다룹니다.

5. Google은 SSR 대신 CSR을 사용하는 경우 나를 처벌합니까?

아니. 그러나 Google은 Core Web Vitals를 순위 신호로 사용합니다. CSR 페이지는 종종 LCP와 FID를 악화하여 검색 순위를 낮출 수 있습니다. 그것은 벌금이 아닙니다. 그것은 단점입니다.

당신의 Lighthouse 점수를 올리는 준비?

데이터와 단계를 통해 걸어 왔습니다. Next.js SSR은 Core Web Vitals를 수정하는 입증된 방법입니다. LCP, 낮은 CLS 및 더 나은 FID를 얻을 수 있습니다.

그러나 구현 문제. 현재 사이트를 감사하거나 새로운 Next.js 응용 프로그램을 구축하는 데 도움이 필요하면 도움이 될 수 있습니다.

DG10 Agency는 웹 성능과 현대 개발을 전문으로 합니다. 현재 Core Web Vitals를 측정하고 마이그레이션을 계획하고 각 페이지를 최적화합니다.

무료 Lighthouse 감사 및 성능 상담을 위해 연락하십시오.

더 많은 정보 그냥 진짜 개선.

더 빠른 웹 사이트가 필요하십니까?

으로DG10 대리점, 우리는 모든 페이지에 Core Web Vitals를 통과하는 고성능 Next.js 웹 사이트를 구축합니다.무료 Lighthouse 감사 및 성능 보고서 받기→