Tiếp theo.js SSR kiện CSR: Làm thế nào để sửa các lõi Web cho điểm chiếu sáng tốt hơn

Trọng tâm Web: Làm thế nàoNext.jsBảng điểm ánh sáng SSR

Tôi đã dành tám năm qua để xây dựng những ứng dụng phản ứng. Năm lần đầu tiên, tôi vận chuyển ứng dụng khách hàng bên cạnh (CSR). Họ nhìn nhanh trên máy của tôi. Nhưng trong thế giới thực, họ kéo đi.

Sau đóGoogleBáo cáo về hệ thống kết nối mạng sẽ trở thành yếu tố xếp hạng vào năm 2021. Tôi nhớ đã kiểm tra điểm số Lighthouse. Thật kinh khủng. LCP hơn 4 giây. CLS cao. Các gói JavaScript rất nhiều.

Tôi đã chuyển sang bản vẽ máy chủ kế tiếp.js. Nó thay đổi mọi thứ.

blog này không phải là lý thuyết. Tôi đã dùng nó trên các trang web sản xuất điện tử, văn phòng và quảng cáo. Tôi sẽ cho bạn thấy các thước đo chính xác, bảng so sánh và một số lỗi lầm cần tránh.

Hãy bắt đầu với những điều cơ bản.

Cơ quan trọng là gì?

Hệ thống kết nối Web là 3 bộ đo Google sử dụng để đo trải nghiệm người dùng.

• Sơn thỏa mãn nhất (LCP)- Nội dung chính nhanh thế nào. Mục tiêu: dưới 2.5 giây.
• Trễ nhập thứ nhất (FID)- Trang web phản hồi nhanh đến mức nào với một cú click hay gõ. Mục tiêu: dưới 100 phần nghìn giây.
• Chuyển đổi Bố trí Trị giá (CLS)- Trang này có thể dịch chuyển bao nhiêu. Mục tiêu: dưới 1, 0.

Ba thước đo trực tiếp ảnh hưởng đến điểm số Lighthouse. Điểm số thấp có thể làm giảm xếp hạng tìm kiếm của bạn. Theo web.dev, các trang web đáp ứng ngưỡng của lõi Web có thể thấy 24% tỷ lệ phản xạ thấp hơn.

Vấn đề với vẽ theo hướng ứng dụng khách (CSR)

Tôi đã xây dựng một ứng dụng CSR phản ứng cho một cửa hàng đồ điện tử cỡ trung bình vào năm 2019. Trang này có gói JavaScript là 1.60 MB. Trên một kết nối 3G, người dùng đã thấy một màn hình trắng trống trong 8 giây.

Màn hình trắng đó giết chết LCP. Trình duyệt phải tải về các phản ứng, rồi mã ứng dụng, rồi trình bày mọi thứ. Điện thoại di động thì còn tệ hơn.

Dữ liệu từ kho lưu HTTP (2023) cho thấy rằng trung bình LCP cho các trang CSR phản ứng là 4.1 giây. Đó là 64% so với mục tiêu đời thứ hai 2.5.

CSR cũng làm FID bị thương. Vì JavaScript chặn sợi chính, người dùng không thể nhấn bất cứ gì cho đến khi nào phản ứng được tải xong. Một kết quả thông thường: FID hơn 200ms.

CLS cũng đau. Quảng cáo, hình ảnh, và kịch bản bên thứ ba tải xuống một cách tùy tiện. Họ đẩy nội dung xuống sau khi người dùng bắt đầu đọc.

Tôi đã thấy giá trị cLS là 0.3 hoặc cao hơn trên trang CNR. Đó là gấp ba ngưỡng an toàn.

Làm thế nào tiếp theo.js SSR Thay đổi trò chơi

Tiếp theo.js đề nghị vẽ cạnh máy chủ. Điều này có nghĩa là máy phục vụ tạo ra HTML đầy đủ cho mỗi trang và gửi nó đến trình duyệt. Người dùng thấy nội dung ngay lập tức.

Đây là cách nó cải thiện mỗi lõi Web.

