Forem: Solomon Eseme

Backend Developer Resume Writing: The Ultimate Guide

Solomon Eseme — Sun, 25 May 2025 09:28:12 +0000

If you’re looking to land your next backend developer role, one of the most important tools in your job search is a strong resume.

Whether you’re just getting started as a junior backend developer or you’re an experienced backend engineer looking to make a move, your resume needs to reflect the skills and experience that will grab a recruiter’s attention.

In this guide, we’ll walk you through everything you need to know to write a backend developer resume that stands out.

From showcasing your technical skills to highlighting your key projects, we’ll cover the essential sections and tips to make sure your resume gets noticed by hiring managers.

Let’s jump in and help you create a backend developer resume that opens doors to your next job!

Who is a Backend Developer?

Before we dive into the resume tips, let’s quickly understand what a backend developer does. Simply put:

A backend developer builds and maintains the “behind-the-scenes” parts of a website or app.
They work with servers, databases, and application logic.
Think of them as the people who make sure everything works smoothly behind the curtain while the frontend developer makes the website look good and be user-friendly.

If you want to work with databases, APIs, server-side programming, and business logic, backend development is for you.

Why Is Your Resume So Important?

Your resume is your first impression. It’s the document that opens the door to your next job. If your resume is boring, messy, or missing key details, you’ll get overlooked no matter how talented you are.

A good backend developer resume will:

Show your skills clearly and confidently.
Highlight your experience and projects.
Prove you understand the tools and technologies companies need.
Make recruiters want to invite you for an interview.

How to Write a Backend Developer Resume: Step-by-Step

1. Choose the Right Resume Format

There are three main resume formats:

Chronological: Lists your work experience starting with the most recent. Best if you have steady experience.
Functional: Focuses on skills rather than work history. Good if you’re switching careers or have gaps.
Combination: Mix of both, showing skills and work experience.

For backend developers, chronological or combination resumes usually work best because you want to highlight your technical skills and your relevant work history.

2. Start with a Strong Resume Header

At the very top, include:

Your full name
Your professional title (e.g., Backend Developer, Software Engineer)
Contact info: phone number, email, LinkedIn profile, GitHub (very important!)
Location (city and state or just country is fine)

Example:

3. Write a Clear and Concise Summary or Objective

This is a short paragraph (2–4 sentences) summarizing who you are and what you bring to the table.

If you have experience, write a Summary focusing on your skills and achievements.
If you’re new, write an Objective focusing on your goals and eagerness to learn.

Example Summary for Experienced Dev:

Example Objective for New Dev:

4. Highlight Your Technical Skills

This is a must-have section. List the programming languages, frameworks, tools, and technologies you know that are relevant to backend development.

Group your skills to make it easy to read:

Languages: Java, Python, C#, JavaScript (Node.js)
Databases: MySQL, PostgreSQL, MongoDB
Frameworks: Express.js, Spring Boot, Django
Tools: Docker, Git, Jenkins
Cloud: AWS, Azure, Google Cloud

Make sure you tailor this list for each job application based on the job description.

Example:

5. Show Off Your Work Experience

This is the heart of your resume. For each job or project, include:

Job title
Company name and location
Dates of employment
Bullet points describing your responsibilities and achievements

Use action verbs and focus on results. Whenever possible, add numbers to show impact.

Example:

6. Include Projects (Especially if You’re a Beginner)

If you don’t have much professional experience, projects are a great way to show your skills.

List:

Project name
Technologies used
A short description of what you built or achieved

Example:

7. Education Section

List your degrees or certifications relevant to backend development.

Include:

Degree or certification name
School or institution
Graduation year (or expected graduation year)

Example:

8. Add Optional Sections

Depending on your background, you can add extra sections like:

Certifications: AWS, Google Cloud, Microsoft Azure, Docker
Open Source Contributions: If you contribute to GitHub projects
Languages: If you speak other languages fluently
Awards and Honors

Tips to Make Your Backend Developer Resume Stand Out

Use Keywords from the Job Description

Many companies use Applicant Tracking Systems (ATS) to scan resumes for keywords that match the job description. If your resume doesn’t include the right keywords, it might get overlooked.

So, always read the job description carefully and make sure to incorporate relevant keywords into your resume naturally.

For example, if the job asks for experience with Node.js, PostgreSQL , or AWS , make sure these technologies are mentioned if you’ve worked with them.

Keep It Clear and Simple

Recruiters and hiring managers often skim through hundreds of resumes in a short amount of time.

Keep your resume concise and to the point. Avoid large blocks of text, use bullet points to make your experience easy to digest.

Short, impactful sentences are more effective than lengthy paragraphs. Hiring managers want to see the key information in a glance.

Show Impact, Not Just Tasks

It’s tempting to list everything you did at your previous job, but showing impact is what truly makes your resume stand out.

Don’t just state your responsibilities, highlight how your work benefited the company or project.

For example, instead of saying, “Developed an API,” you can say, “Developed a high-performance API that handled 1,000+ concurrent requests, improving response times by 30%.”

Quantify your results whenever possible. Numbers and percentages can make your accomplishments more tangible and give hiring managers a clear sense of your contribution.

Proofread for Errors

It might sound basic, but proofreading your resume is a must. Even a small typo or grammatical mistake can make you seem careless and reduce your chances of getting an interview.

Use spell-check tools and ask someone else to review your resume for any overlooked mistakes. A fresh set of eyes can catch errors you might have missed.

Use a Clean Layout

First impressions matter! Your resume’s layout should be neat, organized, and professional. Use a simple, easy-to-read font like Arial or Calibri and make sure the spacing is consistent.

Margins should be even, and each section should be clearly defined with appropriate headings (e.g., “Work Experience,” “Education,” “Technical Skills”).

Include Links

Sharing links to your work makes a big difference. It allows recruiters to easily view your portfolio, GitHub projects, or professional profiles.

Link to your GitHub profile with sample projects or code contributions
Link to your LinkedIn profile for more details on your experience
Personal website or portfolio (if applicable) showcasing your work

Including these links shows that you’re tech-savvy and allows recruiters to dive deeper into your expertise.

Common Mistakes to Avoid

Too Long: Resumes should typically be 1–2 pages. If you’ve been in the industry for a while, try to keep your resume to a concise 2 pages. If you’re just starting, one page is often enough.
Lies or Exaggerations: Be honest about your skills and experience. Employers will eventually find out if you’ve overstated your abilities. Instead, focus on your strengths and show your eagerness to learn and grow.
No Contact Info: Never forget to include your contact info. Recruiters need to know how to reach you. Your phone number, email address, and LinkedIn or GitHub links should be clearly visible.
Overly Technical Language: While you want to showcase your technical skills, keep in mind that not everyone reviewing your resume will be a technical expert. Try to write in a way that is understandable to both technical and non-technical people. If you’re using jargon, make sure it’s necessary and clear.
No Customization: Don’t send the same resume for every job. Tailor your resume to the specific job description you’re applying for. Customizing your resume shows that you’ve put thought into your application and are genuinely interested in the role.

Ready to Craft Your Own Backend Developer Resume?

To help you get started, we’ve made a free resume template that you can easily customize for your career.

Simply click the link to make your own copy, and start editing it to suit your experience and skills!

This will give you a solid foundation to get noticed by hiring managers and recruiters. Best of luck, and happy job hunting!

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 25, 2025.

Backend Development: Ultimate Guide (2025)

Solomon Eseme — Sun, 18 May 2025 07:28:06 +0000

Imagine you’re using a ride-hailing app like Uber. You request a ride, and within seconds, the app processes your location, finds the nearest driver, calculates the fare, and ensures the transaction is secure — all happening behind the scenes. This seamless experience is powered by backend development.

Backend development is the backbone of web and mobile applications, handling everything from database management and business logic to security and API interactions.

In this AI era, backend development is more crucial than ever as applications become increasingly data-driven, AI-integrated, and distributed.

With the rise of real-time experiences, microservices, and scalable cloud infrastructure, a robust backend is the backbone of performance, security, and user trust in modern software.

Suppose you’re a beginner looking to start a career in backend development or an experienced developer exploring the latest trends. In that case, this guide will take you through everything you need to know — from core concepts to advanced backend architectures.

What is Backend Development?

Backend development, also known as server-side development , is the practice of building and maintaining the infrastructure that powers applications.

It manages data storage, security, authentication, business logic, and communication between frontend and backend services. The backend is the brain of an application, ensuring that everything runs smoothly under the hood.

A Brief History of Backend Development

In the early days of computing, applications were largely monolithic , running on a single machine or server. As the internet evolved, client-server architectures became standard, enabling applications to separate frontend and backend functionalities.

Today, backend development has advanced to include microservices, serverless computing, and cloud-based architectures that improve scalability and flexibility.

Key Responsibilities of Backend Developers:

Backend developers play a crucial role in application development, handling tasks such as:

Managing Databases : Storing, retrieving, and securing user data.
Building APIs : Connecting the frontend with the backend and third-party services.
Handling Authentication & Authorization : Implementing secure login and role-based access control.
Optimizing Performance : Enhancing application speed and scalability.
Implementing Business Logic : Enforcing application rules and workflows.
Monitoring and Debugging : Ensuring application reliability and minimizing downtime.

How Backend Development Works

To understand how backend development works, let’s break it down with a real-world example — a modern e-commerce website like Amazon.

Step-by-Step Breakdown of Backend Processes

User Request: A customer searches for “wireless headphones.”: The request is sent from the frontend (React, Vue, or Angular) to the backend via an API call.
Server Processing: The request reaches the backend server (Node.js, Django, or Spring Boot), where it is processed. Middleware components handle security checks and request validations. Logging mechanisms store request details for monitoring.
Response to Frontend: The backend sends a structured JSON response containing product details. The frontend displays the data dynamically, allowing user interaction.

This entire process happens within seconds, ensuring a seamless experience for users while maintaining security, performance, and scalability behind the scenes.

Frontend vs Backend Development

Frontend Development:

Focus: User Interface (UI) & User Experience (UX)
Technologies: HTML, CSS, JavaScript, React, Vue
Responsibilities: Creating visually appealing UI, client-side logic
Execution: Runs on the user’s browser

Backend Development:

Focus: Server-side logic, data handling
Technologies: Node.js, Django, Ruby on Rails, Spring Boot
Responsibilities: Handling server requests, business logic, and database management
Execution: Runs on the server

Core Technologies in Backend Development

Programming Languages

JavaScript (Node.js): Event-driven and asynchronous; ideal for scalable applications.
Python (Django/Flask): Simple syntax; strong for rapid development and AI integration.
Java (Spring Boot): Enterprise-grade; widely used in large-scale applications.
Go (Golang): Fast and efficient; suitable for microservices and performance-critical apps.
Rust : Gaining popularity for system-level performance with safety guarantees.

Frameworks

Express.js (Node.js): Express.js is a framework of Node.js used to build scalable backend systems with Node.js. Here’s an ultimate guide to Express.js and learn how to build your first backend application with Node.js.
Django/Flask (Python): Django and Flask are two different frameworks in the Python ecosystem, while both are used to build scalable backend systems, Django is more complete and popular than Flask. Here’s the ultimate guide to Django that will help you build your first Django backend application.
Spring Boot (Java): Spring and Spring Boot are the most popular frameworks in the Java ecosystem used to build backend systems with Java. This ultimate guide to Spring Boot will introduce you to building backend systems with Java.
NestJS (TypeScript): Lastly, we have NestJS, which is another Node.js framework with support for TypeScript. Here’s the ultimate guide to learn NestJS and build your first NestJS backend application.

Databases

Relational : PostgreSQL, MySQL
NoSQL : MongoDB, Firebase
Caching : Redis, Memcached

API Tools

REST and GraphQL
Postman, Swagger, and Insomnia for testing and documentation

Hosting & Cloud Services

AWS, Google Cloud, Microsoft Azure, Heroku, Vercel (for serverless functions)

Backend Development Best Practices

Security

Always hash passwords (bcrypt, Argon2)
Use HTTPS with TLS
Sanitize user input to prevent SQL injection and XSS

Code Quality

Modularize code using MVC or other design patterns
Write reusable and testable functions
Use linting tools and formatters (ESLint, Prettier)

Performance

Use lazy loading and caching
Optimize DB queries with indexes
Monitor bottlenecks using APM tools (Datadog, New Relic)

Testing & CI/CD

Write unit and integration tests (Jest, Mocha, PyTest)
Automate deployments with GitHub Actions, Jenkins, or GitLab CI

Backend Developer Roadmap for 2025

Start with a language : JavaScript, Python, or Java
Learn the runtime/environment : Node.js, JVM, Python
Pick a framework : Express, Django, Spring Boot
Understand databases : SQL (PostgreSQL), NoSQL (MongoDB)
Build RESTful APIs : Learn routing, controllers, middleware
Implement authentication : Sessions, JWT, OAuth
Explore cloud and deployments : AWS, Docker, CI/CD
Build real-world projects : Blogs, eCommerce APIs, CRMs
Study system design & algorithms : For job interviews and scale
Join communities & contribute to open-source

Backend Developer Salaries in 2025

Backend development continues to be one of the most in-demand and well-compensated areas in tech. Salaries vary depending on factors such as location, experience, tech stack, and company size, according to Glassdoor.

Global Salary Ranges:

According to Glassdoor at the time of writing, below are the Salary ranges for Backend Developers in 2025:

United States :

Junior: $80,000–$110,000/year
Mid-Level: $110,000–$140,000/year
Senior: $140,000–$180,000+/year

Europe (Germany, UK, Netherlands):

Junior: €45,000–€60,000/year
Mid-Level: €60,000–€80,000/year
Senior: €80,000–€110,000+/year

India :

Junior: ₹6–10 LPA
Mid-Level: ₹10–20 LPA
Senior: ₹20–40+ LPA

Remote Roles :

Vary based on region, but often match global competitive rates if hired by international companies.

Top Paying Skills:

Microservices Architecture
Cloud Infrastructure (AWS, GCP, Azure)
DevOps & CI/CD
System Design
Rust/Go/Scala expertise

Salary Tips:

Build an impressive portfolio with real-world projects
Contribute to open-source and build your GitHub profile
Learn cloud platforms and system design
Don’t hesitate to negotiate or change companies for better compensation

Trends in Backend Development (2025)

Serverless Functions (AWS Lambda, Cloudflare Workers)
Edge Computing for low-latency processing
AI-augmented Backends for personalization and analytics
Rust and Go adoption in high-performance systems
Infrastructure as Code using Terraform, Pulumi

Conclusion

Backend development is evolving faster than ever. Whether you’re building APIs, managing cloud services, or deploying microservices, the need for skilled backend engineers is growing.

Mastering backend development means learning tools, understanding systems, writing secure and scalable code, and building real-world applications.

Start small, build consistently, and follow the roadmap. The backend world in 2025 is yours to master.

FAQs

Q: Is backend development harder than frontend?

A: Not necessarily — it depends on your interests. Backend focuses more on logic, data, and systems, while frontend is about UI/UX and design.

Q: Can I become a backend developer without a CS degree?

A: Absolutely. Many backend developers are self-taught. What matters most is your ability to build, test, and scale applications.

Q: How long does it take to become a backend developer?

A: With consistent learning and building projects, 6–12 months is a realistic range for job-ready skills.

Q: Should I learn DevOps as a backend developer?

A: Yes, at least the basics. Understanding CI/CD, Docker, and cloud infrastructure is essential for modern backend roles.

Q: Do I need to know frontend development to be a good backend developer?

A: While it’s not mandatory, understanding frontend basics (like HTML, CSS, and JavaScript) helps in building better APIs and debugging issues related to data flow between the frontend and backend.

Q: Is learning database management necessary for backend development?

A: Absolutely. Databases are central to backend development since they store and retrieve data for applications. Knowledge of SQL (PostgreSQL, MySQL) or NoSQL (MongoDB, Redis) is crucial.

Q: Can I do backend development with JavaScript alone?

A: Yes, using Node.js , you can build fully functional backend applications with JavaScript. It’s especially useful for real-time applications like chat apps and collaborative tools.

