Firebase vs Vercel: What They Do and When to Choose Each
What does Firebase supply, what does Vercel run, and what do you still need to connect? Follow a café app to see the differences, costs and a practical starting choice. English first, Vietnamese below.
HPHung Pham October 12, 2026 · 21 min readUpdated October 12, 2026
Firebase supplies managed account and data services. Vercel runs web apps and server code, connecting to the services you choose. Both can host websites. Start with Firebase for a mobile app needing shared accounts and live data, Vercel for a Next.js web workflow, or both when those needs meet.
English first · Tiếng Việt bên dưới
Official documentation checked on October 12, 2026. The café, orders and traffic numbers are illustrative examples.
Firebase gives you ready-to-use services for sign-in, saved data and live updates. Vercel builds and runs your web app, including its server code, and lets your team review changes before release.
Both can host websites and run backend code. The useful difference is what comes as a service and what you choose to connect. A Next.js website can run on Vercel while its customer accounts and orders live in Firebase.
1. What does each platform do?
The frontend is the screen customers use. The backend checks things such as prices and permissions. The database keeps the records. Next.js is a framework for building the web app that connects those parts.
On Vercel, a connected sign-in service can be Firebase Auth, and a database can come from your existing system or a Marketplace integration. Cloud Functions on Firebase and Functions on Vercel run code you write for jobs such as checking prices. Neither platform knows the café's menu for you.
Both can share a test version before release. Vercel makes preview deployments a regular part of its web workflow; Firebase Hosting also has preview channels. Vercel environments, Firebase Hosting previews.
Example: a café starts taking online orders
A menu with opening hours only needs hosting. Adding online orders means saving orders and checking prices. Customer accounts become useful when the café adds loyalty points or order history; guest ordering is also possible.
With a Firebase-based setup, the team can use Authentication for members, Firestore for orders, and a Firebase hosting product for the website. With a Vercel-based setup, the website and its server code run on Vercel, while the team connects its chosen sign-in and database services. Those services can be Firebase, or services the café already uses.
The customer still sees a menu and an Order button. The team chooses how the parts behind that button are supplied and managed. Hosting is the shop premises; the database is the order book. A nice sign above the door will not remember who ordered the iced coffee.
2. Which hosting products should you compare?
Static pages are prepared files served to visitors. Server-rendered pages need server code to prepare their content.
Product
What it runs
Start here when…
Firebase Hosting
Prepared files and browser-side apps; can route server work elsewhere
You have a static site or app
Firebase App Hosting
Dynamic apps, with built-in Next.js and Angular support
You want a full web app in Firebase/Google Cloud
Vercel
Web frameworks, static content and server routes
You want web deployments and preview links
App Hosting runs on Google Cloud and needs Blaze billing. Firebase Hosting can pass server work to Cloud Functions or Cloud Run. Firebase Hosting, Firebase App Hosting.
Example: two versions of the café website
A menu everyone sees: compare Firebase Hosting with Vercel.
A Next.js site whose server prepares each customer's order page: compare Firebase App Hosting with Vercel. Choosing where that server runs is separate from choosing where the orders are saved.
If every design change needs a preview link, consider Vercel's workflow. If the team mainly operates in Google Cloud, compare App Hosting directly. Vercel environments.
3. How do the website and database work together?
An API is a doorway through which parts of the app request work. A Firestore listener sends data changes to screens allowed to read them. The website and API can run on Vercel while Firebase handles accounts and orders. Firestore live updates.
Example: Lan orders, Mai sees it at the counter
For the loyalty version of the app, Lan signs in and submits an order. The API checks it, then saves it to Firestore. Mai's staff screen receives that saved order without her refreshing the page.
Mai must sign in and have permission to see the café's orders. Security Rules check access when an app reads or writes Firestore directly. Server libraries bypass those rules, so the API needs its own permission checks. Firestore Security Rules and server access.
This combination is useful when the team likes Vercel for web releases and wants Firebase's account and data services. It also gives the team two places to check when an order goes missing. Keep the API near its database where available, and keep preview tests away from real orders. Database placement on Vercel.
4. Which should you choose for your project?
These are starting recommendations for the projects below, rather than a claim that the other platform cannot do the job.
A café menu with no sign-in or saved orders: start with simple website hosting. Use Firebase Hosting if the project already uses Firebase; use Vercel if the team already works with its web deployments. Starting from scratch, either is enough for this job. The commercial plan and the team's familiar workflow are better tie-breakers than features the menu does not need.
A mobile loyalty app with accounts, points and live orders: start with Firebase Authentication and Firestore. The useful part is getting account and data services together. Check offline settings for each platform; web persistence is not enabled by default. If Lan orders offline, say “waiting to send” until the server accepts it. Firestore offline behavior.
A Next.js shop with a working backend: start with Vercel for the website and keep that backend. This fits a team that wants preview links and frequent web releases without moving its data. If the team already operates mainly in Google Cloud, Firebase App Hosting is a sensible alternative.
A Next.js site and a Firebase mobile app sharing orders: use Vercel with Firebase when sharing those services and keeping Vercel's web workflow are both useful. Use App Hosting with Firebase when the team prefers to manage the web app in its existing Google Cloud setup. Both arrangements can serve the same customers; pick the one the team can look after comfortably.
When the project needs more than the café example
Related tables and reports: PostgreSQL may fit stock, suppliers and invoices better than a document model. Firebase offers it through SQL Connect; a Vercel app can connect to PostgreSQL too. Firebase SQL Connect.
Chat or other live connections: Vercel announced WebSockets in public beta in June 2026. A WebSocket keeps a two-way connection open, but you still need to handle reconnection and shared data. Firestore listeners and a WebSocket service solve different parts of realtime work; compare the behavior you need. Vercel WebSocket announcement, connection lifetime and state.
Long jobs: check runtime limits and consider a separate worker that can recover after interruption. Generating a large report should not mean hoping a web request stays alive long enough. Vercel Functions limits.
5. Which one costs less?
The bill follows work done, not just visitor numbers. Firestore can charge for reads, writes, storage and other resources. Listeners can add reads on updates and reconnection. Vercel charges depend on its plan and usage, including compute and data transfer. Connected providers may bill separately. Firestore billing, Vercel pricing.
Example: the same traffic, ten times the reads
The café gets 1,000 visits a day. Reading 20 product records once per visit means 20,000 initial reads. Reading all 200 means 200,000. Traffic is unchanged, but database reading increases tenfold. This excludes updates and other chargeable work; it is not a price quote.
Moving the website to Vercel while keeping those same Firestore queries still produces those Firestore reads. Changing the website host does not erase the database's work.
A cache reuses a prepared result, like keeping printed menus at the counter. Reusing the menu page can save server work; rebuilding it for each visitor does more work.
Before assuming a plan is free
Vercel: Hobby is for personal, non-commercial use. Current Pro docs list a $20 monthly platform fee covering one team member who can deploy, plus $20 of usage credit. That credit offsets eligible usage charges; it is not a maximum bill. Additional deploying team members and usage can cost extra. A commercial café should plan around a commercial plan. Hobby terms, Pro billing.
Firebase: Spark has free allowances; Blaze uses usage-based billing. App Hosting needs Blaze, and current Cloud Storage requirements need Blaze to maintain access. Free allowances do not remove that billing requirement. Firebase pricing, Cloud Storage billing requirements.
A spending alert tells you to check the bill. Automatic pausing needs a separate control. A low-fuel light comes on, but the car keeps running.
Firebase's current spend caps cover AI Logic, App Hosting, Cloud Functions and Extensions. They do not form a blanket cap for Firestore or every project charge. On Vercel, enable the production-pause action if that is the desired response to the spend threshold. It can lag and does not stop AI Gateway key usage or v0 usage. Connected providers need their own checks. Firebase budget controls, Vercel Spend Management.
6. What happens when someone taps Order twice?
The server checks identity, current prices and availability. A request ID works like the number on an order slip: it lets the server recognize the same order attempt when it arrives again. Finding an existing order or creating one must be a single protected operation, such as a database transaction. Two requests arriving together should not produce two orders.
Example: two drinks and a weak connection
Lan orders two drinks at VND45,000 each. The server calculates VND90,000, even if someone edits the browser's total. It saves order A108 for request R17.
Lan loses the reply and taps again. The app sends R17 again; the server returns A108. Mai sees one order for two drinks, rather than two identical orders.
This step works the same way whether the server runs on Vercel or Firebase: the app must implement it. If payment is online, the payment provider's verified result must also confirm that money arrived. Saving A108 only confirms that the order was saved.
7. Three checks before committing
Permissions: signing in tells the café that Lan is Lan. It should not let her open someone else's order or change the menu price. Test both cases. A membership card is useful; it is not a key to the cash register.
Speed: measure the whole journey. A fast menu is not enough if submitting an order takes ten seconds. A content delivery network, or CDN, keeps content near visitors, but does not fix slow queries. Neither platform guarantees speed or search rankings.
Moving later: moving hosting differs from moving accounts, data and file links. Keep those responsibilities separate. Changing the café's menu design should not require replacing its order book.
8. What about AI?
Vercel's AI SDK helps build streamed answers and tool calls. Firebase AI Logic provides client libraries for Gemini; Genkit helps build AI processing flows. They do not require the website and database to use the same host. AI SDK, Firebase AI Logic, Genkit.
Example: a menu assistant
“Which drink has no milk?” can use menu information. “Where is my order?” needs current records the customer may see. “Cancel my order” must go through backend checks. Include model usage in the budget and show a useful message when AI takes too long.
Before choosing, write down the first thing a customer must be able to finish. If that is reading the menu, start with hosting. If it is signing in and keeping points, add account and data services. If the team is already releasing a Next.js site every week, its web workflow deserves more weight. You now have a reason to choose each part.
Phiên bản tiếng Việt
Firebase và Vercel làm gì, khi nào nên chọn bên nào?
Đối chiếu tài liệu chính thức ngày 12/10/2026. Quán cà phê, đơn hàng và số lượt truy cập dưới đây là ví dụ minh họa.
Firebase có sẵn các dịch vụ giúp app đăng nhập, lưu dữ liệu và nhận cập nhật. Vercel giúp dựng và chạy ứng dụng web, gồm cả code máy chủ, để đội có thể xem thử thay đổi trước khi phát hành.
Cả hai đều có thể chạy website và code phía backend. Khác biệt đáng nhìn là bên nào cung cấp sẵn phần gì, phần nào mình chọn nối thêm. Một website Next.js có thể chạy trên Vercel, còn tài khoản khách và đơn hàng nằm ở Firebase.
1. Mỗi nền tảng làm việc gì?
Frontend là màn hình khách dùng. Backend kiểm tra những việc như giá món và quyền truy cập. Cơ sở dữ liệu giữ các bản ghi. Next.js là bộ công cụ làm ứng dụng web nối những phần đó với nhau.
Trên Vercel, dịch vụ đăng nhập nối vào có thể là Firebase Auth; cơ sở dữ liệu có thể lấy từ hệ thống đang có hoặc qua tích hợp Marketplace. Cloud Functions của Firebase và Functions của Vercel chạy code mình viết, chẳng hạn phần kiểm tra giá. Nền tảng chưa tự biết quán đang bán ly nào với giá bao nhiêu.
Cả hai đều có cách chia sẻ bản thử trước khi đăng. Vercel đưa preview vào luồng làm web thường ngày; Firebase Hosting cũng có kênh preview. Môi trường Vercel, preview Firebase Hosting.
Ví dụ thực tế: quán bắt đầu nhận đơn online
Trang chỉ hiện menu và giờ mở cửa cần hosting. Thêm đặt món thì cần lưu đơn và kiểm tra giá. Tài khoản hữu ích khi quán muốn tích điểm hoặc giữ lịch sử mua; vẫn có thể thiết kế đặt món không cần tài khoản.
Dùng bộ dịch vụ Firebase: dùng Authentication cho thành viên, Firestore cho đơn, rồi chọn sản phẩm hosting của Firebase để chạy web. Chạy web trên Vercel: website và code máy chủ nằm trên Vercel, còn đăng nhập và cơ sở dữ liệu do mình chọn nối vào. Có thể nối Firebase, cũng có thể dùng dịch vụ quán đã có.
Khách vẫn thấy menu và nút đặt món. Khác biệt nằm ở cách đội làm app chọn và quản lý những phần phía sau nút đó. Hosting giống mặt bằng, cơ sở dữ liệu giống sổ ghi đơn. Treo biển quán đẹp rồi thì vẫn cần một chỗ nhớ ai vừa gọi ly cà phê đá.
2. Nên so những sản phẩm hosting nào?
Trang tĩnh là các tệp đã chuẩn bị sẵn để gửi cho khách. Trang dựng ở máy chủ cần code phía máy chủ tạo nội dung.
Sản phẩm
Chạy phần gì?
Nên xem trước khi…
Firebase Hosting
Tệp dựng sẵn, app chạy phía trình duyệt; có thể chuyển việc máy chủ sang dịch vụ khác
Làm website tĩnh hoặc ứng dụng web
Firebase App Hosting
Web động, hỗ trợ sẵn Next.js và Angular
Làm web đầy đủ trong hệ thống Firebase/Google Cloud
Vercel
Các bộ công cụ làm web, nội dung tĩnh và code máy chủ
Cần triển khai web và link preview
App Hosting chạy trên Google Cloud và cần gói Blaze có liên kết thanh toán. Firebase Hosting có thể chuyển việc máy chủ sang Cloud Functions hoặc Cloud Run. Firebase Hosting, Firebase App Hosting.
Ví dụ thực tế: hai phiên bản website của quán
Menu ai mở cũng thấy giống nhau: so Firebase Hosting với Vercel.
Web Next.js có máy chủ dựng trang đơn riêng cho từng khách: so Firebase App Hosting với Vercel. Chọn nơi máy chủ chạy là một việc, chọn nơi lưu đơn là việc khác.
Nếu mỗi lần sửa giao diện đều cần link xem thử trước khi đăng, luồng Vercel đáng cân nhắc. Nếu đội chủ yếu vận hành trên Google Cloud, so trực tiếp App Hosting. Các môi trường Vercel.
3. Website và cơ sở dữ liệu phối hợp thế nào?
API giống cửa giao nhận để các phần của app nhờ nhau xử lý việc. Listener của Firestore gửi thay đổi đến màn hình có quyền đọc dữ liệu đó. Website và API có thể chạy trên Vercel, còn Firebase lo tài khoản và đơn. Cập nhật Firestore.
Ví dụ thực tế: Lan đặt, Mai ở quầy thấy đơn
Ở phiên bản có tích điểm này, Lan đăng nhập rồi gửi đơn. API kiểm tra, lưu vào Firestore. Màn hình nhân viên của Mai nhận được đơn đã lưu mà Mai không cần tải lại trang.
Mai phải đăng nhập và có quyền xem đơn của quán. Security Rules là các quy tắc kiểm tra quyền khi app đọc hoặc ghi Firestore trực tiếp. Thư viện phía máy chủ đi ngoài những quy tắc đó, nên API vẫn phải tự kiểm tra quyền. Security Rules và truy cập phía máy chủ.
Cách ghép này hợp khi đội thích luồng phát hành web của Vercel và cần dịch vụ tài khoản, dữ liệu của Firebase. Đổi lại, đơn bị thất lạc thì có hai nơi phải kiểm tra. Nếu có thể, đặt API gần cơ sở dữ liệu; bản preview dùng dữ liệu thử riêng để tránh đụng vào đơn thật. Đặt dữ liệu gần Functions.
4. Dự án của mình thì chọn bên nào?
Đây là gợi ý bắt đầu cho từng dự án, không có nghĩa bên còn lại không làm được.
Menu quán, chưa có đăng nhập hay lưu đơn: bắt đầu bằng hosting đơn giản. Dự án đã dùng Firebase thì chọn Firebase Hosting; đội đã quen triển khai web trên Vercel thì dùng Vercel. Làm từ đầu, cả hai đều đủ cho việc này. Gói thương mại và cách làm quen thuộc giúp chốt lựa chọn tốt hơn những tính năng menu chưa cần.
App tích điểm trên điện thoại, có tài khoản và đơn cập nhật ngay: bắt đầu từ Firebase Authentication và Firestore. Điểm tiện là có dịch vụ tài khoản và dữ liệu trong cùng bộ công cụ. Kiểm tra cấu hình mất mạng từng nền tảng; bản web mặc định chưa bật lưu dữ liệu để dùng lại sau khi đóng trang. Lan đặt lúc mất mạng thì hiện “đang chờ gửi”, đến khi máy chủ nhận mới hiện “đã nhận đơn”. Firestore khi mất mạng.
Web Next.js, backend cũ đang chạy tốt: bắt đầu với Vercel cho phần web và giữ backend. Hợp khi đội muốn link preview, phát hành web thường xuyên mà không chuyển dữ liệu. Nếu đội đã vận hành chủ yếu trên Google Cloud, Firebase App Hosting là phương án thay thế hợp lý.
Web Next.js và app điện thoại Firebase dùng chung đơn: ghép Vercel với Firebase khi cả việc dùng chung dịch vụ và luồng làm web Vercel đều có ích. Chọn App Hosting với Firebase khi đội muốn quản lý web trong hệ thống Google Cloud đang có. Khách vẫn dùng được cùng chức năng; chọn cách đội có thể quản lý và tìm lỗi dễ hơn.
Khi dự án cần nhiều hơn ví dụ quán cà phê
Nhiều bảng và báo cáo: PostgreSQL có thể phù hợp khi cần nối các bảng với nhau, chẳng hạn tồn kho, nhà cung cấp và hóa đơn. Firebase có PostgreSQL qua SQL Connect; app trên Vercel cũng nối PostgreSQL được. Firebase SQL Connect.
Chat hoặc kết nối trực tiếp: Vercel công bố WebSocket ở trạng thái public beta từ tháng 6/2026. WebSocket giữ một kết nối hai chiều, nhưng app vẫn cần xử lý nối lại và dữ liệu dùng chung. Listener Firestore và dịch vụ WebSocket xử lý những phần khác nhau của việc cập nhật trực tiếp; chọn theo hành vi app cần. Thông báo WebSocket Vercel, thời gian kết nối và dữ liệu dùng chung.
Việc chạy lâu: kiểm tra giới hạn, cân nhắc một chương trình xử lý nền riêng có thể phục hồi khi bị ngắt. Làm báo cáo lớn thì mình cần biết nó chạy tiếp thế nào, thay vì chỉ mong trang web đừng hết thời gian chờ. Giới hạn Functions Vercel.
5. Bên nào rẻ hơn?
Hóa đơn theo lượng việc hệ thống làm, không chỉ theo số khách. Firestore có thể tính phí đọc, ghi, lưu dữ liệu và tài nguyên khác. Listener có thể phát sinh lượt đọc khi dữ liệu đổi hoặc kết nối lại. Vercel tính theo gói và mức dùng, gồm tài nguyên xử lý và dữ liệu truyền đi. Dịch vụ nối vào có thể có hóa đơn riêng. Phí Firestore, giá Vercel.
Ví dụ thực tế: số khách như nhau, lượt đọc gấp mười
Quán có 1.000 lượt ghé web mỗi ngày. Mỗi lượt đọc một lần 20 bản ghi sản phẩm thì có 20.000 lượt đọc ban đầu. Tải cả 200 thì thành 200.000. Số khách không đổi nhưng dữ liệu đọc đã gấp mười. Phép tính chưa cộng cập nhật và phần tính phí khác; đây không phải báo giá.
Chuyển website sang Vercel mà vẫn đọc cùng dữ liệu Firestore thì những lượt đọc đó vẫn phát sinh. Đổi chỗ chạy web chưa làm phần cơ sở dữ liệu bớt việc.
Cache là giữ kết quả để dùng lại, giống để sẵn menu đã in ở quầy. Dùng lại trang menu có thể giảm việc máy chủ; dựng lại cho từng người thì làm nhiều việc hơn.
Trước khi nghĩ “gói này miễn phí”
Vercel: Hobby dành cho cá nhân, phi thương mại. Tài liệu Pro hiện ghi phí nền tảng 20 USD/tháng, gồm một thành viên có quyền triển khai web và 20 USD được trừ vào phí sử dụng. Khoản được trừ này không phải trần hóa đơn; thêm thành viên triển khai hoặc dùng nhiều hơn có thể phát sinh phí. Quán kinh doanh nên tính gói thương mại ngay từ đầu. Điều kiện Hobby, phí Pro.
Firebase: Spark có hạn mức miễn phí; Blaze tính theo mức dùng. App Hosting cần Blaze, Cloud Storage hiện cũng cần Blaze để duy trì quyền truy cập. Hạn mức miễn phí không xóa điều kiện liên kết thanh toán. Giá Firebase, điều kiện Cloud Storage.
Cảnh báo chi phí nhắc mình kiểm tra hóa đơn. Muốn tự dừng thì cần bật cơ chế dừng tương ứng. Giống đèn báo sắp hết xăng: thấy đèn sáng thì xe vẫn có thể chạy tiếp.
Mức trần Firebase hiện áp dụng cho AI Logic, App Hosting, Cloud Functions và Extensions, chưa phải trần chung cho Firestore hay mọi khoản trong project. Với Vercel, cần bật hành động tạm dừng bản đang phục vụ khách nếu muốn dừng lưu lượng khi chạm mức. Việc dừng có thể chậm và không dừng dùng qua API key AI Gateway hay v0. Dịch vụ nối ngoài cũng cần kiểm tra riêng. Ngân sách Firebase, Vercel Spend Management.
6. Khách bấm đặt hai lần thì sao?
Máy chủ kiểm tra tài khoản, giá hiện tại và món còn bán không. Mã yêu cầu giống số trên phiếu gọi món: gửi lại phiếu đó thì máy chủ nhận ra đây là cùng một lần đặt. Bước tìm đơn đã có hoặc tạo mới phải nằm trong cùng một giao dịch cơ sở dữ liệu, để hai yêu cầu đến cùng lúc không tạo thêm hai đơn.
Ví dụ thực tế: hai ly nước, mạng chập chờn
Lan đặt hai ly, mỗi ly 45.000 đồng. Máy chủ tính 90.000 đồng, kể cả khi ai đó sửa tổng tiền trên trình duyệt. Hệ thống lưu đơn A108 cho yêu cầu R17.
Lan không nhận được phản hồi nên bấm lại. App gửi lại R17; máy chủ trả lại A108. Mai thấy một đơn gồm hai ly, thay vì hai đơn giống nhau.
Máy chủ chạy trên Vercel hay Firebase thì bước này vẫn cần được viết trong app. Nếu thanh toán online, phải có kết quả đã xác minh từ bên thanh toán để biết tiền đã về. Lưu được A108 mới xác nhận rằng đơn đã được lưu.
7. Ba việc kiểm tra trước khi chốt
Quyền: đăng nhập giúp quán biết Lan là Lan. Nó không cho Lan mở đơn người khác hay sửa giá menu. Cần thử cả hai tình huống. Thẻ thành viên có ích, nhưng đâu phải chìa khóa ngăn kéo tiền.
Tốc độ: đo cả đường khách đi. Menu mở nhanh chưa đủ nếu gửi đơn phải đợi mười giây. Mạng lưới phân phối nội dung, gọi là CDN, đưa nội dung đến gần khách nhưng không sửa được truy vấn chậm. Nền tảng không bảo đảm tốc độ hay thứ hạng tìm kiếm.
Chuyển đi sau này: chuyển hosting khác với chuyển tài khoản, dữ liệu và đường dẫn tệp. Giữ rõ trách nhiệm từng phần. Đổi giao diện menu thì không nên phải thay cả sổ đơn.
8. Có AI thì sao?
AI SDK của Vercel giúp làm trả lời hiện dần và gọi công cụ. Firebase AI Logic có thư viện gọi Gemini từ app; Genkit hỗ trợ luồng xử lý AI. Các công cụ này không bắt website và cơ sở dữ liệu chạy cùng một nơi. AI SDK, Firebase AI Logic, Genkit.
Ví dụ thực tế: trợ lý hỏi món
“Món nào không có sữa?” có thể dùng thông tin menu. “Đơn của tôi đến đâu?” cần bản ghi hiện tại mà khách được xem. “Hủy giúp tôi đơn này” phải đi qua kiểm tra của backend. Tính cả phí mô hình, có thông báo dễ hiểu khi AI đợi quá lâu.
Trước khi chốt, viết ra việc đầu tiên khách cần làm xong. Chỉ xem menu thì bắt đầu từ hosting. Đăng nhập và giữ điểm thì thêm dịch vụ tài khoản, dữ liệu. Đội đã phát hành web Next.js mỗi tuần thì luồng làm web cần được tính kỹ hơn. Mỗi phần được chọn vì có việc cụ thể để làm.
In closing
Firebase supplies managed account and data services. Vercel runs web apps and server code, connecting to the services you choose. Both can host websites. Start with Firebase for a mobile app needing shared accounts and live data, Vercel for a Next.js web workflow, or both when those needs meet.