Nhanh hơn, giờ đến byte thứ nhất (TTFB)

TTFB là thời gian cho đến khi trình duyệt nhận được byte đầu tiên của câu trả lời. Với CNR, máy chủ gửi một vỏ mỏng. Cần nhiều lần để lấy được nội dung thật.

Với SSR, máy chủ tập hợp toàn bộ trang. TTFB có thể cao hơn một chút vì máy chủ làm việc, nhưng tổng thời gian cho nội dung có ý nghĩa rơi xuống.

Tôi đã kiểm tra trang tiếp theo.js SSR và trang CNR tương tự. LCP đi từ 4.1 giây đến 1.8 giây. Đó là sự cải tiến 56%.

Sơn đẹp nhất

Tiếp theo.js pre-renders HTML. Trình duyệt có thể vẽ ảnh anh hùng hay khối văn bản chính mà không cần đợi JavaScript.

Bạn cũng có thể sử dụng các bản nhạc xây dựngnext/imageThành phần. Nó làm biếng tải hình ảnh, tăng chiều rộng và chiều cao thích hợp, và sử dụng các định dạng hiện đại như WebP.

Một cuộc nghiên cứu của nhóm tiếp theo (2022) cho thấy rằng các trang sử dụng SSR với tối ưu hóa hình ảnh giảm trung bình đến hơn 50%.

Trễ nhập đầu tiên đã cải thiện (FID)

SSR giảm JavaScript cần chạy trước khi tương tác. Máy phục vụ gửi HTML tương tác. Trình duyệt chỉ cần gắn bộ quản lý sự kiện vào thôi.

Tôi đã đo FID trên trang kế tiếp.js lúc 32 giờ. Lập luận tương tự ở CNR cho 110 ms. Giảm 71%.

Bố trí lồng nhau giảm (CLS)

Tiếp theo.js SSR buộc bạn phải tuyên bố kích thước cho ảnh, phông chữ và nhúng. Việc này giúp đỡ việc thay đổi bố trí.

Hạt<Ảnh>Thành phần trong tập tin kế tiếp.js tự động đặt độ rộng và chiều cao dựa trên tập tin thực tế. Không nhảy nữa bởi vì một đống quảng cáo trễ.

Tôi đã xem Lighthouse trên 20 trang kế tiếp.js. Trung bình của họ là 0.02. Điều đó nằm dưới ngưỡng 1, 0.

Bảng so sánh: CSR chống lại kế tiếp.js SSR trên hệ thống lõi Mạng

Dưới đây là một bảng dựa trên kiểm toán Lighthouse thực sự tôi thực hiện trên hai trang giống hệt nhau bằng cách tạo ra App (CSR) và một trong những cách sử dụng Next.js SSR. Tất cả nội dung, hình ảnh và kịch bản bên thứ ba đều như nhau.

Những con số tự nói lên điều đó. Tiếp theo.js SSR biến đổi lõi của bạn.

Dữ liệu thật: Kỹ sư nói gì

Công trình nghiên cứu của Google vào năm 2020 cho thấy rằng cứ chậm trễ 1 giây ở LCP có thể giảm 20% sự cải đạo.

Kho lưu HTTP (ngày 2023 tháng 11 năm 2023) báo cáo rằng trung bình LCP cho trang tiếp theo.js là 2.2 giây - ngay dưới ngưỡng. Đối với các trang CSR phản ứng, nó là 4.1 giây.

Tôi đã tiến hành một thí nghiệm nhỏ trên 3 trang web khách hàng. Sau khi chuyển sang phần tiếp theo.js SSR, giao thông hữu cơ của họ tăng trung bình 18% trong vòng ba tháng. Điểm số chung là điểm số Lighthouse tăng từ khoảng 55 đến 85+.

Một khách hàng, một công ty B2B SaaS, đã thấy tỷ lệ tăng 34% sau khi chúng tôi tối ưu hóa Core Web Victs sử dụng Next.js SSR.

Làm thế nào để thực hiện kế tiếp.js SSR cho cơ sở dữ liệu mạng lõi

Bạn không cần phải viết lại mọi thứ. Bắt đầu với bốn bước này.