Q: What soft skills are important for backend developers?

A: Key soft skills include:

Problem-solving: Debugging issues efficiently.
Communication: Explaining complex logic to non-technical stakeholders.
Collaboration: Working well with frontend developers and DevOps engineers.
Adaptability: Learning new technologies as they emerge.

Q: Should I learn NoSQL or SQL databases first?

A: For beginners, learning SQL (e.g., MySQL, PostgreSQL) is a good start because it’s structured and easier to understand. After mastering SQL, you can explore NoSQL (e.g., MongoDB, DynamoDB) for more flexible, schema-less data storage.

Q: Are backend developers in demand?

A: Absolutely! With the rise of cloud computing, microservices, and API-driven applications, the demand for skilled backend developers is continuously growing.

Want to go deeper?

Join our backend engineering community, access real-world backend projects, and check our Backend Engineering Content Hub.

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 18, 2025.

How to use the Default Trait in Rust

Solomon Eseme — Fri, 16 May 2025 21:12:34 +0000

Introduction

When working with structs or enums in Rust, we often need a way to create a "standard" or "initial" instance without specifying all the fields every time. Manually setting each field can be repetitive, especially for complex types. How can we create a sensible default instance of a type conveniently?

Enter the std::default::Default trait. This trait provides a standardized way for types to offer a default value. If a type implements Default, we can easily get a default instance, simplifying initialization and making our code cleaner, particularly when dealing with configuration structs or optional fields.

The Need for Default Values

Imagine a configuration struct for an application:

struct AppConfig {
    timeout_ms: u32,
    retries: u8,
    api_endpoint: String,
    enable_logging: bool,
}

fn main() {
    // Manually creating an instance feels verbose
    let config = AppConfig {
        timeout_ms: 5000,
        retries: 3,
        api_endpoint: "https://api.example.com".to_string(),
        enable_logging: false,
    };
    // ... use config ...
}

If we often need a configuration with standard settings (say, a timeout of 5000ms, 3 retries, a default endpoint, and logging disabled), writing this out repeatedly is tedious. Furthermore, if we add new fields to AppConfig, we have to update every place where we manually create it.

This is where the Default trait shines.

Introducing `std::default::Default`

The Default trait is remarkably simple. It's defined in the standard library (std::default::Default) and requires implementing just one method:

pub trait Default: Sized {
    fn default() -> Self;
}

The default() associated function takes no arguments and returns an instance of the type (Self) populated with default values. Many primitive types and standard library types already implement Default (e.g., numbers default to 0, bool to false, Option to None, String and Vec to empty ones).

Implementing `Default`

There are two main ways to make our types implement Default:

Using #[derive(Default)]

If all the fields within our struct also implement Default, we can simply ask the compiler to generate the implementation for us using the derive attribute:

#[derive(Default, Debug)] // We derive Default here!
struct AppConfig {
    timeout_ms: u32,       // u32 implements Default (defaults to 0)
    retries: u8,           // u8 implements Default (defaults to 0)
    api_endpoint: String,  // String implements Default (defaults to "")
    enable_logging: bool,  // bool implements Default (defaults to false)
}

fn main() {
    let default_config: AppConfig = AppConfig::default();
    println!("Default Config: {:?}", default_config);
    // Output: Default Config: AppConfig { timeout_ms: 0, retries: 0, api_endpoint: "", enable_logging: false }
}

This is the easiest way, but the derived defaults might not always be what we consider "sensible" (like 0 for timeout_ms).

For enums, we can also derive Default, but we must explicitly mark one of the unit variants (a variant without data) with #[default] to tell the compiler which one is the default:

#[derive(Default, Debug)]
enum LogLevel {
    Debug,
    Info,
    #[default] // Warning is the default level
    Warning,
    Error,
}

fn main() {
    let level: LogLevel = LogLevel::default();
    println!("Default log level: {:?}", level);
    // Output: Default log level: Warning
}

Manual Implementation

If derive isn't suitable (e.g., some fields don't implement Default, or we need specific default values different from the derived ones), we can implement the trait manually:

#[derive(Debug)] // Cannot derive Default if we implement manually
struct AppConfig {
    timeout_ms: u32,
    retries: u8,
    api_endpoint: String,
    enable_logging: bool,
}

// Manual implementation
impl Default for AppConfig {
    fn default() -> Self {
        AppConfig {
            timeout_ms: 5000, // Sensible default timeout
            retries: 3,       // Sensible default retries
            api_endpoint: "https://api.example.com".to_string(), // Default endpoint
            enable_logging: false, // Logging off by default
        }
    }
}

fn main() {
    let sensible_defaults: AppConfig = AppConfig::default();
    println!("Sensible Defaults: {:?}", sensible_defaults);
    // Output: Sensible Defaults: AppConfig { timeout_ms: 5000, retries: 3, api_endpoint: "https://api.example.com", enable_logging: false }
}

Here, we provide the exact default values we want inside the default() function. Remember, we cannot both derive and manually implement Default for the same type.

Using Default

Once a type implements Default, we can get its default value using TypeName::default() or the fully qualified path std::default::Default::default().

A particularly useful pattern is combining Default::default() with struct update syntax. This lets us specify only the fields we want to change, while the rest take their default values:

#[derive(Default, Debug)]
struct AppConfig {
    timeout_ms: u32,
    retries: u8,
    api_endpoint: String,
    enable_logging: bool,
}

impl AppConfig {
 fn default() -> Self { // Custom sensible defaults
        AppConfig {
            timeout_ms: 5000,
            retries: 3,
            api_endpoint: "https://api.example.com".to_string(),
            enable_logging: false,
        }
    }
}


fn main() {
    // Override only timeout and logging, keep other defaults
    let custom_config = AppConfig {
        timeout_ms: 10000,
        enable_logging: true,
        ..AppConfig::default() // Fill the rest with defaults
    };

    println!("Custom Config: {:?}", custom_config);
    // Output: Custom Config: AppConfig { timeout_ms: 10000, retries: 3, api_endpoint: "https://api.example.com", enable_logging: true }
}

This makes creating slightly modified instances very easy.

Common Use Cases

Configuration Structs: Providing sensible defaults for application settings.
Builder Pattern: Often, the Default implementation provides the starting point for a builder.
Initializing Collections: Getting an empty Vec, HashMap, or String.
Generic Code: In generic functions, T: Default allows creating a default instance of T.
Testing: Quickly creating instances with default data for tests.

Considerations

Derive Limitations: #[derive(Default)] only works if all fields implement Default. If even one field doesn't, we must implement it manually.
Meaningful Defaults: Ensure the default values make sense for the type's purpose. Sometimes the derived defaults (like 0 or empty strings) aren't appropriate.
Initialization Cost: While usually cheap, the default() function can perform non-trivial work (like allocating memory for a String or Vec, or even more complex setup). Be aware if performance in initialization is critical.

Summary

The std::default::Default trait provides a clean and standard way to create default instances of Rust types. Whether through the convenient #[derive(Default)] attribute or a manual implementation for more control, it helps reduce boilerplate code and makes initializing structs and enums more ergonomic.

With Default::default() and struct update syntax, we can create instances with little fuss, focusing only on the values that differ from the standard defaults. If you want to learn more about rust you can always check out our in-depth course on the language

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

How to Become a Backend Developer (2025)

Solomon Eseme — Fri, 16 May 2025 00:09:51 +0000

The world of backend development can feel overwhelming at first, especially if you’re just starting. However, you’re in the right place if you’re a newbie or someone curious about backend development.

In this guide, we will break down everything you need to know to become a backend developer this year, step by step.

We will explore the core concepts of backend development, the technologies you’ll need to learn, and the pathways to becoming a proficient backend developer.

By the end of this guide, you’ll have a clear roadmap for your journey.

What is Backend Development?

Backend development refers to the server-side of web applications. It’s everything that happens behind the scenes that users don’t see, but is crucial to make the app work. As a backend developer, you will deal with databases, server management, APIs, and the business logic that powers the app.

To help you visualize, let’s break down the core components of a backend application:

Server : The physical or virtual machine that hosts the web application.
Database : The storage system where the application data is stored, such as MySQL, MongoDB, or PostgreSQL.
Application : The code that runs the logic of the app. It handles the requests made by users and fetches the data from the database.
APIs (Application Programming Interfaces): These allow different systems to communicate with each other. Backend developers often create and manage APIs.

Here’s a structured backend development content hub that will guide you step-by-step to become a great backend engineer.

Steps to Becoming a Backend Developer

Below are the steps to become a backend developer. We have included course recommendations are the latter part of this guide to help you get started immediately.

1. Learn the Fundamentals of Programming

As with any programming role, learning the fundamentals of coding is crucial. Before jumping into backend-specific technologies, you should have a strong understanding of the following core concepts:

Variables and Data Types
Control Structures (if statements, loops)
Functions and Methods
Object-Oriented Programming (OOP)

Programming languages that are commonly used in backend development include Python, Java, JavaScript (Node.js), Ruby, PHP, and Go.

If you’re just starting, we recommend Python for its readability and versatility, which makes it a popular choice for beginners.

2. Choose a Backend Language

Once you’re comfortable with the basics of programming, it’s time to pick a backend language. Each backend language has its strengths and is suited for different types of applications.

Recommended Backend Languages:

Python : A great starting language due to its simplicity and wide usage in backend frameworks like Django and Flask.
JavaScript (Node.js): If you already know JavaScript from frontend development, learning Node.js will allow you to use the same language on both the frontend and backend.
Java : Known for its stability and scalability, Java is used for large enterprise-level applications and backend systems.
Ruby : Ruby on Rails is a popular framework for building web applications quickly.
Go (Golang): A systems programming language designed by Google, Go is known for its speed and efficiency, making it ideal for high-performance applications.

For someone starting, we would recommend starting with Python or JavaScript (Node.js), as both have extensive resources and beginner-friendly frameworks.

At Masteringbackend, we have a series of courses on Python , Node.js , Rust , Ruby , PHP, and Golang created following industry-standard roadmaps to turn you into a great backend engineer.

3. Learn about Databases

Backend development involves dealing with data, so understanding how databases work is crucial. There are two primary types of databases you’ll encounter in backend development:

Relational Databases (SQL): These databases store data in tables and use SQL (Structured Query Language) to interact with the data. Popular examples include MySQL , PostgreSQL , and SQLite.
Non-relational Databases (NoSQL): These databases are more flexible and store data in formats like JSON or key-value pairs. Examples include MongoDB , Redis , and Cassandra.

Learning SQL is essential for any backend developer, as it’s used to query relational databases. But understanding NoSQL databases is equally important, especially as the web becomes more data-driven.

When to Use SQL vs. NoSQL:

SQL (Relational)

Best for structured data with well-defined schemas
Excellent for complex relationships (e.g., joins)
Example: MySQL, PostgreSQL, SQLite
Use Cases: Financial systems, Inventory Management, ERP systems
Vertically scalable (more powerful server)
Strong ACID compliance (Atomicity, Consistency, Isolation, Durability)

NoSQL (Non-relational)

Ideal for unstructured or rapidly changing data
Less optimal for complex joins; better for hierarchical data with nested objects
Examples: MongoDB, Cassandra, Redis
Use Cases: Social media feeds, IoT data, Real-time analytics
Horizontally scalable (multiple servers or clusters)
Typically, eventual consistency, strong consistency can be achieved with extra setup

Get acquainted with databases and how they help store, retrieve, and manipulate data.

4. Understand How the Web Works

As a backend developer, you’ll need to understand how the web works at a fundamental level. This includes learning about HTTP (Hypertext Transfer Protocol), the protocol that powers web communication. Here are a few key concepts to master:

HTTP Methods : GET, POST, PUT, DELETE, and PATCH.
Request and Response : How clients (e.g., web browsers) send requests to the server, and how the server responds.
Status Codes : What different HTTP status codes (like 200, 404, 500) mean and how to handle them.
RESTful APIs : Learn how REST (Representational State Transfer) works to create standardized APIs that allow different systems to communicate.

Understanding the flow of information from the client to the server is essential in backend development.

Here’s a diagram that illustrates how various components interact in a backend system:

5. Master a Backend Framework

Once you’ve chosen your backend language and learned the basics, it’s time to dive into frameworks. Frameworks make backend development easier by providing tools and libraries that handle common tasks.

Popular Backend Frameworks:

Python : Django, Flask
JavaScript (Node.js): Express.js, Koa.js
Java : Spring Boot, Java EE
Ruby : Ruby on Rails

Each of these frameworks has its own strengths, but Django (Python) and Express (Node.js) are excellent choices for beginners. They both have large communities and extensive documentation, making it easier to get started.

6. Learn About APIs and Web Services

As a backend developer, you’ll often need to create and manage APIs (Application Programming Interfaces). APIs allow the backend to communicate with the frontend, third-party services, and external systems. Understanding how to build, test, and consume APIs is a crucial skill.

A commonly used architectural style for APIs is REST (Representational State Transfer), but you may also encounter GraphQL or gRPC.

Building a RESTful API:

Use appropriate HTTP methods (GET, POST, PUT, DELETE)
Ensure the API is stateless
Design meaningful resource names and use proper HTTP status codes

API and API design is a broad topic and one that is necessary for every backend engineer. We have covered API and API design in our newsletter series here.

7. Version Control with Git

Version control is an essential skill for any developer. Git helps you track changes in your code, collaborate with other developers, and deploy your code to production.

Learn how to use Git for managing your code and collaborating with other developers on platforms like GitHub or GitLab. Mastering Git is a must-have skill for backend developers.

Branching, Pull Requests, and Merge Conflicts :

Learn how to create feature branches and submit pull requests.
Understand how to resolve merge conflicts to maintain a clean codebase.

8. Testing and Debugging

Testing is a vital part of backend development. It ensures that the application behaves as expected and helps catch bugs early in development. Learn how to write unit tests, integration tests, and use debugging tools to troubleshoot issues in your backend code.

Types of Testing:

Unit Testing : Testing individual components in isolation.
Integration Testing : Testing how different components work together.
End-to-End Testing : Testing the entire flow of an application.

Testing Tools :

Jest (for Node.js)
PyTest (for Python)
JUnit (for Java)

9. Deploying Applications

Once you’ve built a backend application, you need to deploy it. Learning how to deploy your backend code to a server is a critical step in the development process. Popular deployment platforms include:

Heroku
AWS (Amazon Web Services)
Google Cloud Platform
Microsoft Azure

Learn how to deploy your backend applications to one of these platforms and understand the basics of CI/CD (Continuous Integration and Continuous Deployment).

CI/CD and Docker

Modern backend development requires not only deploying your applications but also setting up CI/CD pipelines to automate testing and deployment. Docker is a popular tool for containerizing applications, and Kubernetes helps with managing these containers in a scalable way.

10. Build Projects

The best way to cement your knowledge is by building projects. Here are some project ideas to get started:

Build a simple CRUD application (Create, Read, Update, Delete) using a backend framework and database.
Create a blog API that allows users to create and manage blog posts.
Build an e-commerce API for managing products, orders, and users.

You can explore a list of 100+ backend projects you can start building now.

Conclusion

Becoming a backend developer takes time, practice, and a commitment to learning. By following the steps outlined in this guide, starting with the basics, learning key technologies, and building projects, you’ll be well on your way to becoming a skilled backend developer.

If you’re looking for structured courses that will guide you step-by-step, check out MasteringBackend.com for a variety of backend-focused courses designed to take you from beginner to pro.

Remember, the journey to becoming a backend developer is all about consistency. Stay curious, keep building, and you’ll be creating powerful server-side applications in no time.

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 16, 2025.

Top 5 Python Frameworks

Solomon Eseme — Thu, 15 May 2025 23:43:03 +0000

Top 5 Python Frameworks (2025)

Python is one of the most popular programming languages, especially in web development. With its simplicity and vast ecosystem, Python has become the go-to language for building scalable and efficient web applications.

Whether you’re just starting your journey as a backend developer or exploring frameworks to elevate your Python development skills, this article will dive into the top 5 Python frameworks you should learn this year.

