Next.js: nhiều ưu điểm lớn hay là điều phức tạp khi triển khai cho dự án Front

Cuối tuần trước, thay vì viết blog như mọi lần, mình đã dành cho bản thân một chuyến picnic cùng mọi người ở trên công ty khá mê hoặc. Địa điểm mà bọn mình chọn là khu du lịch Đồng Mô phối hợp với về thăm nhà người em đồng nghiệp đồng thời chính là dự đám cưới trên ấy .Vì thế nên bài đăng này đã chậm hơn tiềm năng đề ra một chút ít. Để không phải khiến chúng ta chờ lâu, mình sẽ liên tục với series ” Tôi đã tạo ra Blog của mình như thế nào ? “. Như tuần trước, mình đã có một bài đăng ” Về nền tảng Back-End phía sau blog của mình ” san sẻ về Ghost cũng như có nhìn nhận một cách khách quan về nền tảng blog này. Vì vậy tuần này, mình sẽ trình làng về công nghệ tiên tiến mà mình đã chọn để thiết kế xây dựng cho mặt tiền ( Front-End ) blog mình ra sao, mọi người cùng khám phá nhé .

Mặt tiền trông đơn giản, vậy đã dùng gì?

Như bài trước, mình có đề cập tới câu truyện dùng Headless CMS chính là Ghost để làm nơi quản trị blog, phối hợp với việc dùng API để khai thác tài liệu cho đa nền tảng khác nhau. Đầu tiên, phải kể đến blog này, mình lựa chọn React, một library Front-end đã quá nổi tiếng trong nhiều năm gần đây. Nhưng mình chưa dùng phiên bản CRA hay là chính là một Boilerplate nào đó trên GitHub mà mình lựa chọn Next. js

The React Framework for Production. With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.

Bạn đang đọc: Next.js: nhiều ưu điểm lớn hay là điều phức tạp khi triển khai cho dự án Front

Nói về công nghệ, ngoài React ra còn rất nhiều nhiều các library, framework phải kể đến như Angular, Svelte, Vue.js đang phát triển một cách vượt bậc với nguy cơ thiết kế các SPA (Single-page application) nhanh chóng, tiện lợi , hiệu quả.

Next.js: nhiều ưu điểm lớn hay chính là điều phức tạp khi triển khai cho dự án Front-End của bạn 🤫

Như những bạn đã biết, React khá là tù trong khoản SEO ( Search Engine Optimization ), blog mà SEO dở chính là hỏng rồi, sẽ không có nhiều thời cơ để Open trên những cỗ máy tìm kiếm. Mình nói tù chứ không nói chưa hề nhé, làm được nhưng khá mệt, trong khi đó mình hoàn toàn có thể dành thời hạn điều tra , và nghiên cứu việc khác. Để nói về sự tù túng đó, mình cùng tìm hiểu , khám phá về SSR , và CSR trước nhé 😋 .

SSR, CSR chính là gì ?

SSR = Server-side Rendering

Cho đến gần đây, so với hầu hết những website đã được thiết lập nội dung trên sever , và đã được trả về tài liệu để trình duyệt có bộc lộ thị nó trên màn hình hiển thị của người dùng. Bất cứ khi nào người dùng nhấp chuột vào link trên trang, thì cũng chính là lúc nhu yếu sever tạo một tài liệu mới cho để cấu trúc lại trang , và hiển thị cho người dùng .

Người dùng phải chờ một khoảng thời gian nhất định để hoàn thành quá trình đến từ khi nhận đã được yêu cầu cho tới thu thập, soạn HTML và cuối cùng chính là trả về phản hồi. Vì SSR là tải bộ trang nên trình duyệt cũng sẽ phải cố gắng đợi các tài nguyên khác như JavaScript, CSS , và các nội dung khác đã được tải xuống (nếu dùng cache thì có thể chưa cần tải lại) trước khi để người dùng có thể thao tác ở trên trang. Đây là một bất tiện cho người dùng, khiến họ cảm thấy mất thời gian cũng như trải nghiệm bị giảm đi đáng kể. mọi người có thể xem mô tả dưới đây:

Người dùng thông qua trình duyệt gửi yêu cầu xem trang tới máy chủ. Máy chủ đồng ý và đã sẵn sàng gửi trả lại toàn bộ các yêu cầu đến từ phía trình được kết xuất (render) thông qua HTML về cho trình duyệt.Trình duyệt nhận đã được thông tin và tiến hành kết xuất (render) trang web đến từ HTML được trả về từ máy chủ. Ngay trong lúc này, bạn có thể nhìn thấy nội dung cơ bản được trả về từ máy chủ. Song song với quy trình đó, trình duyệt cũng sẽ tải các tài nguyên cần thiết khác như JavaScript, CSS.Trình duyệt đã tải xong các tài nguyên , và tiến hành thực thi các đoạn mã như: JavaScript, CSS.Cuối cùng, khi hoàn tất quá trình tải xuống , thực thi. Lúc này, người dùng có thể thao tác vào trang web. Mỗi khi người dùng nhấp chuột vào các liên kết trong nội dung trang web, thì quá trình đến từ 1 tới 4 cũng sẽ đã được lặp lại.

CSR = Client-side Rendering

Không giống với SSR, những SPA ngày này đã dùng rất nhiều những công nghệ tiên tiến mới giúp cho việc giảm thiểu quá trình giải quyết , và xử lý ở phía sever. Hầu hết, những sever cũng sẽ chỉ trả về HTML tối thiểu cho quá trình kết xuất ( render ) dựa vào JavaScript. Quá trình hiển thị giao diện website cho người dùng cũng sẽ cần nhiều thời hạn để trình duyệt tải những những mã JavaScript, CSS sau đó chờ những đoạn mã đã được thực thi, sau cuối chính là hiển thị , và cho người dùng thao tác ở trên trang. Mỗi khi, người dùng nhấp vào link trên trang, khác với SSR những đoạn mã JavaScript cũng sẽ dữ thế chủ động tìm nạp, nhu yếu sever gửi những thông tin còn thiếu , và triển khai kết xuất lại website mà không cần tải lại hàng loạt giao diện người dùng. Điều này, cũng sẽ khiến cho size tải nạp trang giảm đi đáng kể , tận dụng được phần cứng của máy khách. Bạn hoàn toàn có thể xem miêu tả dưới đây :

Người dùng thông qua trình duyệt gửi yêu cầu xem trang tới máy chủ. Máy chủ đồng ý , và đã sẵn sàng gửi trả lại một phần thông tin HTML đủ để các đoạn mã Javascript có thể thực thi mà chưa gặp lỗi nào trong quy trình kết xuất (render).Trình duyệt nhận được thông tin và tiến hành kết xuất (render) trang web từ HTML được trả về từ máy chủ. Song song với quy trình đó, trình duyệt sẽ tải các tài nguyên cần thiết khác như JavaScript, CSS.Sau khi tải xong, các đoạn mã JavaScript sẽ đã được thực thi để kết xuất ra các HTML đầy đủ (Virtual DOM).Người dùng sẽ nhìn thấy , và có thể thao thác dựa vào việc trình duyệt hiển thị nội dung trang web thông qua HTML đầy đủ ở quy trình trước.

SEO cũng sẽ ảnh hưởng như thế nào khi dùng SSR hoặc CSR ?

Như vây, việc kết xuất ở sever hay là máy khách có tương quan trực tiếp đến việc thứ hạng website của bạn ở trên những cỗ máy tìm kiếm, tất cả chúng ta ai cũng đều mong ước website của mình có thứ hạng cao .Nhưng mà ngược lại, những cỗ máy tìm kiếm lại chính là kẻ tham lam, chỉ mong ước website của bạn hiển thị trong thời hạn ngắn điều đó đồng nghĩa tương quan với việc cũng sẽ mang lại ít thời cơ cho những ứng dụng CSR .Các Bot của máy tìm kiếm muốn ứng dụng của bạn có thời hạn phản hồi nhanh gọn, những thông tin cơ bản phải chuẩn bị sẵn sàng có trong nội dung HTML. Nếu cả 2 điều này đều chưa đã được triển khai, những Bot sẽ luôn thấy một trang trắng .Mình sẽ tổng kết những điểm khác của SSR , và CSR để những mọi người dễ tưởng tượng : SSR CSR ✓ Có thể nhìn thấy HTML ✕ HTML bị ẩn(chỉ nhìn thấy ở DevTool) ✓ Không phụ thuộc vào JavaScript ✓ Có nhiều lựa chọn Lib, Framework ✓ Dễ dàng cho SEO ✕ Bất lợi cho SEO ✓ Khởi tạo nhanh chóng ✓ Nhanh chóng hiển thị sau khi tải trang ✕ Tải lại toàn trang ✓ Giảm thiểu tải lại toàn trang ✕ Hạn chế nếu kết nối mạng chậm ✓ Hỗ trợ dựa vào mạng của người dùng ✕ Không khuyến khích máy chủ yếu ✓ Tận dụng được nguồn lực máy khách