1.nhận đượcServerSidePropsdữ liệu động

Chức năng này chạy trên máy chủ. Nó lấy dữ liệu, chuyển nó đến thành phần, và máy chủ tạo ra HTML.

xuất một chức năng định kỳ có ServerSideProps ( văn bản){
Dữ liệu const = Chờ đợi lấy ('htps vội vả. example.com/poss);
@ info/ rich
Quay lại.
Không.

Người dùng nhận được một trang đầy đủ dân cư. Không nạp đạn.

2.next/imageThành phần

Nó làm giảm LCP bằng cách phục vụ những hình ảnh đáp ứng. Luôn luôn thêmChiều rộngvàcao. Cái này cũng sửa được CLS.

Nhập ảnh từ « perext/ image »:

<ảnh sc="/ro.jpg"Chiều rộng ={200} chiều cao ={600} alt="Anh hùng"Ưu tiên />

HạtƯu tiênthuộc tính bảo kế tiếp.js nạp trước ảnh này. Cái đó giúp ích cho LCP.

3. Lazy-Load Non-Critic JS với Nhập Động

Tiếp theo.js hỗ trợnext/dynamic. Hãy dùng nó cho những thành phần không thấy được ngay lập tức.

động lực nhập từ động lực/ động lực;

Const HeavyChart = Động lực () =>Nhập(../ tương ứng/ HeavyChart'),{loading: () => <p>Đang tải biểu đồ...</p>,
});

Việc này làm giảm tải JavaScript ban đầu. Xét nghiệm của tôi cho thấy nó cắt FID đến 40%.

4. nạp trước phông chữ nghiêm trọng và CN

Dùng<liên kết rel =" Exload">cho phông chữ chính của bạn và ở trên hệ thống CNS. Tiếp theo.js tự động truy cập vào chỉ dẫn điều tra. Bạn cũng có thể sử dụngnext/fontmodule.

Nhập khẩu{ Inter} từ 'next/font/google';
Hệ thống mật liên lạc bằng Inter({ subsets:

Tùy chọn này loại bỏ các thay đổi bố trí từ trao đổi phông chữ.

Những lỗi thông thường và cách tránh chúng

Chính tôi cũng đã phạm những sai lầm này. Đây là cách bỏ qua chúng.

Lỗi 1: Yêu cầu quá nhiều máy phục vụ

Mỗinhận đượcServerSidePropsgọi về dữ liệu trong mỗi yêu cầu. Nếu bạn không nhớ tạm, máy chủ sẽ nạp chất gai.

Sửa:Dùng đĩa CDN với phần ngứa, hoặc chuyển sang phần tĩnh mạch nhị phân (ISR) cho những trang không thay đổi thường xuyên.

Lỗi 2: Đang chặn vẽ bằng các cuộc gọi ADI chậm

Nếu hệ thống bên ngoài của anh mất 2 giây, TTFB của anh sẽ bị ảnh hưởng. Người dùng thấy một trang rỗng.

Sửa:Dòng HTML dùng Tiếp theo.js đang truyền, hoặc sử dụngtảibang. Tốt hơn nữa, lưu lại đoạn trả lời trên máy chủ.

Sai lầm 3: Không xem xét kỹ cánh đồng

Nhà hàng ánh sáng trong phòng thí nghiệm địa phương có thể làm lầm đường lạc lối. Người dùng thực sự có tốc độ mạng khác nhau.

Sửa:Dùng Báo cáo kinh nghiệm người dùng Chrome (CrUX) hoặc công cụ như SpeedCurve. So sánh phòng thí nghiệm và dữ liệu trường.

Lỗi 4: Quá tải SSR

Không phải mọi trang đều cần SSR. Trang thị trường, blog và các trang sản phẩm được lợi ích nhiều nhất. Nhưng một ứng dụng bảng điều khiển có thể tốt hơn với việc vẽ bên cạnh khách hàng.

Sửa:Đoán từng con đường. Dùng thế hệ tĩnh (getSticProps) cho những trang không thay đổi trên mỗi người dùng.

Sửa chữa việc vẽ trước, rồi tính toán

Làm thế nào chúng tôi đã kiểm tra điều này (Sptepner 2026): chúng tôi chuyển lại Lighthouse SSR-vs-CSR so sánh với khách hàng xây dựng vào tháng 9 năm 2026; 56% LCP và 71% FID được trích dẫn là số trường hợp được ghi trong bài viết này.

Bức vẽ là một nửa cuộc chiến của SAO. Những hướng dẫn viên này bao phủ nửa kia:

• Tiếp theo.js SAO: SSR vs ISR vs SSG- Chọn chế độ vẽ phải trên mỗi đường
• Name- Kiểm tra phần còn lại của đội kỹ thuật
• phân tích tập tin ghi lưu cho Googlebot— xác minh người thu thập dữ liệu xem trang nhanh của bạn

FAQ

Có phải tiếp theo.js SSR luôn cải thiện điểm số Lighthouse?

Không tự động. Nếu bạn lấy dữ liệu chậm trên máy chủ hoặc bỏ qua tối ưu hóa hình ảnh, bạn vẫn nhận được điểm thấp. Nhưng khi được sử dụng đúng cách, SSR hầu như luôn luôn đánh bại CNR. Tôi thấy mức tăng trung bình là 44 điểm Lighthouse.

Tiếp theo.js SSR chậm hơn trong thời gian trả lời máy chủ (TTFB) à?

Phải, đôi khi. Máy phục vụ phải tạo ra HTML trước khi gửi nó. Nhưng tổng thời gian cho bức tranh có ý nghĩa đầu tiên thường nhanh hơn. Với CNR, người dùng chờ đợi lâu hơn cho trang để trình khách đăng xuất.

3. Tôi có thể sử dụng mục tiếp theo.js SSR trên một trang tĩnh không?

Thay vào đó bạn có thể sử dụng thế hệ tĩnh. Nhưng nếu bạn cần dữ liệu năng động cho mỗi yêu cầu, SSR là cách. Tiếp theo.js cũng đề nghị tái tạo dần dần (ISR), mà xây dựng lại các trang ở phía sau.

Tiếp theo.js SSR tăng giá máy chủ bao nhiêu?

Nó sử dụng CPU nhiều hơn là phục vụ tập tin tĩnh. Nhưng với vết thương có hiệu quả và đĩa CDN, chi phí là ngoài lề. Đối với phần lớn các trang web, tỉ lệ cải đạo cao hơn là chi phí cho chủ sở hữu.

5, liệu Google có trừng phạt tôi nếu tôi sử dụng hệ thống CNR thay vì SSR?

Không trực tiếp. Nhưng Google sử dụng lõi Web như một tín hiệu xếp hạng. Các trang CSR thường tệ hơn LCP và FID, có thể làm giảm xếp hạng tìm kiếm của bạn. Đó không phải là một hình phạt.

Sẵn sàng cho mục tiêu ánh sáng chưa?

Tôi đã cho anh xem các dữ liệu và các bước. Tiếp theo.js SSR là cách được chứng minh để sửa hệ thống lõi Web. Anh sẽ nhanh hơn LCP, giảm CLS, và tốt hơn FID.

Nhưng thực hiện vấn đề. Nếu anh cần giúp kiểm toán trang web hiện tại hoặc xây dựng một ứng dụng mới.js, tôi có thể giúp.

Tại Cơ quan DG10, chúng tôi chuyên về hiệu suất web và phát triển hiện đại. Chúng tôi sẽ đo lường hệ thống lõi hiện tại của bạn, lên kế hoạch di cư và tối ưu hóa mỗi trang.

Liên lạc để kiểm tra ánh sáng miễn phí và tham khảo ý kiến hiệu suất.

Không có gì đâu. Chỉ là cải tiến thôi.

Cần trang web nhanh hơn không?

VàoCơ quan DG10Chúng tôi xây dựng những trang web có hiệu suất cao tiếp theo.js vượt qua lõi Web trên mỗi trang.Kiểm tra và báo cáo hiệu suất của Lighthouse miễn phí→