Why Choose Python for Web Development?

Python has consistently ranked as one of the most beloved programming languages in the Stack Overflow Developer Surveys. Its syntax is clean, easy to read, and highly versatile, making it an excellent choice for both beginners and seasoned developers.

Here are some reasons why Python is ideal for web development:

Ease of Learning and Use: Python’s simple and readable syntax makes it an ideal choice for beginners.
Rich Libraries and Tools: Python offers an extensive range of libraries that help developers with everything from machine learning to web scraping.
Strong Community Support: Python has one of the largest developer communities, ensuring plenty of resources, tutorials, and frameworks are available.
Scalability and Flexibility: Python frameworks are capable of handling everything from small-scale applications to large, complex enterprise systems.

When you’re ready to dive into Python for Backend Development, I will recommend the “Become a Python Backend Engineer” course.

It is an all-in-one Python course for learning backend engineering with Python. This comprehensive course is designed for Python developers seeking proficiency in Python.

Become a Python Backend Engineer

Top 5 Python Frameworks to Learn in 2025

We’ll explore the top 5 Python frameworks based on popularity, ease of use, community support, GitHub stars, and real-world usage. These frameworks will help you get up to speed quickly and are great for building production-ready applications.

Django

Django is a high-level Python framework that promotes rapid development and clean, pragmatic design. It’s known for its “batteries-included” philosophy, meaning it provides all the necessary tools for developers to build a web application without needing third-party libraries.

Features:

Built-in admin interface for managing application data
Secure by default (protection against SQL injection, cross-site scripting, etc.)
Robust ORM (Object-Relational Mapping) for interacting with databases
Supports RESTful APIs and easy integration with other APIs
Extensible with third-party packages

Popularity:

GitHub Stars: 83.5k+
PyPI Downloads: 24.2M+ per month
Usage: Widely used by companies like Instagram, Pinterest, and Spotify.

Learning Resources:

Flask

Flask is a lightweight Python web framework that’s often described as a “micro-framework.” It doesn’t include many built-in features like Django, but is extremely flexible, allowing developers to pick and choose the libraries they need.

Features:

Minimalist approach with minimal setup
Highly extensible (great for microservices and APIs)
Built-in support for Jinja2 templating and Werkzeug WSGI toolkit
Easy integration with other libraries for added functionality

Popularity:

GitHub Stars: 69.5k+
PyPI Downloads: 100.8M+ per month
Usage: Flask powers applications like Netflix, Reddit, and Lyft.

Learning Resources:

FastAPI

FastAPI is a modern, fast (hence the name), and high-performance web framework for building APIs with Python. It is based on standard Python type hints, making it one of the most developer-friendly frameworks out there.

Features:

Extremely fast (competes with Go and Node.js in benchmarks)
Automatic interactive API documentation (using Swagger UI and ReDoc)
Built-in data validation using Python type hints
Asynchronous programming support (great for building high-performance applications)
Excellent for RESTful APIs and GraphQL

Popularity:

GitHub Stars: 52k+
PyPI Downloads: 92.9M+ per month
Usage: Companies like Microsoft, Uber, and Netflix use FastAPI for building APIs.

Learning Resources:

Tornado

Tornado is an asynchronous web framework and networking library designed to handle large numbers of simultaneous connections. It is ideal for building long-running network applications like real-time web services and websockets.

Features:

Non-blocking network I/O
Real-time web functionality (perfect for chat applications, dashboards, etc.)
Scalable for handling thousands of open connections
Built-in support for websockets and HTTP/2

Popularity:

GitHub Stars: 21.9k+
PyPI Downloads: 55.9M+ per month
Usage: Popular for real-time applications like FriendFeed and Dailymotion.

Learning Resources:

Pyramid

Pyramid is a flexible and minimalistic Python framework used for building both small and large-scale applications. It allows developers to choose the right tools and libraries based on their project’s needs.

Features:

Highly flexible (developers can choose their templating, database, and other components)
Easy-to-use authentication and authorization system
Built-in support for URL dispatching and traversal
Ideal for applications of any size (small or large)

Popularity:

GitHub Stars: 4k+
PyPI Downloads: 2.1M+ per month
Usage: Pyramid is used by large companies like Mozilla.

Learning Resources:

Choosing the Right Framework

Selecting the right framework depends on your specific needs:

For Rapid Development: Django and Flask are excellent choices for quickly building applications.
For High-Performance APIs: FastAPI and Tornado are great for building scalable, asynchronous APIs.
For Flexibility and Minimalism: Pyramid and Flask provide a lot of flexibility with minimal overhead.

Bonus

Web2py : Great for beginners with its full-stack nature.
CherryPy : A minimalistic Python framework ideal for building small web applications.

Conclusion

Python offers a wide variety of web frameworks to choose from, each catering to different needs. Whether you are building a full-fledged web application or a high-performance API, there’s a Python framework suited to your project.

By learning and mastering one or more of these frameworks, you’ll be able to develop scalable, efficient, and secure applications with Python in 2025.

Which framework are you excited to learn next? Let us know in the comments!

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 15, 2025.

Top 5 Java Backend Development Courses (2025)

Solomon Eseme — Mon, 12 May 2025 19:14:36 +0000

The internet is filled with lots of Java Backend Development Courses. Therefore, choosing the best Java backend development course can be a nightmare for newbies looking to start or change careers.

Java is a popular programming language with a ground-breaking of millions of developers worldwide, with over 7.1 million professionals using it to build robust applications. Also, Java runs on over a billion devices according to Oracle.

This groundbreaking record shows the value and relevancy of learning Java today as a backend engineer.

You must choose the Best Java Course this year to achieve this goal effectively. A course that is designed to teach you the basics and also prepare you for the real challenges in your tech journey.

If you’re planning to start your Java backend development journey, investing in the right Java Backend Development course could be the key to your success.

To help reduce the time spent researching and searching for the best backend development course, we have already prepared a list of the top 5 best Java backend development courses. These courses are thorough, beginner-friendly, and will prepare you for the job market.

As part of our criteria, we have assembled the best course to learn Java for Backend Development. These courses combine the right essential theories, including practical projects, while making learning enjoyable and effective.

Additionally, these top-rated courses boast a 90% satisfaction rate from participants because they prepare them for the job and cover almost everything needed to become a Java Backend Developer.

Top 5 Java Backend Development Courses 2025

Here’s a comprehensive guide to the Top 5 Best Java Backend Development Courses for 2025. These courses are called Roadmap Java Backend Courses, designed to take you from a complete beginner to a different level of expertise.

Become a Java+Spring Backend Developer.
Mastering Java Backend with Oracle University.
Learn Java by Creating Applications.
Become a Java Backend Developer Bootcamp
Building Scalable Java Microservices with Spring Boot and Spring Cloud

1. Become a Java+Spring Backend Developer

The course takes you from ground zero and gradually moves you to become proficient in Java Backend Development.

Below are the modules covered in this course:

Java Essentials: The Java Essentials module is a complete, beginner-friendly course that explains the Core Java Basics, Object-Oriented Programming, Java syntax, and concepts such as variables, data types, arrays, strings, functions, control flow in Java, and error handling. This 49-video lesson course will expose you to core Java basics, Object-Oriented Programming, and Error Handling in Java.
Advanced Java: As the name suggests, this is a complete advanced Java course that aims to teach you advanced concepts in Java, such as Collections, Java I/O Streams and Build Tool, and Multithreading in Java. This course explores I/O streams, collections, build tools, and multithreading in great detail, giving you the required knowledge to excel in Java Backend Development.
Design Patterns in Java: In this module, you will learn the significance of design patterns and how to apply key Creational, Structural, and Behavioral patterns to create robust, maintainable, and scalable Java software solutions.
Unit Testing in Java: In this module, you will learn the importance of unit testing, the principles of Test-Driven Development (TDD), how to write test cases using JUnit, how to utilize advanced JUnit features like parameterized tests and test suites, and how to implement mocking with Mockito.
Spring Framework and Spring Boot: In this module, you’ll begin with the essentials of the Spring Framework, exploring how to configure beans using annotations and XML, manage bean lifecycles, and tap into Spring’s modular ecosystem, including AOP, Spring MVC, Spring Batch, Integration, and JMS. As you progress, you’ll dive deep into security, messaging, and cloud support through Spring Security and Spring Cloud.
Microservices in Java: You will learn about the benefits and challenges of Microservices Architecture, how to build and configure microservices with Spring Boot, enable communication between microservices using Feign Client, implement event-driven messaging brokers, configure service discovery and registration with Eureka, and utilize API Gateway and load balancing with Zuul, Spring Cloud Gateway, and Ribbon.
Containerization: In this module, you’ll learn to use Docker and Kubernetes by containerizing a Java application, working with Docker images, containers, registries, Dockerfiles, and Docker Compose, then dive into Kubernetes architecture and components like Pods, Nodes, and Clusters, set up clusters with Minikube and AWS, manage resources such as Deployments, Services, Ingress, ConfigMaps, and Secrets, scale applications, and implement monitoring and logging.
Milestone Projects in Java: Build over 10+ projects while learning Java. Build a SaaS product in Java.

It is an all-in-one Java and Spring course for learning backend engineering with Java. This comprehensive course is designed for Java developers seeking proficiency in Java.

Course Highlights:

Lifetime access to course materials
Dedicated doubt resolution sessions
Industry-oriented curriculum following the Roadmap.sh
Live sessions and webinars with industry experts
Certification upon completion
Real-world projects and case studies

Course Duration: 2–4 months.

Course Price: starting at $60 monthly.

Course Link: https://masteringbackend.com/courses/become-a-java-spring-backend-engineer

2. Mastering Java Backend with Oracle University

This is the official Java course from Oracle University. Java is currently owned by Oracle Corporation, which acquired Sun Microsystems, the original developers of Java.

However, the Java core specification is managed through the Java Community Process (JCP), and Oracle owns the official Java Standard Edition (SE) implementation.

The Oracle University has created a series of Java courses to help you develop in-demand programming skills with comprehensive training on the latest Java technology.

Below are some of the Java Backend Development Courses from Oracle University:

Java Explorer: Learn the basics of Java, such as variables, loops, objects, classes, arrays, and decision-making constructs.
Java SE 11: Programming Complete: This course is intended for students with some programming experience and is a comprehensive training for Java developers.
Developing Applications for the Java EE 7 Platform: This course teaches you how to build and deploy enterprise applications with Java EE.
Architect Enterprise Application with Java EE: This course teaches you how to develop robust architectures for enterprise Java applications.

The Oracle University is a subscription-based platform; you can access most of the courses when you subscribe. Also, you can access certification courses from the university and earn a recognized certificate from Oracle.

3. Learn Java by Creating Applications

This is an official course from JetBrains, the creators of JetBrains IDEs and the Kotlin programming language. It teaches Java development practically by building chatbots, games, algorithms, and even neural networks from scratch.

The course is subdivided into tracks to help you gradually expand your knowledge and improve in the areas that interest you.

Below is a list of the tracks:

Java for Beginners: This course is for complete Java beginners and programming newbies. Its track will help you start and prepare for some computer science certifications.
Java Core: This track is a great choice for learners who want to gain a firm grasp of Java fundamentals and be introduced to algorithmic problems and mathematical models.
Java Backend Developer: This track was specifically designed to prepare you for your first Junior Developer interview. It contains tasks necessary to successfully pass your technical interview.
Java Desktop Application Developer: If you already know the basics of Java and would like to create desktop apps, this is the right track for you. You will also master the Swing framework.

Course Highlights:

200+ interactive projects
Personalized study plan
Integration with JetBrains IDEs
Knowledge map
Instant feedback
Certificate of completion

4. Become a Java Backend Developer Bootcamp

All-in-one Java Bootcamp for learning backend engineering with Java. This bootcamp is designed for Java developers seeking proficiency in Java.

The Java Backend Developer Bootcamp is a comprehensive backend engineering bootcamp that will equip you with the skills to take your backend engineering career to the next level.

Bootcamp Outline:

Below is the content outline that we cover in this bootcamp to turn you into a great backend developer using the Java programming language.

Basics of Back-End Development
Server-side Programming Language (Java)
Build a Back-End with Spring
API and API Design
Git and GitHub
Mastering Database
Deployment
Software Testing
Software Design Principles
Web Security
Caching and CDNs
Message Brokers and Search Engines
Scalability
Containerization and CI/CD
Data Structures and Algorithms
What to Expect in a Technical Interview (Landing Job)

Bootcamp Highlights:

200+ recorded videos and lessons
Personalized study plan
3-month access to the instructor
Lifetime Access and updates
Practice Projects
Career Services
Instant feedback
Certificate of completion

Course Duration: 2–4 months.

Course Link: https://academy.masteringbackend.com

Course Price: starting at $500 monthly.

5. Building Scalable Java Microservices with Spring Boot and Spring Cloud

Are you a Java developer looking to take your microservices skills to the next level?

Google Cloud, in collaboration with Coursera, offers an intermediate-level course that teaches you how to build scalable, cloud-native microservices using Spring Boot and Spring Cloud.

In this course, you’ll learn how to:

Build Spring Boot microservices that integrate with Google Cloud managed services
Use Pub/Sub and Spring Integration for message handling
Store data with Cloud SQL and migrate to Cloud Spanner
Implement distributed tracing using Cloud Trace

This course is perfect if you already have some experience with Java and want to deepen your skills by working with real-world cloud tools.

Course Highlights:

3 hands-on modules
Approx. 12 hours of content — learn at your own pace
2 assignments to test your knowledge
A shareable certificate for your LinkedIn or resume
Lifetime access via Coursera Plus

The course is taught by instructors from Google Cloud, who bring real-world expertise and practical examples to every lesson.

Final Thoughts

Choosing the right Java backend development course in 2025 is more than just selecting a popular program — it’s about finding the one that aligns with your learning style, career goals, and current experience level.

Whether you’re a complete beginner starting from scratch or a developer looking to deepen your expertise, the courses listed above provide a comprehensive roadmap to mastering Java for backend engineering.

From industry-aligned programs like “ Become a Java + Spring Backend Developer ” by Masteringbackend to practical, hands-on courses from Oracle University , JetBrains , and Google Cloud , these options are carefully curated to help you build real-world skills and become job-ready.

Each course combines structured modules, project-based learning, expert-led instruction, and certifications that can give you an edge in today’s competitive job market.

Now is the best time to invest in your backend engineering career. Choose the course that suits you best and take the first step toward becoming a professional Java Backend Developer in 2025.

Ready to Become a Java Backend Engineer?

If you’re serious about launching your backend engineering career with Java, then Become a Java+Spring Backend Developer is the ultimate course to get you there.

Join thousands of developers already learning Java the right way.

With a structured roadmap, real-world projects, and modules that take you from complete beginner to job-ready backend engineer, this course is your all-in-one solution.

You’ll learn everything from Java fundamentals to advanced Spring Boot microservices and even containerization with Docker and Kubernetes.

Lifetime access
Hands-on projects
Live sessions with experts
Certification on completion
Designed by backend engineers for backend engineers

Start Learning Today — and build your future in backend engineering!

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 12, 2025.

How to Use the Default Trait in Rust

Solomon Eseme — Fri, 09 May 2025 20:25:08 +0000

Introduction

When working with structs or enums in Rust, we often need a way to create a “standard” or “initial” instance without specifying all the fields every time. Manually setting each field can be repetitive, especially for complex types. How can we create a sensible default instance of a type conveniently?

Enter the std::default::Default trait. This trait provides a standardized way for types to offer a default value. If a type implements Default, we can easily get a default instance, simplifying initialization and making our code cleaner, particularly when dealing with configuration structs or optional fields.

The Need for Default Values

Imagine a configuration struct for an application:

<pre><code class="lnguage-rust"> struct AppConfig struct AppConfig {
    timeout_ms: u32,
    retries: u8,
    api_endpoint: String,
    enable_logging: bool,
}

fn main() {
    // Manually creating an instance feels verbose
    let config = AppConfig {
        timeout_ms: 5000,
        retries: 3,
        api_endpoint: "https://api.example.com".to_string(),
        enable_logging: false,
    };
    // ... use config ...
}