Vậy tại sao lại là Next.js? Có cách nào khi dùng CSR cho SEO không?

Sau khi tìm hiểu , khám phá về SSR và CSR bạn đã hiểu cơ bản về nó, vậy để mình san sẻ những thêm những thông tin vì sao mình lại chọn Next. js :

Trải nghiệm người dùng phong phú, dễ dàng làm SSR, CSR kể cả SSG. Có nhiều các code mẫu đã được cập nhật liên tục. Có nhiều công ty lớn dùng, như: Netflix, Uber, Twitch…Kiến trúc của Next.js giúp gia tăng tốt nhất cho SEO.Hỗ trợ React cực tốt với hiệu suất vượt trội.Phát triển tính năng nhanh chóng mà không mất quá nhiều thời gian cho việc cấu hình, như: Static, Webpack, Babel Hỗ trợ Serverless.Hỗ trợ CSS tích hợp.Hỗ trợ chia , và hợp code của bạn một cách tối ưu.Các trợ giúp khác như TypeScript, Image Optimize, Fast Refresh bạn có thể tìm hiểu thêm tại đây.

Có một quan tâm khi bạn khởi đầu với Next. js chính là bạn phải quan tâm tới 2 thời gian, chỉ cần chớp lấy đã được nó, bạn cũng sẽ hoàn toàn có thể tùy chỉnh ứng dụng của bạn theo mong ước .

Thời điểm truy cập trang lần đầu tiên khi khi máy chủ bắt đầu kết xuất HTML, bạn cũng sẽ phải quan tâm đến trạng thái khởi tạo lúc đó để xác định thực hiện gì tiếp theo. Ví dụ: Khi kết xuất ở phía máy chủ, bạn chưa thể dùng biến window.abxyz giống như ở trình duyệt được, đồng nghĩa bạn sẽ chưa có localStorage, atob, btoa, etc etc… Thời điểm khi máy chủ đã hoàn tất quy trình kết xuất HTML cuối cùng và người dùng bắt đầu thao tác trên trang của bạn. Khi này thì bạn cũng sẽ chưa thể dùng các chức năng ở dưới máy chủ như là context, request, request, etc etc…

Như vậy bạn đã biết sơ qua về Next.js, vậy chắc bạn tự hỏi nếu vẫn muốn dùng React mà chưa muốn dùng Next thì có cách nào không?

=)) có chứ, chắc như đinh có. Tuy nhiên mình chỉ san sẻ dưới góc nhìn những biện pháp khả thi mà mình biết ở thời gian viết bài này, như :

Isomorphic/Universal React

Là ứng dụng được cho phép chạy trên cả tự nhiên và môi trường sever , máy khách. Tương tự như Next. js như Gastby, … có rất nhiều nhiều những dự án Bất Động Sản như thế này trên Github phải kể đến React Redux Universal, After. js, Goldpage

Prerendering

Với ý tưởng sáng tạo là tách biệt 2 việc truy vấn của người dùng và bot của máy tìm kiếm ra thành 2 việc riêng không liên quan gì đến nhau. Khi bot truy vấn sẽ được chuyển hướng tới trang vừa đủ để hoàn toàn có thể tích lũy thông tin, còn người dùng sẽ đã được dùng thông thường. mọi người hoàn toàn có thể xem ý tưởng sáng tạo đó trải qua bức ảnh dưới đây .

Với việc dùng Prerendering bạn có thể dùng các dịch vụ SaaS hoặc thư viện dưới đây:

Ngoài ra bạn có thể điều hướng bot với nginx với đoạn mã như sau (nhớ thay domain.com chỉ bằng domain của bạn)

map $http_user_agent $limit_bots eCatch location / if ($limit_bots = 1) return 301 $scheme://domain.com$request_uri;

Dành một chút thời gian cho Next.js

Trong khuôn khổ bài đăng này, mình chỉ dành thời hạn để setup , và thử nghiệm SSR , và CSR cho mọi người. Để cho mọi người cảm nhận được sự độc lạ rõ ràng để khi vào dự án Bất Động Sản trong thực tiễn, tất cả mọi người hoàn toàn có thể lựa chọn cho mình biện pháp tốt nhất .Bắt đầu với việc setup theo hướng dẫn tại đây

npx create-next-app # or yarn create next-app

Bạn được tác dụng như này, hãy cd vào thư mục chứa code ( demo-nextjs ) , chạy npm run dev cho tự nhiên và môi trường development .HomePage sau khi bạn truy vấnThử kiểm tra SSR của Next nhéThử xem CSR xem nàoCòn rất nhiều những mục quan trọng khác mà bạn hoàn toàn có thể tìm hiểu , và khám phá như Data Fetching, Pages, Built-In CSS Support, Environment Variables, Dynamic Component, Advanced. chúng ta hãy sắp xếp thời hạn thưởng thức nó nhé. Mình tin rằng nó rất nhiều mê hoặc, tiện ích , nhanh gọn .

Tổng kết lại

Qua bài đăng này, mình tin chính là bạn đã hiểu rõ hơn về SSR và CSR, điều này giúp những bạn định hình đã được việc tăng trưởng những dự án Bất Động Sản có lợi cho SEO hay là chưa ? Không nhưng thế bài đăng còn cung ứng cho bạn những biện pháp thay thế sửa điều trị nếu bạn chưa hề dùng SSR.Ngoài ra, Next. js là một dự án Bất Động Sản mà mình cho chính là tuyệt vời với nhiều ưu điểm lớn. Có thể tiến hành dự án Bất Động Sản một cách nhanh gọn với việc thiết lập gần như tối thiểu. Điều đáng giá hơn cả là nó còn có số lượng lớn những nhà tăng trưởng trên khắp quốc tế song song là những phiên bản code example mà bạn hoàn toàn có thể khai thác tại đây. Trải qua khoảng chừng gần 3 năm thao tác với Next, mình tin , hy vọng nó sẽ còn tăng trưởng vượt bậc trong tương lai .

Và dĩ nhiên chính là đôi khi bạn không cần phải cầm dao mổ trâu đi giết gà, nếu ngoài mục đích thử nghiệm cơ bản, theo mình bạn có thể dùng CRA, còn Next sẽ hợp lý các trang web cần SEO như: ấn phẩm magazine, báo chí, thương mại điện tử, quảng cáo, quảng bá thương hiệu, blog, trang Chia sẻ sản phẩm, vân vân.. nó sẽ ít đã được dùng cho các sản phẩm chưa quan tâm đến SEO như: trang quản lý (Admin, CMS), các dụng cụ đặc biệt nào đó

3*** Ánh sáng Là gì vậy? Ánh sáng đơn sắc Là gì vậy?

Một số dự án Bất Động Sản mình đã dùng Next : http://oklabel.vn/, http://microvn.net/ và mình có 1 bộ nextjs-startkit dành cho những bạn mới khởi đầu tìm hiểu , và khám phá về nó nhé .

Cuối cùng, cảm ơn chúng ta đã dành thời gian đọc bài đăng của mình, nếu có sai sót nào đó bạn có thể nhắn qua Facebook cá nhân hoặc email: [email protected] cho mình nhé.

Nguồn: Microvn.net

Complete List of HTML Meta TagsNext.js, ShowCaseAwesome Universal RenderingPrerender.io nginx.conf for nginxHow to Make React SEO-Friendly: an Extensive SEO GuidePerformance Next.js (SSR) vs. Create React App (CSR)

Giới thiệu: Quang Sơn

Quang Sơn là giám đốc hocdauthau.com - Kênh thông tin học đấu thầu, kiến thức tổng hợp, công nghệ, đời sống.

0 Shares
Share
Tweet
Pin