Why I Chose Next.js and FastAPI for the Whalley Score Project

Why I chose Next.js for the whalley score project

Next.js is not just a frontend framework, but a production-ready web framework that considers rendering strategies, performance, SEO, and maintainability.
Whalley score is a service that provides both country information pages and user input-based score calculations. For services like Whalley score, where content and interaction coexist, Next.js is a very powerful choice. For example, country list and detail pages require fast loading and strong SEO, making SSG or ISR suitable. Score result pages depend on user input, so SSR is more appropriate.

What is Next.js?

Next.js is a full-stack web framework built on top or React.
While Reactis a library for building user interfaces, Next.js is a framework desigend to build real-world web applications using React.
With plain React, developers need to configure routing, server-side rendering, SEO, and build setting manually.
Next.js provides these features out of the box.

Rendering Methods in Next.js

Next.js allows multiple rendering strategies within a single project.
[ CSR(Client Side Rendenring) ]
• Rendering in the browser
• In CSR, the server sends an almost empty HTML file, and the browser downloads JavaScript andn renders the page using React
[ SSR(Server Side Rendering) ]
• Rendering on the server per request
• With SSR, the server sends a pre-rendered HTML page. As a result, the initial page load is faster and search engines can easily read the content.
[ SSG ]
• Static generation at build time
[ ISR ]
• Periodic regeneration of static pages

One of the biggest strengths of Next.js is that developer can choose the most appropriate rendering method based on the nature of each page.

App Router and File-Based Routing

The app router in Next.js uses file-based routing, where the folder structure directly maps to URLs. For example, app/score/page.tsx corresponds to the /score route. This approach makes the page structure intuitive and improves maintainablitiy.

Concept of Server Components

With the App router, Next.js allows components to be divided into server components and client components. Server components run on the server and generate HTML, while client components handle user interactions. This separation helps reduce unnecessary JavaScript sent to the browser and improves performance.

Why I Chose FastAPI for the Backend

FastAPI is a modern web API framework based on Python, and its biggest strength is that it satisfies performance, productibity, and type safety at the same time.
The Whalley score project is not a simple CRUD service.
Instead, it focuses on calcuation logic based on country-specific scoring rules and a scalable API structure, which makes FastAPI a very good fit for this project.

Role of the Whalley score backend

In this project, the backend does more than simply deliver data.
It is responsible for the core business logic of the project.
• Managing contry-specific working holiday scoring rules
• Calculating scores based on user input
• Versioning of scoring logic
• Providing APIs seperated from the frontend
• Supporting future extensions such as AI-based recommendations or data collection

Strong Compatibility with the Python Ecosystem

Because FastAPI is written in Python, it is well suited for data processing and logic implementation. In Whalley Score, complex scoring logic and conditional branching are important, and future extensions such as crawling or AI-based features are also considered.

High Performance with Async Support

FastAPI provides built-in support for asynchronous (async) processing. This allows efficient handling of multiple requests and helps reduce bottlenecks when calling external APIs or processing data.

Type Safety and Clear Data Structures

FastAPI uses Pydantic for data validation and type management.

As a result, request and response data structures become explicit, and invalid input can be detected and blocked at an early stage.

Automatic API Documentation

FastAPI automatically generates API documentation based on Swagger UI without additional configuration.

This is a major advantage for frontend collaboration and API testing.

Why I Chose Next.js and FastAPI Together

The combination of Next.js and FastAPI provides a clear separation of responsibilities between the frontend and the backend.

• Next.js: UI, UX, SEO, and page rendering
• FastAPI: Business logic, score calculation, and data processing

This separation improves maintainability and scalability as the project grows.

Independence Between Frontend and Backend

By using FastAPI as an API server, the frontend can evolve independently without being tightly coupled to backend implementation details. This also allows the same APIs to be reused when adding mobile apps or other clients in the future.

Separation of Rendering and Business Logic

Next.js focuses on rendering and user experience, while FastAPI focuses on data and business logic.
This separation improves code readability and makes each layer easier to test

Scalable Architecture

The Next.js + FastAPI architecture becomes even more powerful as the project grows.

New features, increased traffic, and additional clients can be supported without major changes to the existing structure.