If we often need a configuration with standard settings (say, a timeout of 5000ms, 3 retries, a default endpoint, and logging disabled), writing this out repeatedly is tedious. Furthermore, if we add new fields to AppConfig, we have to update every place where we manually create it.

This is where the Default trait shines.

Introducing std::default::Default

The Default trait is remarkably simple. It's defined in the standard library (std::default::Default) and requires implementing just one method:

pub trait Default: Sized {
    fn default() -> Self;
}

The default() associated function takes no arguments and returns an instance of the type (Self) populated with default values. Many primitive types and standard library types already implement Default (e.g., numbers default to 0, bool to false, Option to None, String and Vec to empty ones).

Implementing Default

There are two main ways to make our types implement Default:

If all the fields within our struct also implement Default, we can simply ask the compiler to generate the implementation for us using the derive attribute:

#[derive(Default, Debug)] // We derive Default here!
struct AppConfig {
    timeout_ms: u32, // u32 implements Default (defaults to 0)
    retries: u8, // u8 implements Default (defaults to 0)
    api_endpoint: String, // String implements Default (defaults to "")
    enable_logging: bool, // bool implements Default (defaults to false)
}

fn main() {
    let default_config: AppConfig = AppConfig::default();
    println!("Default Config: {:?}", default_config);
    // Output: Default Config: AppConfig { timeout_ms: 0, retries: 0, api_endpoint: "", enable_logging: false }
}

This is the easiest way, but the derived defaults might not always be what we consider “sensible” (like 0 for timeout_ms).

For enums, we can also derive Default, but we must explicitly mark one of the unit variants (a variant without data) with #[default] to tell the compiler which one is the default:

#[derive(Default, Debug)]
enum LogLevel {
    Debug,
    Info,
    #[default] // Warning is the default level
    Warning,
    Error,
}

fn main() {
    let level: LogLevel = LogLevel::default();
    println!("Default log level: {:?}", level);
    // Output: Default log level: Warning
}

Manual Implementation

If derive isn't suitable (e.g., some fields don't implement Default, or we need specific default values different from the derived ones), we can implement the trait manually:

struct AppConfig {
    timeout_ms: u32,
    retries: u8,
    api_endpoint: String,
    enable_logging: bool,
}

// Manual implementation
impl Default for AppConfig {
    fn default() -> Self {
        AppConfig {
            timeout_ms: 5000, // Sensible default timeout
            retries: 3, // Sensible default retries
            api_endpoint: "https://api.example.com".to_string(), // Default endpoint
            enable_logging: false, // Logging off by default
        }
    }
}

fn main() {
    let sensible_defaults: AppConfig = AppConfig::default();
    println!("Sensible Defaults: {:?}", sensible_defaults);
    // Output: Sensible Defaults: AppConfig { timeout_ms: 5000, retries: 3, api_endpoint: "https://api.example.com", enable_logging: false }
}

Here, we provide the exact default values we want inside the default() function. Remember, we cannot both derive and manually implement Default for the same type.

Using Default

Once a type implements Default, we can get its default value using TypeName::default() or the fully qualified path std::default::Default::default().

A particularly useful pattern is combining Default::default() with struct update syntax. This lets us specify only the fields we want to change, while the rest take their default values:

#[derive(Default, Debug)]
struct AppConfig {
    timeout_ms: u32,
    retries: u8,
    api_endpoint: String,
    enable_logging: bool,
}

impl AppConfig {
 fn default() -> Self { // Custom sensible defaults
        AppConfig {
            timeout_ms: 5000,
            retries: 3,
            api_endpoint: "https://api.example.com".to_string(),
            enable_logging: false,
        }
    }
}

fn main() {
    // Override only timeout and logging, keep other defaults
    let custom_config = AppConfig {
        timeout_ms: 10000,
        enable_logging: true,
        ..AppConfig::default() // Fill the rest with defaults
    };

    println!("Custom Config: {:?}", custom_config);
    // Output: Custom Config: AppConfig { timeout_ms: 10000, retries: 3, api_endpoint: "https://api.example.com", enable_logging: true }
}

This makes creating slightly modified instances very easy.

Common Use Cases

Configuration Structs : Providing sensible defaults for application settings.
Builder Pattern : Often, the Default implementation provides the starting point for a builder.
Initializing Collections : Getting an empty Vec, HashMap, or String.
Generic Code : In generic functions, T: Default allows creating a default instance of T.
Testing : Quickly creating instances with default data for tests.

Considerations

Derive Limitations : #[derive(Default)] only works if all fields implement Default. If even one field doesn't, we must implement it manually.
Meaningful Defaults : Ensure the default values make sense for the type’s purpose. Sometimes the derived defaults (like 0 or empty strings) aren’t appropriate.
Initialization Cost : While usually cheap, the default() function can perform non-trivial work (like allocating memory for a String or Vec, or even more complex setup). Be aware if performance in initialization is critical.

Summary

The std::default::Default trait provides a clean and standard way to create default instances of Rust types. Whether through the convenient #[derive(Default)] attribute or a manual implementation for more control, it helps reduce boilerplate code and makes initializing structs and enums more ergonomic.

With Default::default() and struct update syntax, we can create instances with little fuss, focusing only on the values that differ from the standard defaults. If you want to learn more about Rust, you can always check out our in-depth course on the language

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 9, 2025.

Spring Boot + Docker: Dockerizing Java Spring Boot Apps

Solomon Eseme — Tue, 06 May 2025 20:50:05 +0000

Docker has changed the way we build, run, and scale applications.

It lets you package your app with everything it needs, so it runs the same everywhere, on your computer, on someone else’s, or a server.

Docker is one of the most popular tools for this. It helps keep things consistent and avoids the “it works on my machine” problem.

In this blog, we will see how to containerize a Spring Boot application using Docker, step by step. By the end, you’ll be able to run your Spring Boot app inside a Docker container and deploy it seamlessly.

What is Docker?

Docker gets its name from the term “dock worker,” someone who loads and unloads shipping containers. Similarly, Docker “loads” and “runs” software containers.
Using Docker, we can implement the containerization technologies.
Containerization is a concept that allows us to package software applications along with the necessary libraries and binaries required to run them. This package is called an image.
Docker is a tool/platform that makes it easy to create, manage, or run containers.

Click here to read the definitive guide to Docker.

Why Docker?

Suppose we’re building a Spring Boot application on our local machine. It runs perfectly because our system has the correct versions of Java, Maven, and other necessary tools installed. However, when we want to deploy this application to another machine, we have to manually set up all the required software.

In real-world projects, applications are typically deployed to multiple environments for testing and production, such as DEV , UAT , SIT , and PROD.

Ensuring that each of these environments has the exact setup can be a time-consuming and error-prone process. One machine might have a different Java version or might be missing certain dependencies, leading to unexpected errors.

Now, if we use Docker, we can create a Dockerfile that includes our application, the exact Java version, and all required settings.

Once packaged into a Docker image , the application can run on any system with Docker installed, without worrying about environment-specific configurations. We can run the same container across all environments just as we do locally.

This consistency not only saves time but also greatly simplifies both development and deployment.

Prerequisites

To follow along, ensure you have:

Basic knowledge of Java, Spring Boot, and Maven
Installed:
Java
Maven
Docker & Docker CLI
An IDE (e.g., IntelliJ, VS Code)

Simple Spring Boot Application

We’ll use a simple Spring Boot project with just one REST API that returns “Hello, World!” when the /hello endpoint is accessed. We’ve pushed the code to GitHub, so you can simply clone the repository and switch to the master branch.

You can check out the full code here:

https://github.com/ayushstwt/docker-spring-boot

Test Spring Boot Application on localhost

http://localhost:8080/hello

Docker Terminology

Docker file- It contains a set of instructions to build a Docker image.
Docker Image - It is a package that contains application code + dependencies.
Docker Hub - It is a registry to store Docker images. (AWS ECR)
Docker Container - It is a runtime instance of our application. Run-time instance of an image. If you run Docker image container will be created, that’s where our application is running.

To generate a Docker image from our Spring Boot application, there are three different commonly used approaches. We can choose one of the themes.

Dockerfile
Buildpacks
Google Jib

Approach 1

Running a Spring Boot application as a container using a Dockerfile

Step 1 — Run the maven command, “ mvn clean install “. to generate a fat jar inside the target folder.

Step 2 - Create the file name Dockerfile inside the root directory to generate a Docker image.

FROM openjdk:17-jdk-slim
COPY target/docker-spring-boot-0.0.1-SNAPSHOT.jar docker-spring-boot-0.0.1-SNAPSHOT.jar
ENTRYPOINT ["java","-jar","/docker-spring-boot-0.0.1-SNAPSHOT.jar"]

Here in the above file

FROM openjdk:17-jdk-slim - Uses a lightweight OpenJDK 17 base image to run the Spring Boot application. COPY target/docker-spring-boot-0.0.1-SNAPSHOT.jar docker-spring-boot-0.0.1-SNAPSHOT.jar - Copies the built JAR file from the target directory into the Docker image. ENTRYPOINT ["java","-jar","/docker-spring-boot-0.0.1-SNAPSHOT.jar"] - Defines the command to run the Spring Boot JAR when the container starts.

To use Docker, first download Docker Desktop from docker.com/products/docker-desktop. Pick the version for your OS (Windows or macOS). If you’re on Linux, follow the guide at docs.docker.com/engine/install. Install it like any app and launch Docker Desktop.
Next, open your terminal and run docker login. Enter your Docker Hub username and password. If you don't have an account, create one at hub.docker.com/signup.
Once logged in, you’re ready to build images, run containers, and manage apps easily.

Step 3: Execute the Docker command to generate the Docker image based on the tag name. Make sure that your Docker Desktop is running.

// syntax
docker build -t your-image-name:tag .

// command
docker build -t ayshriv/docker-spring-boot:latest .

After executing this command, you’ll see an output indicating that the Docker image was successfully generated. The docker build command is used to create a Docker image from a Dockerfile. The -t flag allows you to specify a name for your image and optionally assign a version tag.

For example, in docker-spring-boot:latest, docker-spring-boot is the image name, and latest is the tag. The . (dot) at the end tells Docker to use the current directory as the build context, where it looks for the Dockerfile and all necessary files.

To verify that the image was successfully created, use the docker images command. This will list all the Docker images available on your system.

Step 4 — Next, execute the following command to create and run a Docker container based on the image you just built.

docker run -p 8080:8080 ayshriv/docker-spring-boot:latest

The command docker run -p 8080:8080 ayshriv/docker-spring-boot:latest is used to start a Docker container from the image we built. The -p 8080:8080 option maps port 8080 on your host machine to port 8080 inside the container , allowing you to access the application via http://localhost:8080.

Here, ayshriv/docker-spring-boot:latest is the name and tag of the Docker image. This command runs your Spring Boot application inside a container, exactly as it would run in production.

In the 8080:8080 format:

The first value (host port) is the external port on your machine.
The second value (container port) is the internal port your app listens on inside the container.

After executing this command, you should see output indicating that the container is running successfully.

To check if your container is running, use the docker ps command. This will display a list of all currently running containers.

The Docker image name ayshriv/docker-spring-boot:latest, ayshriv is your Docker Hub username, which helps identify you as the owner of the image. docker-spring-boot is the name of your application, and it's good practice to keep this name short, clear, and related to what your app does.

The part after the colon, latest, is the tag, which usually refers to the current or most recent version of the image. You can also use tags like v1.0, prod, or dev to manage different versions.

While creating a Docker image using a Dockerfile is effective and widely adopted, it does have some drawbacks. One major issue is the size of the resulting image , which can be quite large, especially when using base images like OpenJDK. Larger images take more time to build, transfer, and start, which can negatively impact development speed and deployment efficiency.

Additionally, maintaining a Dockerfile requires ongoing effort , as you’ll need to update it whenever your application’s structure or dependencies change. In our case, the generated image size is around 428MB , which is quite substantial.

The next approach we’ll explore helps reduce image size and requires minimal manual effort.

Approach 2

Running a Spring Boot application as a container using Buildpacks

Cloud Native Buildpacks transform your application source code into images that can run on any cloud. It is an alternative approach to Dockerfiles.

With the help of Buildpacks, we can automatically generate production-ready images from our application source code without writing a Dockerfile.

https://buildpacks.io/

Step 1- We need to add the given configuration inside the pom.xml for the image name.

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <image>
                            <name>ayshriv/${project.artifactId}:latest</name>
                    </image>
                </configuration>
            </plugin>
        </plugins>
  </build>

Here, we also follow the same naming convention for image names.

Step 2- Now, we run the given Maven command to generate the Docker image without the need for a Dockerfile (make sure that Docker Desktop is running).

mvn spring-boot:build-image

Step 3 — Next, execute the following command to create a Docker container from the image, along with the required port mapping.

docker run -p 8080:8080 ayshriv/docker-spring-boot:latest

With this approach, there’s no need to create a Dockerfile manually , and the resulting image size is also reduced. However, one limitation is that Docker Desktop still needs to be installed on your local machine to build and run the image.

To overcome this dependency, we can use Google JIB , a tool specifically designed for Java applications. JIB allows you to generate a Docker image for your Spring Boot application without needing a Dockerfile or Docker installed locally , while also producing smaller and more optimized images.

Approach 3

Running a Spring Boot application as a container using Google JIB

https://github.com/GoogleContainerTools/jib

Google JIB is used to build container images for your Java applications, without the need for a Dockerfile and Docker Desktop.

It is an alternative approach to Dockerfiles. With the help of Google JIB, we can automatically generate production-ready images from our application source code without writing a Dockerfile.

Step 1: We need to add the given configuration inside the pom.xml for the image name.

<build>
  <plugins>
    <plugin>
      <groupId>com.google.cloud.tools</groupId>
      <artifactId>jib-maven-plugin</artifactId>
      <version>3.4.0</version> 
      <configuration>
        <to>
          <image>ayshriv/${project.artifactId}:latest</image>
        </to>
      </configuration>
    </plugin>
  </plugins>
</build>

Step 2: Run the given Maven command to generate the Docker image (for Google JIB, there is no need for Docker Desktop to be installed on your local system).

mvn compile jib:dockerBuild

Step 3: After this, execute the following command to create and run a Docker container based on the image, with the appropriate port mapping.

docker run -p 8080:8080 ayshriv/docker-spring-boot:latest

In this approach, we eliminate the need for a Dockerfile, and the resulting image size is significantly reduced.

However, one limitation is that Docker Desktop must be installed on the local system to build and run Docker images. To overcome this dependency, we can use Google JIB, a powerful tool specifically designed for Java applications.

Google JIB allows us to containerize our Spring Boot application without writing a Dockerfile or having Docker installed locally.

It integrates directly with Maven or Gradle, enabling seamless image creation and pushing to container registries. Additionally, JIB optimizes image layering, which helps in reducing image size and speeding up rebuild times during development.

Some Commonly Used Docker Commands for Java Developers

# 1. Build Docker image from Dockerfile (usually for Spring Boot app)
docker build -t my-java-app .

# 2. List all images
docker images

# 3. Run the Docker container from the built image
docker run -d -p 8080:8080 --name java-app-container my-java-app

# 4. View running containers
docker ps

# 5. View all containers (including stopped ones)
docker ps -a

# 6. Stop a running container
docker stop java-app-container

# 7. Start a stopped container
docker start java-app-container

# 8. Restart a container
docker restart java-app-container

# 9. Remove a container
docker rm java-app-container

# 10. Remove an image
docker rmi my-java-app

# 11. View logs of a container (helpful for debugging)
docker logs java-app-container

# 12. Execute a command inside a running container (like inspecting files, checking logs)
docker exec -it java-app-container bash

# 13. Tag an image (e.g., for pushing to Docker Hub)
docker tag my-java-app ayushshrivastaav/my-java-app:latest

# 14. Login to Docker Hub
docker login

# 15. Push image to Docker Hub
docker push ayushshrivastaav/my-java-app:latest

