Như tôi được biết thì reactjs, vuejs, angular… ra đời để giảm tải việc render UI cho server, nhưng chính vì điều đó dẫn đến việc con bot của google hay đại loại 1 search engine nào đó không thể đọc nội dung từ client-render (maybe thằng google vẫn đọc được nhưng nếu data render xong quá lâu vẫn bị miss).
Người ta giải quyết việc đó bằng cách dùng Nextjs, và tôi thấy thằng Nextjs cũng đâu khác gì server-render đâu nhỉ, nói quanh về bải toán server-render nhiều sẽ gây quá tải như cũ.
Có ai đó giải thích cho tôi biết tại sao không dùng server-render mặc định của framework luôn (như dùng blade của laravel, thymeleaf của springboot,…) mà phải dùng thằng Nextjs được không.
Bỏ qua vấn đề về cú pháp react này nọ, tôi đang nói về perfomance nhé, để tránh lạc đề.
thank all 
Nextjs và server-render?
em đã từng làm 1 project bằng vuejs và dùng nuxtjs , thì em thấy nó chia rạch ròi ra frontend và backend rất tiện cho việc phát triển, thằng backend viết api, thằng frontend viết các xử lý liên quan đến giao diện, 2 thằng be-fe này ko cần phải phát triển song song như render server kiểu cũ ( dùng template engine trên server), thằng fe hoàn toàn có thể fake cấu trúc dữ liệu để phát triển trước, thằng be viết làm sao để trả về cấu trúc như mong muốn của fe là đc, về hiệu suất em nghĩ nó sẽ chậm hơn so với dồn 1 cục trên 1 server 1 chút , vì lúc render nó phải gọi đến api của backend, vì thật ra lúc đầu nó sinh ra để render ở client hơn là render ở server , nếu cho chạy đúng là render trên client thì hiệu suất nó lại cao hơn, kiểu gì cũng có sự đánh đổi trong đó, ko thể hoàn hảo hoàn toàn đc =))
Bạn hơi lạc đề rồi đó, chủ topic đang nói về Server side render. NextJS là server side render, mặc dù nexjts có thể connect tới db để query db rồi response domcument HTML về browser nhưng không ai làm vậy, mà thường là fetch API từ server khác, vấn đề đặt ra là tại sao “server khác” này không return về HTML luôn cho khoẻ.
nhưng đến cuối cùng khi deploy lên server thì thằng nuxtjs sẽ là 1 con server riêng và thằng BE là 1 server riêng.
Mà mục đích của client-render là giảm tải cho server render và cũng như giảm chi phí thuê server.
nuxtjs đến cuối vẫn phải tốn 1 con server, vậy nếu họ request đến quá nhiều thì liệu con nuxt server này có lăn ra ngủm hay k?
nếu reactjs thuần hoặc vuejs thuần thì khi deploy mình có thể đẩy nó thành static site, khi đó thì k sợ ngỏm.
đúng là k thể hoàn hảo cả 2 bên được, vẫn chờ ai đó từng giải quyết vào giúp
Mình không phải chuyên gia về frontend, nhưng đối với câu hỏi này cũng có biết chút mong giải đáp được thắc mắc của bạn.
Trả lời cho câu hỏi vì sao không dùng view server render mà dùng riêng 1 framework chịu trách nhiệm cho việc render view. Thuật ngữ mấu chốt là SPA (single page application):
- Khi dùng server render, chỉ 1 thay đổi cục bộ trên page thì cần load lại toàn page từ server, dẩn đến hệ thống phải xử lý nhiều việc ko cần thiết. Hoặc nếu dùng JS/JQuery để xử lý render cục bộ thì code cũng sẽ rất rối, khó quản lý nếu là hệ thống lớn, business phức tạp.
- Từ những vấn đề trên, người ta phát triển các framework để khi user first request tới server thì load toàn bộ code FE. Những thao tác tiếp theo của user thì sẽ chỉ update lại view cục bộ ở những chổ cần thiết, làm ứng dụng mượt mà hơn do request nhỏ, nhẹ và chỉ re-render 1 vùng nhỏ. Request tới server lúc này ko phải để load JS, CSS, HTML … mà chỉ cần load JSON data thôi. Còn JS, CSS, HTML thì nằm sẵn trong browser của users từ lần request đầu tiên rồi.
Còn vụ NextJS thì mình chưa làm nên ko giám chém bừa 
Nhìn vào câu hỏi của bác bên trên chắc không phải không nắm được khái niệm web SPA đâu bác. web SPA phù hợp với màn hình sau đăng nhập như facebook, web nội bộ không cần SEO và truy cập lần đầu sẽ bị lag nữa do phải download toàn bộ source code về. SSR là phương pháp tối ưu SEO, việc render sẽ do CPU của server phụ trách, browser chỉ việc chờ và hiển thị. Nếu vậy thì bản chất Nextjs và Nuxtjs với thymeleaf giống nhau, tại sao không dùng luôn spring để render UI mà phải dùng 2 framework UI này.
Theo mình nghĩ ngủm cả 2 con luôn vì server nuxtJS cũng sẽ gọi đến server vận hành web service 
Về việc phục vụ SEO khi dùng SPA thì mình thấy có vài giải pháp là viết riêng 1 render-server phục vụ cho con Google bot (angular có support việc này…). Hoặc dùng render service của bên thứ 3.
Còn NextJS có gì ngon thì chắc chờ ae nào rành vào phân tích xem.
Thật ra mình đang tìm kiếm slution cho SEO khi sử dụng reactjs, search thì thấy đa số là chuyển hướng sang xài nextjs, tìm hiểu thì thấy nextjs nó cũng là 1 con server side render sử dụng reactjs làm view chứ cũng không giải quyết được bài toán vừa client side render + SEO.
Có lẻ là không có cách nào, trước kia khi nuxtjs và nextjs chưa ra đời thì mình cũng có dựng ý tưởng sẽ dùng server side render header cho file html của reactjs và view, nhưng SEO của gg k chỉ cần header, nó cần cả content của site nữa, nên khả năng chỉ có server side render mới giải quyết được việc này, hi vọng sau này google hay search engine khác sẽ hổ trợ SEO cho các client side render.
cảm ơn các bác, e vẫn open topic ở đây để có ai đó giải quyết được thì rep ạ
Ứng dụng của bác đã có sẵn chưa nhỉ. Nếu đang có rồi mà apply NextJS vào chỉ để phục vụ SEO thì cá nhân mình thấy khá tốn resource.
Về việc phục vụ SEO khi dùng SPA thì mình thấy có vài giải pháp là viết riêng 1 render-server phục vụ cho con Google bot (angular có support việc này…)
vậy có nghĩa là khi site đó được tìm thấy trên search engine và khi người dùng click vào sẽ được redirect đến trang sử dụng client side render đúng k ông?
Ứng dụng của bác đã có sẵn chưa nhỉ. Nếu đang có rồi mà apply NextJS vào chỉ để phục vụ SEO thì cá nhân mình thấy khá tốn resource.
tốn cả tài nguyên server nữa, mình đang tìm slution thỏa cả 2 thôi
Đúng rồi á ông, server nó sẽ check request nếu nó là Google crawler thì mình sẽ route nó tới server render riêng á. Trong browser cũng có option chỉnh request là Google crawler để mình test tính năng này.
Lắp thêm 1 server hoặc sử dụng dịch vụ third-party chỉ để xử lý giao diện mình nghĩ không phải giải pháp tối ưu lắm, trong khi server chính monitor CPU chạy chưa đến 50%
thank ông, slution này tôi chưa nghĩ tới, cũng là 1 giải pháp hay, nó vẫn tốn server nhưng server này chỉ phục vụ cho con bot thôi nên khả năng tèo là không thể 
Và mình cũng không cần UI đẹp cho cái này, chỉ cần đủ nội dung cần SEO là được
Nếu server chính dùng ít thì mình nghiên cứu để phần code server render vào chung server này luôn xem sao ông. (Dùng third party thì tốn money nên nó là 1 option thôi chứ mình cũng ko chuộng lắm)
thì mình đã nói nó sinh ra ko phải để render ở server mà là render ở client, nếu bạn render tại client thì hiệu suất sẽ tốt hơn, còn cái render ở server là người ta đưa thêm vào thôi, bạn đọc mấy dòng cuối mình có nói mà, nếu chỉ render ở server thì chả ai sài mấy cái framework kia làm gì, tuy nhiên bạn thử nghĩ nếu 1 backend mà cung cấp api cho cả web, mobile, hoặc các thiết bị khác thì response về nguyên 1 trang web đc ko? cần phải đưa ra những tình huống cụ thể những yêu cầu cụ thể chứ nói khơi khơi thì nó vô vàn lắm
nếu họ request đến quá nhiều thì liệu con nuxt server này có lăn ra ngủm hay k >> cái này server nào chả ngủm
nếu reactjs thuần hoặc vuejs thuần thì khi deploy mình có thể đẩy nó thành static site, khi đó thì k sợ ngỏm >> cái này mình chưa hiểu ý của bạn, nếu bạn muốn 1 server static thì cần gì render gì nhỉ? , việc render diễn ra khi bạn cần nội dung động, chứ tĩnh thì bạn sài cdn như cloudflare rồi cache lại là xong
Đương nhiên là được, sao lại không nhỉ? điển hình là WordPress, WordPress return thẳng HTML/CSS cho browser nhưng vẫn có controller RESTful phục vụ mobile bình thường, odoo cũng tương tự nó render giao diện ở server muốn thành web service thì cài thêm module web service, …
Đoạn này có gì khó hiểu đâu 
reactJS thuần túy khi chạy lệnh npm run build sản phẩm cuối cùng tạo ra là HTML/CSS/JS thuần túy thì nó chính là nội dung tĩnh rồi, hơn nữa nó có thể được đặt trong bất kỳ web server nào cũng được, điển hình là deploy react lên firebase hosting (chuyên chứa nội dung tĩnh). Khi user truy cập web lần đầu sẽ download file index.html đầu tiên, sau đó download tiếp JS, CSS mà file index này reference, cuối cùng mới fetch data bằng cách tạo http request đến server bằng axios, react query hay bất kỳ thư viện tạo http request (đây này chính là cái mà bạn gọi là dynamic content đấy)
Bạn hơi nóng vội và chưa hiểu vấn đề thì phải. Theo mình đọc cuộc trò chuyện nãy giời thì nội dung như này:
-
Web thương mại (bán hàng, quảng cáo, …) có user là người tiêu dùng (không phải nhân viên nội bộ của cty) cần SEO tốt nên chọn cách render giao diện phía server vì:
+để bot google dễ crawl (môi trường SEO cạnh tranh khóc liệt)
+Chúng tôi sẽ bỏ tiền ra thuê server khoẻ để render UI, laptop khách hàng không phải tốn điện để render UI nữa. -
Bài viết này tạm gác công nghệ client side rendering qua một bên vì không đúng use case này vì khi nói đến nói đến SSR thì các framework đều có module support việc này kiểu như:
+Spring boot đã có thymeleaf rồi tại sao không nó luôn mà tăng thêm 1 server nextjs để render giao diện làm gì?
+Blade trong laravel sao không dùng mà lại thêm nextjs nữa làm gì?
+tương tự nếu backend viết bằng expressJS (nodejs) cũng có thể return về HTML luôn, tại sao làm triển khai bộ đôi NextJS/ExpressJS làm gì?
Chủ topic cũng nói rõ chỉ quan tâm đến vấn đề hiệu năng của máy chủ, tiết kiệm chi phí vận hành còn việc team frontend làm trước team backend, chia nhỏ công việc v,v … thuộc vấn đề teamwork, quản lý nhân sự, … rồi không liên quan câu hỏi.
Mình thấy đây là một hỏi khá hay, mong cao nhân vào giải đáp. Có thể có nhiều options, chọn là do sở thích hay Nextjs vừa có SSR vừa có CSR, mà CSR làm bằng JQuery rất cực 
?? bạn phân biệt được 1 server response về static file với 1 server response về nội dung dynamic ko vậy, với server static ko cần quá trình router, xử lý, ghép nối nội dung để tạo thành response trả về, nên nó chạy rất nhanh, nếu bạn muốn tôi có thể tạo ra 2 server 1 cái response trực tiếp file binary từ ổ cứng, và 1 cái phải đi vòng vèo qua controller rồi tách ghép dữ liệu trên các template ( hoặc tạo 1 string html) cho bạn xem cái nào nhanh hơn? , cùng là trả về nhưng nó khác nhau về cách xử lý bạn nói vậy, thì cơm với gạo trước sau gì cũng ăn vào bụng, vậy nấu làm gì??
Có vẻ như bạn chưa hiểu react sau khi build nó sẽ hoạt động thế nào, SPA, CSR khác gì với SSR. Sản phẩm sau cùng khi bạn chạy lệnh npm run build không phải gọi là static file thì gọi là gì? có phải chỉ là file css,js, html thuần túy không? không lẽ là scss, ts, xhtml?
Giờ mới lòi ra thanh niên chưa nắm được mô hình client-server trong mạng internet. Bạn luôn nhắc đến từ render nhưng bạn có phân biệt được reactjs render phía client hay phía server không? nextjs render ở vị trí nào? cái nào render được cả 2 vị trí?
bạn vui lòng đọc lại giải thích web SPA tại đây
Đoạn này lạc đề không liên quan. Chủ topic đang bàn luận về SSR thì bạn lái sang CSR. giờ đang nói CSR lại chuyển lại SSR.
Lý thuyết bạn nắm chắc, ở đây không ai nói bạn sai, nhưng mọi người muốn bàn luận chuyện thực tế, cái mà mọi người muốn nghe là giải pháp, hiệu năng, chi phí.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?