?Architect low-cost serverless applications with next.js, Vercel, and google sheets
Serverless applications are a popular choice for developers because they allow you to build and deploy your applications without the need to manage infrastructure. In this article, we will discuss how to design serverless applications using?next.js,?Vercel, and?Google Sheets.
Next.js is a popular framework for building server-rendered React applications. We choose next.js as It provides?server-side rendering?and?incremental static site regeneration.
Vercel is a cloud platform and It integrates seamlessly with next.js, so we can easily build and deploy your next.js applications.
Google Sheets is a cloud-based spreadsheet tool that allows you to create, edit, and collaborate on spreadsheets in real time. It also provides APIs to programmatically access and modify the data. In this tutorial, we will be using Google sheets as our backend data store effectively making our application serverless as well as database less ??
? Requirements ?
Each year google cloud hosts a program, where for a period of 30 days they provide students from universities access to a lab environment called cloudskillboost and encourage students to complete the labs. In this tutorial, we will build kind of a SaaS application where different colleges can signup and create progress report dashboards for their institutions.
High Level Requirements
1. Allow a new college to signup
2. Allow each institution to access the dashboard at unique urls.
In this program, A facilitator is assigned to each institution who receives the daily progress report for that specific institution in a CSV file attachment, and attached data contains some PIIs like email addresses and others so they aren’t supposed to share the data directly to the program participants.
?? Backend Architecture Details
Each spreadsheet created on google sheets has a unique sheet identifier associated with it. For example, the spreadsheet ID in the URL?https://docs.google.com/spreadsheets/d/abc1234567/edit#gid=0?is “abc1234567”. Our application uses this?spreadsheet ID?to read and write data from the google sheets API.
The Master sheet?is owned by the application and it writes details about all the registered universities/colleges like sheet Id, Institution Name, and unique URL path.
The?Institution sheets?are owned by facilitators and it's their responsibility to daily update the spreadsheet data. The next.js server reads data from institution sheets and statically generates the dashboard.
For?authentication and authorization?with google APIs, we create a?service account?in the google cloud platform and request facilitators to grant viewer permissions on the institution sheets to that specific service account email id.
?? Frontend Architecture Details
The whole application is comprised of three main pages.
This page is very simple, It just contains a link to the registration page and little info about the site.
领英推荐
This page allows a facilitator to signup and creates a unique dashboard for their college.
This page shows a unique dashboard generated for each institution. Facilitators are required to daily update the latest data in the?institution sheet.?While generating this page, We internally call google sheet APIs and get the data from the sheet for the specified institution identified by the sheet Id.?So it's very important for facilitators to update the data.?We are planning to automate this step as well
?? Other consideration
The main goal while architecting the application was to load blazingly fast and make it low/no cost to host. We weighed the technologies and choose next.js as it provides serverside rendering and allows us to pre-render react components and ship the generated HTML instead of generating it on the client side. We also use a static site regeneration feature to invalidate the dashboard every two hours. At the end of every two hours when a new user visits our site a fresh page is generated and served to the client. We used?Vercel?as it nicely integrates with next.js and fully automates the deployment pipeline.
? Thanks for reading, the full code is available?here, PR and issues are always welcome.
? Sample dashboard available?here
Special Thanks to ChatGPT for the push.