# 16. Pull image from Docker Hub
docker pull ayushshrivastaav/my-java-app:latest

# 17. Remove all stopped containers
docker container prune -f

# 18. Remove all unused images
docker image prune -a -f

# 19. Check Docker version
docker version

# 20. View system-wide Docker resource usage
docker system df

# 21. Compose up (if using docker-compose.yml for multi-container apps)
docker-compose up -d

# 22. Compose down
docker-compose down

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 6, 2025.

Next.js vs Astro vs Remix: Choosing the Right Front-end Framework

Solomon Eseme — Mon, 05 May 2025 12:10:06 +0000

Discover the differences between Next.js, Astro, and Remix to find the right one for your next Strapi project.

Next.js vs Astro vs Remix: Choosing the Right Front-end Framework

When selecting a framework for your web application, it is critical to consider the developer experience that it provides. Astro, Remix, and Next.js all build on top of React to provide a more streamlined experience. They have a low learning curve, so if you’re already familiar with React, you can quickly pick them up and get started.

We evaluate each to help you decide which framework is appropriate for you, not to determine which is faster or better.

What is Astro?

Astro is a modern web framework built on React and a static site builder that requires little or no JavaScript to deliver lightning-fast, high-performance websites with a modern developer experience. It allows you to create websites using UI components from your favorite JavaScript UI frameworks such as React, Svelte, Vue, and others.

// Example of an Astro component
---
// Component imports and JavaScript execution
import { Image } from 'astro:assets';
import ReusableButton from '../components/Button.astro';

// Data fetching in the component
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---

<html lang="en">
  <head>
    <title>My Astro Site</title>
  </head>
  <body>
    <h1>Welcome to Astro!</h1>
    <p>This is a static site with minimal JavaScript</p>

    <!-- Using imported components -->
    <ReusableButton text="Click me" />

    <!-- Displaying fetched data -->
    <ul>
      {data.items.map(item => (
        <li>{item.name}</li>
      ))}
    </ul>

    <!-- Only this component will ship with JavaScript -->
    <InteractiveCounter client:load initialCount={5} />
  </body>
</html>

Astro websites are primarily static, with no JavaScript code by default. When a component (for example, image carousels, dark and light mode) requires JavaScript code to run, Astro only loads that component and any necessary dependencies. The rest of the site remains static lightweight HTML. Check out Astro’s Getting Started tutorial for an excellent introduction.

Astro is more flexible: you can build UI with any popular component library (React, Preact, Vue, Svelte, Solid, and others) or Astro’s HTML-like component syntax, similar to HTML + JSX.
Astro can build statically via SSG or deploy to SSR environments via adapters like Deno, Vercel serverless, Netlify serverless, and Node.js, with more to come.

// Path: astro.config.mjs - Configuring SSR with an adapter

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
import react from '@astrojs/react';
import vue from '@astrojs/vue';

// https://astro.build/config
export default defineConfig({
  // Enable SSR for dynamic rendering
  output: 'server',
  // Deploy to Vercel serverless functions
  adapter: vercel(),
  // Add support for multiple UI frameworks
  integrations: [react(), vue()]
});

What is Next.js?

Next.js is an open-source React framework for quickly creating server-rendered React applications. It adds structure and features and handles the React tooling and configuration required for your application.

// Path: pages/index.js - Next.js page component

import Head from 'next/head';
import Link from 'next/link';
import { useState } from 'react';

export default function Home({ featuredPosts }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Head>
        <title>My Next.js Website</title>
      </Head>

      <main>
        <h1>Welcome to my website</h1>
        <button onClick={() => setCount(count + 1)}>
          Count: {count}
        </button>

        <h2>Featured Posts</h2>
        <ul>
          {featuredPosts.map(post => (
            <li key={post.id}>
              <Link href={`/posts/${post.slug}`}>
                {post.title}
              </Link>
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
}

// Data fetching at build time
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/featured-posts');
  const featuredPosts = await res.json();

  return {
    props: { featuredPosts },
    // Re-generate page at most once per hour
    revalidate: 3600
  };
}

It can be used to solve common application requirements like routing, data retrieval, and integrations. Next.js was created to provide an easy-to-use development framework that would reduce the time and effort required to develop full-fledged, SSR-friendly web applications while improving the end user and developer experience. The documentation is a great place to start if you want to begin with this framework.

Next.js fully embraces React Server Components (RSCs), enabling server-side data fetching directly within components. This reduces client-side JavaScript and improves performance. Also, Turbopack is now stable, offering lightning-fast bundling and significantly reducing build times for large projects.

// Path: app/dashboard/page.js - React Server Component in Next.js

// Server Component (no "use client" directive)
import { getUser } from '@/lib/auth';
import { getDashboardData } from '@/lib/data';
import DashboardMetrics from '@/components/DashboardMetrics';
import ClientSideInteractions from '@/components/ClientSideInteractions';

export default async function DashboardPage() {
  // This code runs only on the server
  const user = await getUser();
  const { metrics, recentActivity } = await getDashboardData(user.id);

  return (
    <div>
      <h1>Welcome back, {user.name}</h1>

      {/* Server component with no client JS */}
      <DashboardMetrics data={metrics} />

      {/* This component will be hydrated on the client */}
      <ClientSideInteractions initialData={recentActivity} />
    </div>
  );
}

What is Remix?

Remix is an edge-native, full-stack JavaScript framework for building modern, fast, and resilient user experiences. It unifies the client and server with web standards so you can think less about code and more about your product. Remix is now React Router 7, and it continues to evolve with the latest web development trends.

// Path: app/routes/posts.$slug.jsx - A Remix route component

import { json } from '@remix-run/node';
import { useLoaderData, Form, useActionData } from '@remix-run/react';
import { getPost, addComment } from '~/models/post.server';

// Server-side data loading
export async function loader({ params }) {
  const post = await getPost(params.slug);

  if (!post) {
    throw new Response("Not Found", { status: 404 });
  }

  return json({ post });
}

// Server-side form handling
export async function action({ request, params }) {
  const formData = await request.formData();
  const comment = formData.get('comment');

  if (!comment || comment.length < 3) {
    return json({ error: "Comment must be at least 3 characters" });
  }

  await addComment({ postSlug: params.slug, text: comment });
  return json({ success: true });
}

// Client component using server data
export default function Post() {
  const { post } = useLoaderData();
  const actionData = useActionData();

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      <h2>Leave a comment</h2>
      <Form method="post">
        <textarea name="comment" required minLength={3} />
        {actionData?.error && <p className="error">{actionData.error}</p>}
        <button type="submit">Submit</button>
      </Form>

      <h2>Comments</h2>
      <ul>
        {post.comments.map(comment => (
          <li key={comment.id}>{comment.text}</li>
        ))}
      </ul>
    </article>
  );
}

Remix now supports Static Site Generation (SSG), allowing developers to pre-render pages at build time. This feature bridges the gap between Remix and frameworks like Next.js. Currently, Remix’s loaders and actions have been optimized for parallel data fetching, reducing load times for complex applications.

// Example of Static Site Generation in Remix (React Router 7)

// Path: routes/blog.static.$slug.tsx

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getPost, getAllPostSlugs } from '~/models/post.server';

// Generate static paths at build time
export async function generateStaticParams() {
  const slugs = await getAllPostSlugs();
  return slugs.map(slug => ({ slug }));
}

// Load data at build time
export async function loader({ params }) {
  const post = await getPost(params.slug);
  if (!post) {
    throw new Response("Not Found", { status: 404 });
  }
  return json({ post });
}

export default function BlogPost() {
  const { post } = useLoaderData();
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

Key Features

Let’s look at the key features of Astro, Remix, and Next.js to understand what makes each framework unique and how they cater to different development needs.

Astro

Zero-config: Any config explained will be handled by our astro add CLI command (i.e., add Svelte support with astro add svelte).

# Example of using the Astro CLI to add integrations
npm create astro@latest my-project
cd my-project
# Add Tailwind CSS support
npx astro add tailwind
# Add React support
npx astro add react
# Add image optimization
npx astro add image

Astro is UI-agnostic: meaning you can Bring Your Own UI Framework (BYOF).

---
// Path: src/pages/mixed-frameworks.astro

// Using multiple frameworks in the same page
import ReactCounter from '../components/ReactCounter.jsx';
import VueToggle from '../components/VueToggle.vue';
import SvelteCard from '../components/SvelteCard.svelte';
---

<html>
  <head>
    <title>Multi-Framework Page</title>
  </head>
  <body>
    <h1>Using Multiple Frameworks</h1>

    <!-- React component -->
    <ReactCounter client:visible initialCount={0} />

    <!-- Vue component -->
    <VueToggle client:idle />

    <!-- Svelte component -->
    <SvelteCard client:only="svelte" title="Svelte Card" />
  </body>
</html>

Easy to use: Astro’s goal is to be accessible to every web developer. Astro was designed to feel familiar and approachable regardless of skill level or experience with web development.
Fast by default: An Astro website can load 40% faster with 90% less JavaScript than the site built with the most popular React web framework.
Server-first: Astro leverages server-side rendering over client-side rendering as much as possible.
Content-based: Astro’s unique focus on content lets Astro make tradeoffs and deliver unmatched performance features that wouldn’t make sense for more application-focused web frameworks to implement.
Fully-featured but flexible: Astro is an all-in-one web framework with everything you need to build a website. Astro includes a component syntax, file-based routing, asset handling, a build process, bundling, optimizations, data fetching, and more. You can build great websites without ever reaching outside of Astro’s core feature set.
Server Islands: Astro now supports server-rendered components within static pages, enabling hybrid rendering for dynamic interactivity without sacrificing performance.

---
// Path: src/pages/islands-example.astro

import StaticHeader from '../components/StaticHeader.astro';
import DynamicCounter from '../components/DynamicCounter.jsx';
import HeavyDataComponent from '../components/HeavyDataComponent.jsx';
---

<html>
  <head>
    <title>Islands Architecture Example</title>
  </head>
  <body>
    <!-- Static, no JavaScript -->
    <StaticHeader title="Islands Architecture" />

    <!-- Interactive, hydrated immediately -->
    <DynamicCounter client:load />

    <!-- Interactive, hydrated only when visible -->
    <HeavyDataComponent client:visible />

    <!-- Static content continues... -->
    <footer>
      <p>© 2025 My Website</p>
    </footer>
  </body>
</html>

Content Layer API: Expanded Content Collections allow seamless integration with external APIs and databases, making Astro more versatile for dynamic content.

// Path: src/content/config.ts

import { defineCollection, z } from 'astro:content';

// Define a schema for blog posts
const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    publishDate: z.date(),
    author: z.string(),
    featured: z.boolean().default(false),
    tags: z.array(z.string()).default([])
  })
});

// Export collections
export const collections = {
  'blog': blogCollection
};

// src/pages/blog/[...slug].astro
---
import { getCollection, getEntry } from 'astro:content';

// Generate paths at build time
export async function getStaticPaths() {
  const blogEntries = await getCollection('blog');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug },
    props: { entry }
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
---

<article>
  <h1>{entry.data.title}</h1>
  <p>By {entry.data.author} on {entry.data.publishDate.toLocaleDateString()}</p>
  <Content />
</article>

Astro DB: Built-in database management powered by Drizzle, enabling full-stack capabilities for more complex applications.

// Path: db/schema.ts

import { defineDb, defineTable, column } from 'astro:db';

export const Users = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    name: column.text(),
    email: column.text({ unique: true }),
    created_at: column.date()
  }
});

export default defineDb({
  tables: { Users }
});

// src/pages/api/users.ts
import { db } from 'astro:db';
import { Users } from '../../db/schema';

export async function GET() {
  const users = await db.select().from(Users);
  return new Response(JSON.stringify(users), {
    headers: { 'Content-Type': 'application/json' }
  });
}

export async function POST({ request }) {
  const { name, email } = await request.json();

  const user = await db.insert(Users).values({
    name,
    email,
    created_at: new Date()
  }).returning();

  return new Response(JSON.stringify(user), {
    status: 201,
    headers: { 'Content-Type': 'application/json' }
  });
}

Remix

Routes: Like other frameworks, Remix allows developers to manage the different routes of their web projects using JavaScript/TypeScript files that contain handler functions. We can generate routes on our website to create files that follow the file system hierarchy of our projects, creating analog URLs for our pages. Remix routes work using the partial routing feature provided by React-Router.

// File-based routing in Remix

// Path: app/routes/_layout.tsx - Parent layout

import { Outlet, Link } from '@remix-run/react';

export default function Layout() {
  return (
    <div className="app-container">
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/blog">Blog</Link>
        </nav>
      </header>

      <main>
        <Outlet /> {/* Child routes render here */}
      </main>

      <footer>© 2025 My Remix App</footer>
    </div>
  );
}

// app/routes/_layout.about.tsx - About page
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company...</p>
    </div>
  );
}

// app/routes/_layout.blog.tsx - Blog index
export default function BlogIndex() {
  return (
    <div>
      <h1>Blog</h1>
      <p>Read our latest articles</p>
    </div>
  );
}

// app/routes/_layout.blog.$slug.tsx - Dynamic blog post route
import { useParams } from '@remix-run/react';

export default function BlogPost() {
  const { slug } = useParams();
  return <h1>Blog Post: {slug}</h1>;
}

Nested components: Remix allows you to manage nested pages and components. We can create a file to handle a certain route and, at the same level in the file system, a folder with the same name. All the files we create inside that folder will be nested components of the parent route instead of different pages.
Error Handling: Nested components bring another benefit: if an error occurs while rendering a certain component, it doesn’t affect the other nested parts of the page.

// Path: app/routes/dashboard.tsx - Parent dashboard route

import { Outlet } from '@remix-run/react';

export default function Dashboard() {
  return (
    <div className="dashboard">
      <h1>Dashboard</h1>
      <nav>
        <Link to="/dashboard/stats">Stats</Link>
        <Link to="/dashboard/settings">Settings</Link>
      </nav>
      <div className="dashboard-content">
        <Outlet />
      </div>
    </div>
  );
}

// app/routes/dashboard.stats.tsx - Stats page with error boundary
import { useLoaderData } from '@remix-run/react';

export async function loader() {
  // Potentially could fail
  const stats = await fetchUserStats();
  return { stats };
}

// This only affects this route, not parent or siblings
export function ErrorBoundary() {
  return (
    <div className="error-container">
      <h2>Error loading stats</h2>
      <p>There was a problem loading your statistics.</p>
      <button>Try again</button>
    </div>
  );
}

