A New Chapter with Supabase and Vercel w/ Judith Böhlert

Summary Link to this headline

As we dive into season 2 of building our virtual bookshelf app, we’re excited to shift from a client-side React single-page application to a full-stack, server-side rendered solution using Next.js on Vercel, with Supabase as our backend.

After discovering the powerful integrations between Vercel and Supabase, we couldn’t resist trying out their streamlined setup. This post is a breakdown of our approach to this transformation, why we chose server-side rendering, and our experience with the exciting tools that make this possible.

In this post, we talk about:

• Our shift from client-side to server-side rendering with Next.js.
• Using Vercel and Supabase for a seamless full-stack integration.
• Key new features: performance improvements, authentication, and a simplified setup process with Tailwind CSS and shadcn for styling.

Migrating from React SPA to Server-Side Rendering Link to this headline

In season one, our virtual bookshelf was a single-page React app. Recently, we’ve seen a lot of value in server-side rendering, particularly using Next.js with Vercel. We started exploring server-side options after learning that Vercel has integrated tightly with Supabase, allowing us to combine server-side functionality with a reliable backend database, all in a unified environment.

Now, with just a few clicks in Vercel, we can set up a fully functioning web app: Next.js for rendering, Supabase for data storage and authentication, and Tailwind CSS and shadcn for streamlined styling. The simplicity of the setup process made it clear that moving our app to server-side rendering wasn’t just viable but also exciting.

Simplifying the Setup with Vercel + Supabase Link to this headline

With Vercel’s integration with Supabase, we’ve gained a streamlined setup. By simply creating a new project, choosing Supabase as our backend, and selecting Next.js as the frontend framework, we could almost instantly have a server-rendered app ready to go. No more manual steps like configuring database connections or handling environment variables; Vercel handled these automatically.

In this project, we’re also leveraging Tailwind CSS for a consistent design approach and shadcn to improve UI/UX through reusable components. These choices not only help speed up development but also make our code cleaner and easier to maintain.

Key Features in Season Two Link to this headline

1. Performance Improvements One of our main goals is to enhance performance by rendering pages on the server, which reduces load times for users. This approach is particularly advantageous for our app, which benefits from having data securely stored and quickly accessed from Supabase’s database.
2. Integrated Authentication Authentication is essential for our app, but setting it up in season one was challenging. With Supabase, we’re using server-side authentication tied directly into Vercel. The integration means that we don’t have to spend additional time configuring third-party services or worrying about custom backends.
3. Deploying with One-Click Setup Vercel’s setup wizard lets us create repositories, integrate them with Supabase, and deploy the app—all with minimal configuration. We’re taking advantage of automatic environment variable management, GitHub integration, and repository setups, making it effortless to push updates and maintain our app.

The Result: Faster Development, Smoother User Experience Link to this headline

With everything set up and deployed through Vercel, we were thrilled to see our virtual bookshelf app running with server-side rendering. The deployment took just minutes, and we could instantly view the live app, complete with all necessary backend and authentication configurations. This simplified approach to setting up a server-side app has allowed us to focus more on the user experience and less on backend hassles.

Lastly, we reflected on the collaborative nature of this project. Working in public has been a rewarding experience for us. It’s allowed us to embrace the learning process, make mistakes, and ultimately grow as developers. We encourage others to try it out—it’s a great way to stay motivated and open to new opportunities.

1. Why did we choose server-side rendering over a single-page application?

   Server-side rendering provides improved performance, better SEO, and a smoother user experience, making it ideal for an app like ours.

2. How does Vercel’s integration with Supabase help with app development?

   Vercel’s integration simplifies setup by managing environment variables, authentication, and database connectivity, enabling faster and more reliable deployments.

3. What’s next for our virtual bookshelf app?

   We’ll be exploring more advanced features in Supabase, experimenting with UI/UX improvements, and ensuring that our app is production-ready with continuous updates.