export default function Stats() {
  const { stats } = useLoaderData();
  return (
    <div>
      <h2>Your Statistics</h2>
      <div className="stats-grid">
        {Object.entries(stats).map(([key, value]) => (
          <div key={key} className="stat-card">
            <h3>{key}</h3>
            <p>{value}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Forms: As Remix focuses on web standards, it handles forms using native methods (POST, PUT, DELETE, PATCH) instead of JavaScript.

// app/routes/products.$id.tsx - Edit product form
import { Form, useLoaderData, useActionData, redirect } from '@remix-run/react';
import { json } from '@remix-run/node';
import { getProduct, updateProduct } from '~/models/product.server';

export async function loader({ params }) {
  const product = await getProduct(params.id);
  if (!product) {
    throw new Response("Product not found", { status: 404 });
  }
  return json({ product });
}

export async function action({ request, params }) {
  const formData = await request.formData();
  const name = formData.get('name');
  const price = parseFloat(formData.get('price'));

  const errors = {};
  if (!name) errors.name = "Name is required";
  if (isNaN(price) || price <= 0) errors.price = "Price must be a positive number";

  if (Object.keys(errors).length > 0) {
    return json({ errors });
  }

  await updateProduct(params.id, { name, price });
  return redirect('/products');
}

export default function EditProduct() {
  const { product } = useLoaderData();
  const actionData = useActionData();

  return (
    <div>
      <h1>Edit Product: {product.name}</h1>

      <Form method="post">
        <div>
          <label>
            Name:
            <input name="name" defaultValue={product.name} />
          </label>
          {actionData?.errors?.name && <p className="error">{actionData.errors.name}</p>}
        </div>

        <div>
          <label>
            Price:
            <input name="price" type="number" step="0.01" defaultValue={product.price} />
          </label>
          {actionData?.errors?.price && <p className="error">{actionData.errors.price}</p>}
        </div>

        <div className="actions">
          <button type="submit">Save Changes</button>
        </div>
      </Form>
    </div>
  );
}

Loaders and Actions: Remix provides two different types of functions to create server-side dynamic content. The loader functions handle GET HTTP requests in the server, mainly used to get data from different sources.

// Path: app/routes/products.tsx - Loader and Action example

import { json, redirect } from '@remix-run/node';
import { useLoaderData, Form } from '@remix-run/react';
import { getProducts, createProduct } from '~/models/products.server';

// Loader for GET requests
export async function loader() {
  const products = await getProducts();
  return json({ products });
}

// Action for POST/PUT/DELETE requests
export async function action({ request }) {
  const formData = await request.formData();
  const intent = formData.get('intent');

  if (intent === 'create') {
    const name = formData.get('name');
    const price = parseFloat(formData.get('price'));

    await createProduct({ name, price });
    return redirect('/products');
  }

  return json({ error: 'Invalid intent' });
}

export default function Products() {
  const { products } = useLoaderData();

  return (
    <div>
      <h1>Products</h1>

      <h2>Add New Product</h2>
      <Form method="post">
        <input type="hidden" name="intent" value="create" />
        <input name="name" placeholder="Product name" required />
        <input name="price" type="number" step="0.01" placeholder="Price" required />
        <button type="submit">Add Product</button>
      </Form>

      <h2>Product List</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price.toFixed(2)}
          </li>
        ))}
      </ul>
    </div>
  );
}

Static Site Generation (SSG): Remix now supports SSG, allowing developers to pre-render pages at build time. This feature bridges the gap between Remix and frameworks like Next.js.
Enhanced Data Fetching: Optimized loaders and actions for parallel data fetching, reducing load times for complex applications.

// Parallel data fetching in Remix
export async function loader() {
  // Fetch multiple data sources in parallel
  const [products, categories, featuredItems] = await Promise.all([
    getProducts(),
    getCategories(),
    getFeaturedItems()
  ]);

  return json({
    products,
    categories,
    featuredItems
  });
}

Next.js

Async Components & Data Fetching: Async components are a new technique for obtaining data for server-rendered components introduced in Next.js 13. We can render async components using Promises with async and await.

// Path: app/dashboard/page.js - Async Server Component

async function fetchDashboardData() {
  const res = await fetch('https://api.example.com/dashboard', {
    next: { revalidate: 60 } // Revalidate every 60 seconds
  });

  if (!res.ok) {
    throw new Error('Failed to fetch dashboard data');
  }

  return res.json();
}

export default async function DashboardPage() {
  // Data is fetched on the server during rendering
  const data = await fetchDashboardData();

  return (
    <div className="dashboard">
      <h1>Dashboard</h1>
      <div className="stats-grid">
        <div className="stat-card">
          <h2>Total Users</h2>
          <p className="stat-value">{data.totalUsers.toLocaleString()}</p>
        </div>
        <div className="stat-card">
          <h2>Active Subscriptions</h2>
          <p className="stat-value">{data.activeSubscriptions.toLocaleString()}</p>
        </div>
        <div className="stat-card">
          <h2>Revenue</h2>
          <p className="stat-value">${data.revenue.toLocaleString()}</p>
        </div>
      </div>
    </div>
  );
}

React Server Components: Server components enable us to execute and render React components on the server side, resulting in faster delivery, a smaller JavaScript bundle, and lower client-side rendering costs.

// Path: app/products/[id]/page.js - Server Component

import { notFound } from 'next/navigation';
import AddToCartButton from '@/components/AddToCartButton'; // Client Component
import ProductReviews from '@/components/ProductReviews'; // Server Component

async function getProduct(id) {
  const res = await fetch(`https://api.example.com/products/${id}`);
  if (!res.ok) return null;
  return res.json();
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);

  if (!product) {
    notFound();
  }

  return (
    <div className="product-page">
      <h1>{product.name}</h1>
      <p className="price">${product.price.toFixed(2)}</p>
      <div className="description">{product.description}</div>

      {/* Client Component - will be hydrated on the client */}
      <AddToCartButton productId={product.id} />

      {/* Server Component - no client JS needed */}
      <ProductReviews productId={product.id} />
    </div>
  );
}

// components/AddToCartButton.js - Client Component
'use client';

import { useState } from 'react';

export default function AddToCartButton({ productId }) {
  const [isAdding, setIsAdding] = useState(false);

  async function handleAddToCart() {
    setIsAdding(true);
    await addToCart(productId);
    setIsAdding(false);
  }

  return (
    <button 
      onClick={handleAddToCart} 
      disabled={isAdding}
      className="add-to-cart-button"
    >
      {isAdding ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

app/ Directory for File-Based Routing: Routes are defined using the structure of your project directory. By placing an entry point in the app directory, you can create a new route. This feature is now stable and fully supported for production use.

// Next.js App Router structure example
// app/page.js - Homepage
export default function HomePage() {
  return <h1>Welcome to our website</h1>;
}

// app/about/page.js - About page (/about)
export default function AboutPage() {
  return <h1>About Us</h1>;
}

// app/blog/[slug]/page.js - Dynamic blog post page (/blog/*)
export default function BlogPost({ params }) {
  return <h1>Blog Post: {params.slug}</h1>;
}

// app/api/products/route.js - API route (/api/products)
export async function GET(request) {
  const products = await fetchProducts();
  return Response.json(products);
}

Lightning Fast Bundling: Turbopack, introduced with Next.js 13, is now stable and offers lightning-fast bundling, significantly reducing build times for large projects.

// Path: next.config.js - Enabling Turbopack

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable Turbopack for development
  experimental: {
    turbo: true,
  }
};

module.exports = nextConfig;

// Using with npm scripts in package.json
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

Built-in CSS and Sass support: Support for any CSS-in-JS library.

// Using CSS Modules in Next.js

// Path: components/Button.module.css

.button {
  background: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: darkblue;
}

// components/Button.js
import styles from './Button.module.css';

export default function Button({ children, onClick }) {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
}

// Global CSS in app/globals.css
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0;
}

// Using in app/layout.js
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Static Exports: Next.js allows you to export a fully static site from your app using the next export command.

// Path: next.config.js - Static export configuration

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // Optional: Change the output directory
  distDir: 'out',
  // Optional: Add basePath for deployment to a subdirectory
  basePath: '/docs'
};

module.exports = nextConfig;

// package.json
{
  "scripts": {
    "build": "next build",
    "export": "next export" // For older Next.js versions
  }
}

Advanced Server Actions: Next.js 14 introduces server actions for handling data mutations, simplifying backend logic without requiring separate API routes.

// Path: app/actions.js - Server Actions

'use server';

import { cookies } from 'next/headers';
import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';

export async function addToCart(formData) {
  const productId = formData.get('productId');
  const quantity = parseInt(formData.get('quantity') || '1');

  // Get user from cookie
  const userId = cookies().get('userId')?.value;
  if (!userId) {
    throw new Error('User not authenticated');
  }

  try {
    await db.cart.upsert({
      where: { 
        userId_productId: {
          userId,
          productId
        }
      },
      update: {
        quantity: { increment: quantity }
      },
      create: {
        userId,
        productId,
        quantity
      }
    });

    // Revalidate cart page
    revalidatePath('/cart');

    return { success: true };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// app/products/[id]/page.js
import { addToCart } from '@/app/actions';

export default function ProductPage({ params }) {
  // ...product details

  return (
    <div>
      {/* ... */}
      <form action={addToCart}>
        <input type="hidden" name="productId" value={params.id} />
        <input type="number" name="quantity" min="1" defaultValue="1" />
        <button type="submit">Add to Cart</button>
      </form>
    </div>
  );
}

Enhanced Caching: Improved caching mechanisms, including stale-while-revalidate (SWR), ensure faster content delivery and better user experiences.

// Using SWR for client-side data fetching
'use client';

import useSWR from 'swr';

// Reusable fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

export default function ProductList() {
  const { data, error, isLoading } = useSWR('/api/products', fetcher, {
    // Revalidate every 10 seconds
    refreshInterval: 10000,
    // Keep data even when fetching fails
    revalidateOnError: false
  });

  if (isLoading) return <div>Loading products...</div>;
  if (error) return <div>Error loading products</div>;

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {data.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

Hydration

Hydration is a client-side JavaScript technique for converting a static HTML page into a dynamic page. This provides a pleasant user experience by displaying a rendered component on the page but with attached event handlers. Hydration occurs before user interaction on static pages. The user experience suffers as a result.

Astro

Astro handles hydration through a method known as partial hydration. This approach loads individual components only when needed, leaving the rest of the page as static HTML. The island architecture is central to this process, as it ensures that only the necessary JavaScript is loaded, improving performance.

---
// Path: src/pages/hydration-example.astro

import StaticComponent from '../components/StaticComponent.astro';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import LazyLoadedComponent from '../components/LazyLoadedComponent.jsx';
import HeavyComponent from '../components/HeavyComponent.jsx';
---

<html>
  <head><title>Hydration Example</title></head>
  <body>
    <!-- Static component, no JavaScript -->
    <StaticComponent />

    <!-- Hydration strategies -->
    <!-- 1. Hydrate immediately on page load -->
    <InteractiveCounter client:load />

    <!-- 2. Hydrate when component is visible in viewport -->
    <LazyLoadedComponent client:visible />

    <!-- 3. Hydrate after page load, when browser is idle -->
    <HeavyComponent client:idle />

    <!-- 4. Hydrate only when media query matches -->
    <div client:media="(max-width: 768px)">
      This only hydrates on mobile devices
    </div>

    <!-- 5. Don't hydrate at all on the server, render only on client -->
    <div client:only="react">
      This renders only on the client
    </div>
  </body>
</html>

In most cases, Astro websites load significantly faster than Next.js websites because Astro automatically strips unnecessary JavaScript and hydrates only the components that require interactivity.
By default, Astro delivers static HTML with minimal JavaScript, resulting in faster page loads and better performance for content-heavy sites.

Next.js

Next.js has evolved its hydration strategy with the introduction of React Server Components (RSCs) and Selective Hydration in Next.js 14. While it traditionally required full-page hydration, it now supports granular hydration for interactive components, reducing the amount of JavaScript sent to the client.

// Path: app/page.js - Server Component

// This doesn't require client-side JS
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to our site</h1>
      <p>This server component requires no client-side JavaScript</p>

      {/* Client components are selectively hydrated */}
      <ClientSideInteractive />
    </div>
  );
}

// components/ClientSideInteractive.js
'use client'; // Mark as client component

import { useState } from 'react';

export default function ClientSideInteractive() {
  // Client-side state and interactivity
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>This component is hydrated with JavaScript</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Next.js allows developers to hydrate only the interactive parts of a page, improving performance for static-heavy content.
Next.js continues to support zero-JavaScript pages through Static Site Generation (SSG) and Incremental Static Regeneration (ISR).
Unlike Astro’s island architecture, which hydrates individual components by default, Next.js still prioritizes full-page hydration but offers selective hydration as an experimental feature for optimization.

Remix

Remix does not support partial hydration. There are assumptions that Remix will function with the new React 19 suspense features, but Remix does not allow partial hydration.

// Path: app/entry.client.jsx - Client-side hydration in Remix

import { RemixBrowser } from '@remix-run/react';
import { startTransition, StrictMode } from 'react';
import { hydrateRoot } from 'react-dom/client';

// The entire app is hydrated at once
startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>
  );
});

Loading Speed

The loading speed plays an important role in web application, because it directly affects user experience, SEO performance and system performance. The loading speed optimization techniques of Astro, Remix and Next.js depend on their specific architectural methods and built-in features. Let’s take a look at how these frameworks handle performance and what makes them fast.

Astro

Astro is fast, basically designed for speed. The island architecture strategy aids in SEO because it ranks highly on on-site search engines. It offers a fantastic user experience and has less boilerplate code. It supports most CSS libraries and frameworks and provides a great base for style support.

// Path: astro.config.mjs - Performance optimizations

import { defineConfig } from 'astro/config';
import image from '@astrojs/image';
import compress from 'astro-compress';

export default defineConfig({
  // Image optimization
  integrations: [
    image({
      serviceEntryPoint: '@astrojs/image/sharp'
    }),
    // Compress HTML, CSS, and JavaScript
    compress()
  ],

  // Enable view transitions for smooth navigation
  experimental: {
    viewTransitions: true
  },

  // CSS optimizations
  vite: {
    build: {cssCodeSplit: true,
      cssMinify: true,
    }
  }
});

Remix

Remix claims that data retrieval is sped up by loading data in parallel on the server. Remix can prerender pages on the server because it supports server-side rendering. In contrast to Remix, Astro provides a statically-bundled HTML file with minimal to no JavaScript.

Why the Remix rewrite is fast?

Instead of caching documents with SSG or SWR, this version caches data at the edge in Redis.
It runs the application at the edge too with Fly.io.
Quick image optimization Resource Route that writes to a persistent volume.
It’s its own CDN. This might have been difficult to build a few years ago, but the server landscape has changed significantly in the past few years and is only getting better.

// Path: remix.config.js - Performance configuration

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  // Deploy to edge runtime
  serverBuildTarget: "vercel",
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
  ignoredRouteFiles: ["**/.*"],
  // Optimize JS output
  future: {
    v2_routeConvention: true,
    v2_meta: true,
    v2_errorBoundary: true,
    v2_normalizeFormMethod: true,
  },
  // Caching strategy
  serverDependenciesToBundle: "all",

  // Custom Resource Routes for optimized assets
  routes: function(defineRoutes) {
    return defineRoutes((route) => {
      route(
        "/resources/image/:width/:height/:src",
        "routes/resources/image.tsx"
      );
    });
  }
};

// routes/resources/image.tsx - Image optimization route
import { LoaderFunction } from "@remix-run/node";
import { optimizeImage } from "~/utils/images.server";

export const loader: LoaderFunction = async ({ params, request }) => {
  const { width, height, src } = params;
  const format = new URL(request.url).searchParams.get("format") || "webp";

  try {
    const { buffer, contentType } = await optimizeImage({
      src: src as string,
      width: parseInt(width as string),
      height: parseInt(height as string),
      format,
    });

    return new Response(buffer, {
      headers: {
        "Content-Type": contentType,
        "Cache-Control": "public, max-age=31536000, immutable",
      },
    });
  } catch (error) {
    return new Response("Image optimization failed", { status: 500 });
  }
};

Why the Remix port is fast?

Remix now supports Static Site Generation (SSG), allowing developers to pre-render pages at build time.
The result is the same: a static document at the edge (even on the same CDN, Vercel’s). The difference is how the documents get there. Instead of fetching all the data and rendering the pages to static documents at build/deploy time, the cache is primed when you get traffic.
Documents are served from the cache and revalidated in the background for the next visitor.

// Parallel data fetching for improved performance

// Path: app/routes/dashboard.tsx

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getUser, getStats, getActivities, getNotifications } from '~/models/dashboard.server';

export async function loader({ request }) {
  const userId = await getUserId(request);

  // Fetch all data in parallel for improved performance
  const [user, stats, activities, notifications] = await Promise.all([
    getUser(userId),
    getStats(userId),
    getActivities(userId),
    getNotifications(userId)
  ]);

  return json({
    user,
    stats,
    activities,
    notifications
  });
}

export default function Dashboard() {
  const { user, stats, activities, notifications } = useLoaderData();
  // Render dashboard UI with fetched data...
}

Next.js

Next.js boasts of its server-side rendering and static builds features. Next.js also includes several pre-built techniques for data retrieval.

Why Next.js is fast?

The homepage uses Static Site Generation (SSG) with getStaticProps.
At build time, Next.js pulls data from Shopify, renders a page to an HTML file, and puts it in the public directory.
When the site is deployed, the static file is served at the edge (out of Vercel’s CDN) instead of hitting an origin server at a single location.
When a request comes in, the CDN serves the file.
Data loading and rendering have already been done ahead of time, so the visitor doesn’t pay the download + render cost.
The CDN is distributed globally, close to users (this is “the edge”), so requests for statically generated documents don’t have to travel to a single origin server.
Next.js now supports React Server Components (RSCs) and Selective Hydration, reducing the amount of JavaScript sent to the client and improving performance for dynamic content.

// Path: pages/index.js - Static Site Generation

export default function HomePage({ products, categories }) {
  return (
    <div>
      <h1>Welcome to our store</h1>
      <div className="product-grid">
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

// This runs at build time in production
export async function getStaticProps() {
  // Fetch data from CMS, database, or API
  const products = await fetchFeaturedProducts();
  const categories = await fetchCategories();

  return {
    props: {
      products,
      categories
    },
    // Re-generate at most once per hour
    revalidate: 3600
  };
}

// Incremental Static Regeneration example
// pages/products/[id].js
export default function Product({ product }) {
  // Render product details...
}

export async function getStaticPaths() {
  // Pre-render only the most popular products
  const popularProducts = await fetchPopularProducts();

  return {
    paths: popularProducts.map(product => ({
      params: { id: product.id.toString() }
    })),
    // Enable ISR for products not generated at build time
    fallback: 'blocking'
  };
}

export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);

  return {
    props: { product },
    revalidate: 60 // Update every minute if requested
  };
}

SSR

Server-side rendering (SSR) refers to the process of pre-rendering client-side single-page applications on the server and then sending a fully rendered page on user request. Server-side rendering is essential because server-side rendered applications are SEO-friendly and fast. Apps that support server-side rendering are usually due to their reduced page load time.

Astro, Remix, and Next.js offer server-side rendering (SSR) to generate the markup and content of our pages from the web server before sending it to the client.

// Astro SSR configuration

// Path: astro.config.mjs
import { defineConfig } from 'astro/config';
import nodejs from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: nodejs({
    mode: 'standalone'
  })
});

// Next.js SSR example
// pages/products/[id].js
export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
    </div>
  );
}

export async function getServerSideProps({ params, req, res }) {
  // This runs on every request
  const product = await fetchProduct(params.id);

  // Set cache headers
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  );

  return {
    props: { product }
  };
}

// Remix SSR example
// app/routes/products.$id.jsx
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader({ params, request }) {
  const product = await fetchProduct(params.id);

  return json(
    { product },
    {
      headers: {
        'Cache-Control': 'max-age=300, s-maxage=3600'
      }
    }
  );
}

export default function Product() {
  const { product } = useLoaderData();

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
    </div>
  );
}

Ease Of Use

Next.js, Astro, and Remix have a short learning curve. Because they are all based on React, you only need a basic understanding of React to set up Next.js, Astro, and Remix. They all feature developer-friendly documentation, making them simple to use and configure.

Next includes the create-next-app CLI command for quickly launching a Next.js application. For bootstrapping an Astro application, use the create astro@latest command, whereas Remix uses the create-remix@latest command for Remix apps.

# Create a new Next.js app
npx create-next-app@latest my-next-app

# Create a new Astro app
npm create astro@latest my-astro-app

# Create a new Remix app
npx create-remix@latest my-remix-app

Conclusion

We looked at Astro, a highly performant library for shipping no JavaScript code, Remix, a framework for handling client-side and server-side code, and Next.js, which includes data fetching methods such as ISR, CSR, SSG, and SSR.

We looked at key features, loading speed, hydration, server-side rendering, and ease of use. This allows you to select the framework to utilize for your projects. It’s not about which framework is better but which solves your problem best.

// Framework selection helper
function recommendFramework(requirements) {
  // Content-heavy site with minimal interactivity
  if (requirements.contentFocused && requirements.minimalInteractivity) {
    return "Astro";
  }

  // Full-stack application with forms and data mutations
  if (requirements.formHandling && requirements.dataManagement) {
    return "Remix";
  }

  // Enterprise application with complex requirements
  if (requirements.enterprise && requirements.ecosystem) {
    return "Next.js";
  }

  // General recommendation based on team experience
  return requirements.teamExperience || "Next.js";
}

// Example usage
console.log(recommendFramework({
  contentFocused: true,
  minimalInteractivity: true,
  teamExperience: "React"
})); // Output: "Astro"

If you would like to start building with these frameworks, check out these resources:

Continue discussing this topic further or connect with more people using Strapi on our Discord community. It is a great place to share your thoughts, ask questions, and participate in live discussions.

Polymorphism in Java

Solomon Eseme — Sat, 03 May 2025 09:04:30 +0000

Polymorphism is a fundamental concept in object-oriented programming (OOP). Since Java is an OOP language, it fully supports polymorphism, which allows developers to write more flexible, efficient, and reusable code.

The term polymorphism comes from two Greek words: poly (meaning “many”) and morph (meaning “form”). So, polymorphism literally means “many forms,” a single object can take on multiple forms or behaviors.

Example -

Consider a person named Ayush. At home, he acts as a teacher , helping his children study. At the office, he becomes an employee , fulfilling tasks assigned by his manager. On weekends, he participates in cultural programs as a dancer.

Though Ayush is one individual, his behavior changes based on the situation. Similarly, in Java, a single object can perform different behaviors depending on how it is used, which can be achieved through method overloading or method overriding.

Types Of Polymorphism

Compile Time Polymorphism

Compile-time polymorphism is also known as static or early binding. It occurs when the decision about which method to call is made at compile time.

Example — Method overloading

Run Time Polymorphism

Run-time polymorphism is also known as dynamic or late binding. It occurs when the decision about which method to call is made at run time.

Example - Method Overriding

Compile Time vs Run Time Polymorphism

What is Method Overloading?

Developing multiple methods with the same name by variation in the argument list is called method overloading.
Variation in the argument lists means variation in the number of arguments, the datatype of the arguments, and the position of the arguments.
Both static and non-static methods can be overloaded.

Two methods are said to be overloaded if both the method having same name but variation in arguments, such as the number of arguments, the datatype of the arguments, and the position of the arguments.

Syntax:

returnType methodName(parameterType1 param1) {  
    // method body  
}

returnType methodName(parameterType1 param1, parameterType2 param2) {  
    // method body  
}

returnType methodName(parameterType1 param1, parameterType2 param2, parameterType3 param3) {  
    // method body  
}

Example

public class MasterBackend {

    // sum method with two int parameters
    public int sum(int a, int b) {
        return a + b;
    }

    // sum method with three int parameters
    public int sum(int a, int b, int c) {
        return a + b + c;
    }

    // sum method with two double parameters
    public double sum(double a, double b) {
        return a + b;
    }

    public static void main(String[] args) {
        MasterBackend obj = new MasterBackend();

        System.out.println("Sum of 10 and 20: " + obj.sum(10, 20));
        System.out.println("Sum of 10, 20 and 30: " + obj.sum(10, 20, 30));
        System.out.println("Sum of 10.5 and 20.5: " + obj.sum(10.5, 20.5));
    }
}

Here, in this example, inside the MasterBackend class, we develop several methods with the same name but variations in parameters. But all the methods perform the same operation, which is addition.

In the first method, we add two Integer numbers, and in the second method, we add three Integer numbers; then, in the third method, we add two double numbers, that’s why we give the same name.

By giving the same name, we can remember the method names easily, and compile-time polymorphism occurs when the decision about which method to call is made at compile time according to the parameters.

Output:

Sum of 10 and 20: 30
Sum of 10, 20 and 30: 60
Sum of 10.5 and 20.5: 31.0

What is Method Overriding?

Method overriding is a mechanism that enables runtime polymorphism in Java.
It occurs when a subclass provides a specific implementation of a method that is already defined in its superclass.
Inheritance is essential for method overriding, as the method in the subclass must originate from a superclass.
The method signature (name, parameters, and order) in the subclass must be identical to that of the superclass.
Static and private methods cannot be overridden because:
Method overriding is commonly used in abstract classes and interfaces , where child classes are required to provide specific implementations for abstract methods.
The @override annotation is used to:
Indicate that a method is intended to override a superclass method.
Help catch errors at compile time if the method signature doesn’t match.

In simple terms:

When a child (or subclass) is not satisfied with the behavior of a method inherited from the parent (superclass), it can override that method to provide a new implementation. This is known as method overriding.

Syntax:

// Superclass
class SuperClass {
    returnType methodName(parameterType1 param1, parameterType2 param2) {
        // method body
    }
}

// Subclass
class SubClass extends SuperClass {
    @Override
    returnType methodName(parameterType1 param1, parameterType2 param2) {
        // overridden method body
    }
}

Here, @override annotation for better readability and compile-time checking.

Example:

class Person {
    public void smoking() {
        System.out.println("Person may or may not smoke.");
    }
}

class Teenager extends Person {
    @Override
    public void smoking() {
        System.out.println("Teenager should avoid smoking.");
    }
}

// Main class
public class MasterBackend {
    public static void main(String[] args) {
        Person p1 = new Person();         
        Person p2 = new Teenager();       

        p1.smoking(); 
        p2.smoking();
    }
}

In this example, we have a superclass called Person and a subclass named Teenager. Both classes define a method with the same name and signature: smoking(). However, each class provides its own implementation.

The Person class offers a general statement about smoking, while the Teenager class overrides the method to deliver a more specific message.

We use the same method name because the action being performed is conceptually the same, communicating a message about smoking, but the behavior varies depending on the object type.

This illustrates runtime polymorphism , where the decision about which method to invoke is made based on the actual object instance rather than the reference type.

Output:

Person may or may not smoke. 
Teenager should avoid smoking.

Example 2:

class Vehicle {
    void start() {
        System.out.println("The vehicle starts");
    }
}

class Car extends Vehicle {
    @Override
    void start() {
        System.out.println("The car starts with a key ignition");
    }
}

class Bike extends Vehicle {
    @Override
    void start() {
        System.out.println("The bike starts with a kick");
    }
}

public class Main {
    public static void main(String[] args) {
        Vehicle myVehicle = new Vehicle();
        myVehicle.start(); // Calls the start method in Vehicle

        Vehicle myCar = new Car();
        myCar.start(); // Calls the overridden start method in Car

        Vehicle myBike = new Bike();
        myBike.start(); // Calls the overridden start method in Bike
    }
}

In this example, Vehicle is the superclass that defines a method named start(). The classes Car and Bike extend Vehicle and the start() method to provide behavior specific to their types.

At runtime, the actual object type (whether it's a Car, Bike, or Vehicle) determines which version of the start() method is executed.

This demonstrates runtime polymorphism , where method resolution is deferred until the program is running and depends on the object's actual class , not the reference type.

Output:

The vehicle starts 
The car starts with a key ignition 
The bike starts with a kick

Overloading Vs Overriding

Method Overloading

Occurs within the same class
Same method name but different parameter list
Return type can be different (if the parameter list is different)
No inheritance required
Compile-time polymorphism (resolved at compile time)
Increases code readability and reusability
No @Overloding annotation used
Method resolution happens by checking the method signature

Method Overriding

Occurs in a subclass (child class) only
Same method name and same parameter list as in the superclass
Return type must be the same or covariant
Requires inheritance
Runtime polymorphism (resolved at runtime)
Used to provide a specific implementation of a method
Uses @override annotation (recommended)
Method resolution depends on the object’s runtime type

Frequently Asked Questions

Can we override the static methods?

No. We can’t override static methods because static methods will not be inherited by the subclass. And to achieve method overriding, inheritance is mandatory.

Can we overload the main method?

Yes. We can overload the main method, but the JVM only takes that method which is having the String args[] as a parameter.

Can we override the main method?

No. Because the main method is a static method and static method will not be inherited by the subclass. And to achieve method overriding, inheritance is mandatory.

Can we override the constructor?

No. Because the constructor will not be inherited by a subclass. And to achieve method overriding, inheritance is mandatory.

Thank you for being a part of the community

Before you go:

Whenever you’re ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform: Join thousands of backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.
The MB Academy: The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.
Join Backend Weekly: If you like posts like this, you will absolutely enjoy our exclusive weekly newsletter, sharing exclusive backend engineering resources to help you become a great Backend Engineer.
Get Backend Jobs: Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board.

Originally published at https://masteringbackend.com on May 3, 2025.

SEO-Friendly Pagination Solution for Large Websites

Solomon Eseme — Wed, 30 Apr 2025 15:48:49 +0000

Pagination is one of the most overlooked SEO challenges for large websites.

Why?

Search engines struggle with deep crawlability — Traditional pagination structures often bury important content, making deep pages hard to reach.
Users get frustrated — Clicking through endless “Next” buttons or dealing with poorly designed pagination UI isn’t user-friendly.

We built an SEO-friendly pagination solution on our Strapi-powered blog at Deploi.ca/blog, which has:

4,100+ blog posts
83 paginated listing pages

This pagination system keeps deep content crawlable while providing a clean and intuitive user experience.

The Smart, SEO-Optimized Pagination Solution

Our pagination ensures that any listing page is reachable in just two clicks from the blog landing page while keeping the UI uncluttered.

How It Works

We use anchor pages and dynamic pagination updates instead of showing dozens of individual page links.

When a user or search engine lands on a paginated page, they see a progressive pagination structure that adapts dynamically.

Pagination Structure Example

On the Deploi blog, here’s the pagination you see on the first page:

Users can navigate to the next page by clicking the second links. If we expand the ellipsis, here are the rendered links available to both users and search engines:

Google has access to all the pagination links within the current range (1–9), as well as anchor pages, which we defined in increments of ten.

In this example, let’s say Google follows anchor page 30, the pagination will dynamically update to look like this:

As you can see in the screenshot above, both users and Google have access to the previous page, the next page, the first page and the last page.

But that’s not all, let’s reveal the first ellipsis by the left:

Now we can easily access all the previous anchor pages, which are pages 20 and 10.

By expanding the second ellipsis, we see that Google can crawl all the pages within the current range (30–39) and also access all the remaining anchor pages (40, 50, 60, 70, and 80):

If we click on page 37 for example, which is in the current range, pagination will update accordingly:

The shows that Google could reach the deepest listing page with only two link follows from the blog landng page and access any of the 4100+ blog posts with just three follows.

The Code Behind It

Our smart pagination system dynamically reveals relevant pages while keeping the UI intuitive. Let’s break down the key components of our React-based Pagination component.

Understanding the Props

Our Pagination component uses the following props:

pageCount - Total number of pages.
gotoPage - Callback function to navigate to a different page.
searchString - Optional search query parameter.
startUrl - Base URL for page navigation.
pageInde - Current active page.

Managing State

We use React’s useState and useEffect hooks to handle page changes and dynamic visibility:

const [activePage, setActivePage] = useState(pageIndex);
const [showLeftPages, setShowLeftPages] = useState(false);
const [showRightPages, setShowRightPages] = useState(false);

useEffect(() => {
  setActivePage(pageIndex);
  setShowLeftPages(false);
  setShowRightPages(false);
}, [pageIndex]);

activePage: Keeps track of the currently selected page.
showLeftPages / showRightPages: Controls visibility of hidden anchor pages.
useEffect resets visibility states when the page index updates.

Generating Page Numbers

To create an SEO-friendly pagination structure, we generate page numbers dynamically:

This ensures:

The first and last pages are always visible.
The current page and its neighbors (previous/next) are included.
Anchor pages at every 10th interval are displayed.

Handling Visibility

To avoid clutter, we only show pages based on specific conditions:

const isVisible = (page) => {
  if (page === 1 || page === pageCount) return true;
  if (page === activePage - 1 || page === activePage || page === activePage + 1) return true;
  if (showLeftPages && page < activePage) return true;
  if (showRightPages && page > activePage) return true;
  return false;
};

First and last pages are always visible.
Previous, current, and next pages are always included.
Clicking the left/right ellipsis reveals the hidden anchor and current range pages.

Handling Page Clicks

When a user selects a page, we update the state and trigger the gotoPage function:

const handlePageChange = (page) => {
  if (page >= 1 && page <= pageCount) {
    setShowLeftPages(false);
    setShowRightPages(false);
    gotoPage && gotoPage(page);
  }
};

For ellipsis clicks:

const handleLeftEllipsisClick = () => {
  setShowLeftPages(true);
  setShowRightPages(false);
};

const handleRightEllipsisClick = () => {
  setShowRightPages(true);
  setShowLeftPages(false);
};

Clicking the left ellipsis expands previous anchor pages.
Clicking the right ellipsis expands future anchor pages.

Rendering the Pagination UI

Each page number is displayed dynamically:

const renderPageNumbers = () => {
  const pages = generatePageNumbers();
  let lastRenderedPage = 0;

  return (
    <ul className="flex items-center justify-center gap-2 flex-wrap">
      {pages.map((page, index) => {
        const shouldShowLeftEllipsis =
          !showLeftPages &&
          ((page > 2 && page <= activePage && lastRenderedPage === 1) ||
            (activePage >= 3 && activePage <= 9 && page === 2));

        const shouldShowRightEllipsis =
          !showRightPages &&
          page < pageCount &&
          page >= activePage &&
          pages[index + 1] === pageCount;

        const isPageVisible = isVisible(page);
        lastRenderedPage = page;

        return (
          <React.Fragment key={page}>
            {shouldShowLeftEllipsis && (
              <li
                onClick={handleLeftEllipsisClick}
                className="cursor-pointer text-primary-100 w-[40px] h-[40px] flex items-center justify-center hover:bg-primary-50 transition-colors rounded-full border border-primary-100"
              >
                ...
              </li>
            )}
            <li
              className={`${!isPageVisible ? "hidden" : ""} cursor-pointer border border-primary-100 text-base font-semibold text-primary-100 rounded-full w-[40px] h-[40px] flex items-center justify-center hover:bg-primary-50 transition-colors ${page === activePage ? "bg-primary-100 text-white" : ""}`}
            >
              <a
                href={
                  searchString
                    ? `${startUrl}?p=${page}&q=${searchString}`
                    : `${startUrl}?p=${page}`
                }
                className="w-full h-full flex items-center justify-center"
              >
                {page < 10 ? `0${page}` : page}
              </a>
            </li>
            {shouldShowRightEllipsis && (
              <li
                onClick={handleRightEllipsisClick}
                className="cursor-pointer text-primary-100 w-[40px] h-[40px] flex items-center justify-center hover:bg-primary-50 transition-colors rounded-full border border-primary-100"
              >
                ...
              </li>
            )}
          </React.Fragment>
        );
      })}
    </ul>
  );
};

If needed, the left ellipsis (...) is displayed before hidden pages.
If needed, the right ellipsis (...) is displayed after the current range.
Page links dynamically update based on visibility logic.

Wrapping Everything Together

Finally, the component renders the pagination UI:

return (
  <div className="flex flex-col md:flex-row justify-center items-center">
    {renderPageNumbers()}
  </div>
);

This ensures our pagination works across different screen sizes.

By structuring pagination this way, we ensure:

Efficient crawling for search engines (deep content remains discoverable).
User-friendly navigation is retained by hiding crawler-focused links behind ellipsis.
Scalability for any large website (whether a blog, eCommerce store, or content-heavy platform).

This approach solves pagination SEO issues while maintaining a great user experience.

Want to implement this on your site? Get in touch with us at Deploi.ca.

Originally published at https://strapi.io.

Epic Next JS 15 Tutorial Part 8: Search and Pagination in Next.js

Solomon Eseme — Mon, 28 Apr 2025 17:54:11 +0000

We are making amazing progress. We are now in the final stretch. In this section, we will look at Search and Pagination.

How To Handle Search In Next.js

Let’s jump in and look at how to implement search with Next.js and Strapi CMS.

First, create a new file inside our src/components/custom folder called search.tsx and add the following code.

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useDebouncedCallback } from "use-debounce";
import { Input } from "@/components/ui/input";

export function Search() {
  const searchParams = useSearchParams();
  const { replace } = useRouter();
  const pathname = usePathname();

  const handleSearch = useDebouncedCallback((term: string) => {
    console.log(`Searching... ${term}`);
    const params = new URLSearchParams(searchParams);
    params.set("page", "1");

    if (term) {
      params.set("query", term);
    } else {
      params.delete("query");
    }

    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <div>
      <Input
        type="text"
        placeholder="Search"
        onChange={(e) => handleSearch(e.target.value)}
        defaultValue={searchParams.get("query")?.toString()}
      />
    </div>
  );
}

The secret to understanding how our Search component works is to be familiar with the following hooks from Next.js.

We use it in our code to get our current parameters from our url.

Then, we use the new URLSearchParams to update our search parameters. You can learn more about it here.

docs reference : Allows us to access the router object inside any function component in your app. We will use the replace method to prevent adding a new URL entry into the history stack.
usePathname docs reference: This is a Client Component hook that lets you read the current URL's pathname. We use it to find our current path before concatenating our new search parameters.
useDebouncedCallback npm reference: Used to prevent making an api call on every keystroke when using our Search component.

Install the use-debounce package from npm with the following command.

yarn add use-debounce

Now, let’s look at the flow of our Search component’s work by looking at the following.

return (
  <div>
    <Input
      type="text"
      placeholder="Search"
      onChange={(e) => handleSearch(e.target.value)}
      defaultValue={searchParams.get("query")?.toString()}
    />
  </div>
);

We are using the defaultValue prop to set the current search parameters from our URL.

When the onChange fires, we pass the value to our handleSearch function.

const handleSearch = useDebouncedCallback((term: string) => {
  console.log(`Searching... ${term}`);
  const params = new URLSearchParams(searchParams);
  params.set("page", "1");

  if (term) {
    params.set("query", term);
  } else {
    params.delete("query");
  }

  replace(`${pathname}?${params.toString()}`);
}, 300);

Inside the handleSearch function, we use replace to set our new search parameters in our URL.

So whenever we type the query in our input field, it will update our URL.

Let’s now add our Search component to our code.

Navigate to the src/app/dashboard/summaries/page.tsx file and update it with the following code.

import Link from "next/link";
import { getSummaries } from "@/data/loaders";
import ReactMarkdown from "react-markdown";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Search } from "@/components/custom/search";

interface LinkCardProps {
  documentId: string;
  title: string;
  summary: string;
}

function LinkCard({ documentId, title, summary }: Readonly<LinkCardProps>) {
  return (
    <Link href={`/dashboard/summaries/${documentId}`}>
      <Card className="relative">
        <CardHeader>
          <CardTitle className="leading-8 text-pink-500">
            {title || "Video Summary"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ReactMarkdown
            className="card-markdown prose prose-sm max-w-none
              prose-headings:text-gray-900 prose-headings:font-semibold
              prose-p:text-gray-600 prose-p:leading-relaxed
              prose-a:text-pink-500 prose-a:no-underline hover:prose-a:underline
              prose-strong:text-gray-900 prose-strong:font-semibold
              prose-ul:list-disc prose-ul:pl-4
              prose-ol:list-decimal prose-ol:pl-4"
          >
            {summary.slice(0, 164) + " [read more]"}
          </ReactMarkdown>
        </CardContent>
      </Card>
    </Link>
  );
}

interface SearchParamsProps {
  searchParams?: {
    query?: string;
  };
}

export default async function SummariesRoute({
  searchParams,
}: SearchParamsProps) {
  const search = await searchParams;
  const query = search?.query ?? "";
  console.log(query);
  const { data } = await getSummaries();

  if (!data) return null;
  return (
    <div className="grid grid-cols-1 gap-4 p-4">
      <Search />
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {data.map((item: LinkCardProps) => (
          <LinkCard key={item.documentId} {...item} />
        ))}
      </div>
    </div>
  );
}

Excellent. Now that our Search component shows up, let's move on to the second part. We'll pass our query search through our getSummaries function and update it accordingly to allow us to search our queries.

To make the search work, we will rely on the following parameters.

sorting : we will sort all of our summaries in descending order, ensuring that the newest summary appears first.
filters : The filters we will use $or operator to combine our search conditions. This means the search will return summaries based on the fields we will filter using $containsi, which will ignore case sensitivity.

Let’s look inside our src/data/loaders.ts file and update the following code inside our getSummaries function.

export async function getSummaries() {
  const url = new URL("/api/summaries", baseUrl);
  return fetchData(url.href);
}

Here are the changes we are going to make.

export async function getSummaries(queryString: string) {
  const query = qs.stringify({
    sort: ["createdAt:desc"],
    filters: {
      $or: [
        { title: { $containsi: queryString } },
        { summary: { $containsi: queryString } },
      ],
    },
  });
  const url = new URL("/api/summaries", baseUrl);
  url.search = query;
  return fetchData(url.href);
}

We will create a query to filter our summaries on the title and summary.

Now, we have one more step before testing our search. Let’s navigate back to the src/app/dashboard/summaries folder and make the following changes inside our page.tsx file.

We cannot pass and utilize our query params since we just updated our getSummaries function.

const { data } = await getSummaries(query);

Now, let’s see if our search is working.

Great. Now that our search is working, we can simply move forward with our pagination.

How To Handle Pagination In Your Next.js Project

Pagination Basics

Pagination involves dividing content into separate pages and providing users with controls to navigate to the first, last, previous, following, or specific page.

This method improves performance by reducing the amount of data loaded simultaneously. It makes it easier for users to find specific information by browsing through a smaller subset of data.

Let’s implement our pagination, but first, let’s walk through the code example below, which we will use for our PaginationComponent inside of our Next.js project.

It is based on the Shadcn UI component that you can take a look at here;

So, run the following command to get all the necessary dependencies.

npx shadcn@latest add pagination

And add the following code to your components/custom folder file called pagination-component.tsx.

"use client";
import { FC } from "react";
import { usePathname, useSearchParams, useRouter } from "next/navigation";

import {
  Pagination,
  PaginationContent,
  PaginationItem,
} from "@/components/ui/pagination";

import { Button } from "@/components/ui/button";

interface PaginationProps {
  pageCount: number;
}

interface PaginationArrowProps {
  direction: "left" | "right";
  href: string;
  isDisabled: boolean;
}

const PaginationArrow: FC<PaginationArrowProps> = ({
  direction,
  href,
  isDisabled,
}) => {
  const router = useRouter();
  const isLeft = direction === "left";
  const disabledClassName = isDisabled ? "opacity-50 cursor-not-allowed" : "";

  return (
    <Button
      onClick={() => router.push(href)}
      className={`bg-gray-100 text-gray-500 hover:bg-gray-200 ${disabledClassName}`}
      aria-disabled={isDisabled}
      disabled={isDisabled}
    >
      {isLeft ? "«" : "»"}
    </Button>
  );
};

export function PaginationComponent({ pageCount }: Readonly<PaginationProps>) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get("page")) || 1;

  const createPageURL = (pageNumber: number | string) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", pageNumber.toString());
    return `${pathname}?${params.toString()}`;
  };

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationArrow
            direction="left"
            href={createPageURL(currentPage - 1)}
            isDisabled={currentPage <= 1}
          />
        </PaginationItem>
        <PaginationItem>
          <span className="p-2 font-semibold text-gray-500">
            Page {currentPage}
          </span>
        </PaginationItem>
        <PaginationItem>
          <PaginationArrow
            direction="right"
            href={createPageURL(currentPage + 1)}
            isDisabled={currentPage >= pageCount}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Again, we are using our familiar hooks from before to make this work, usePathname, searchParams, and useRouter in a similar way as we did before.

We are receiving pageCount via props to see our available pages. Inside the PaginationArrow component, we use useRouter to programmatically update our URL via the push method on click.

Let’s add this component to our project. In our components/custom folder, create a PaginationComponent.tsx file and paste it into the above code.

Now that we have our component, let’s navigate to src/app/dashboard/summaries/page.tsx and import it.

import { PaginationComponent } from "@/components/custom/pagination-component";

Now update our SearchParamsProps interface to the following.

interface SearchParamsProps {
  searchParams?: {
    page?: string;
    query?: string;
  };
}

Now, let’s create a currentPage variable to store the current page we get from our URL parameters.

const currentPage = Number(searchParams?.page) || 1;

Now, we can pass our currentPage to our getSummaries function.

const { data } = await getSummaries(query, currentPage);

Now, let’s go back to our loaders. tsx file and update the getSummaries with the following code to utilize our pagination.

export async function getSummaries(queryString: string, currentPage: number) {
  const PAGE_SIZE = 4;

  const query = qs.stringify({
    sort: ["createdAt:desc"],
    filters: {
      $or: [
        { title: { $containsi: queryString } },
        { summary: { $containsi: queryString } },
      ],
    },
    pagination: {
      pageSize: PAGE_SIZE,
      page: currentPage,
    },
  });
  const url = new URL("/api/summaries", baseUrl);
  url.search = query;
  return fetchData(url.href);
}

In the above example, we use Strapi’s pagination fields and pass pageSize and page fields. You can learn more about Strapi's pagination here;

Now back in our src/app/dashboard/summaries/page.tsx, let's make a few more minor changes before hooking everything up.

If we look at our getSummaries call, we have access to another field that Strapi is returning called meta. Let's make sure we are getting it from our response with the following.

const { data, meta } = await getSummaries(query, currentPage);
console.log(meta);

We will see the following data if we console log our meta field.

{ pagination: { page: 1, pageSize: 4, pageCount: 1, total: 4 } }

Notice that we have our pageCount property. We will use it to tell our PaginationComponent the number of pages we have available.

So, let’s extract it from our meta data with the following.

  const pageCount = meta?.pagination?.pageCount;

And finally, let’s use our PaginationComponent with the following.

<PaginationComponent pageCount={pageCount} />

The completed code should look like the following.

import Link from "next/link";
import { getSummaries } from "@/data/loaders";
import ReactMarkdown from "react-markdown";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Search } from "@/components/custom/search";
import { PaginationComponent } from "@/components/custom/pagination-component";

interface LinkCardProps {
  documentId: string;
  title: string;
  summary: string;
}

function LinkCard({ documentId, title, summary }: Readonly<LinkCardProps>) {
  return (
    <Link href={`/dashboard/summaries/${documentId}`}>
      <Card className="relative">
        <CardHeader>
          <CardTitle className="leading-8 text-pink-500">
            {title || "Video Summary"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ReactMarkdown 
            className="card-markdown prose prose-sm max-w-none
              prose-headings:text-gray-900 prose-headings:font-semibold
              prose-p:text-gray-600 prose-p:leading-relaxed
              prose-a:text-pink-500 prose-a:no-underline hover:prose-a:underline
              prose-strong:text-gray-900 prose-strong:font-semibold
              prose-ul:list-disc prose-ul:pl-4
              prose-ol:list-decimal prose-ol:pl-4"
          >
            {summary.slice(0, 164) + " [read more]"}
          </ReactMarkdown>
        </CardContent>
      </Card>
    </Link>
  );
}

interface SearchParamsProps {
  searchParams?: {
    page?: string;
    query?: string;
  };
}

export default async function SummariesRoute({ searchParams }: SearchParamsProps) {
  const search = await searchParams;
  const query = search?.query ?? ""; 
  const currentPage = Number(search?.page) || 1;

  const { data, meta } = await getSummaries(query, currentPage);
  const pageCount = meta?.pagination?.pageCount;

  console.log(meta);  

  if (!data) return null;
  return (
    <div className="grid grid-cols-1 gap-4 p-4">
      <Search />
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {data.map((item: LinkCardProps) => (
          <LinkCard key={item.documentId} {...item} />
        ))}
      </div>
      <PaginationComponent pageCount={pageCount} />
    </div>
  );
}

Now, the moment of truth: Let’s see if it works. Make sure you add more summaries since our page size is currently set to 4 items. You need to have at least 5 items.

Excellent, it is working.

Conclusion

This Next.js with Strapi CMS tutorial covered how to implement search and pagination functionalities. Hope you are enjoying this tutorial.

We are almost done. We have two more sections to go, including deploying our project to Strapi Cloud and Vercel.

See you in the next post.

Originally published at https://strapi.io.