Skip to main content

Tutorial NextJS - Day 2

Hari 2 – Navigasi, Layout, & Dynamic Routing Setelah berhasil melakukan instalasi dan membuat halaman pertama di Hari 1 , pada Hari 2 ini kita akan membuat website menjadi lebih hidup. Kita akan belajar cara membuat menu navigasi agar bisa pindah-pindah halaman, membuat tampilan menu yang konsisten (Layout), dan membuat halaman artikel yang pintar (Dynamic Routing). Tutorial ini tetap menggunakan Windows + VS Code dan melanjutan project nextjs-basic dari hari sebelumnya. 1. Navigasi Antar Halaman ( <Link> ) Di HTML biasa, kita menggunakan tag <a> untuk berpindah halaman. Namun, di Next.js kita menggunakan komponen khusus bernama <Link> . Kenapa harus pakai <Link> ? Jika pakai <a> , layar akan berkedip (loading ulang) setiap pindah halaman. Dengan <Link> , perpindahan halaman terjadi instan tanpa refresh. 1.1 Edit Halaman Home Kita akan menambahkan tombol untuk pergi ke halaman About. Buka file src/app/page.tsx , lalu ganti isinya dengan kod...
Post a Comment

Nginx vs Apache: Which Web Server Should You Use on a VPS?


Introduction

When setting up a VPS for hosting websites or applications, one of the first decisions you’ll face is choosing a web server. The two most popular options are Nginx and Apache.

Both are powerful, widely used, and production-ready — but they work very differently.

In this article, we’ll compare Nginx vs Apache, explain how each one works, highlight their strengths and weaknesses, and help you decide which web server is better for your VPS setup.

What Is a Web Server?

A web server is software that:

  • Receives requests from browsers

  • Processes those requests

  • Serves HTML, CSS, JavaScript, or API responses

Popular web servers include:

  • Nginx

  • Apache

  • LiteSpeed

  • Caddy

Among them, Nginx and Apache dominate most VPS environments.

What Is Apache?

Apache has been around since the mid-1990s and was the most widely used web server for many years.

How Apache Works

Apache uses a process-based or thread-based model:

  • Each request is handled by a process or thread

  • Simple and flexible

  • Easy to configure with .htaccess

Why Apache Became Popular

  • Extremely mature

  • Huge ecosystem

  • Works well with shared hosting

  • Supports per-directory configuration

What Is Nginx?

Nginx was designed to solve performance and scalability problems seen in traditional web servers.

How Nginx Works

Nginx uses an event-driven, asynchronous architecture:

  • One worker can handle thousands of connections

  • Low memory usage

  • Very fast at serving static content

Nginx is commonly used as:

  • A web server

  • A reverse proxy

  • A load balancer

Key Differences Between Nginx and Apache

1. Architecture

FeatureApacheNginx
Request handlingProcess / Thread-basedEvent-driven
Memory usageHigherLower
ConcurrencyLimitedVery high

Nginx handles large traffic spikes more efficiently.

2. Performance Under Load

  • Apache performs well for small to medium traffic

  • Nginx excels at:

    • High concurrency

    • Static file serving

    • Reverse proxy setups

For VPS environments, Nginx usually scales better.

3. Configuration Style

Apache

  • Uses .htaccess

  • Allows per-directory overrides

  • Easy for beginners

Nginx

  • No .htaccess

  • Centralized configuration

  • Requires reload after changes

While Apache feels simpler at first, Nginx configuration is cleaner and more predictable in the long run.

4. Reverse Proxy and Load Balancing

Nginx was built with reverse proxying in mind.

Common use cases:

  • Proxying requests to Node.js apps

  • Handling SSL termination

  • Load balancing multiple backend servers

Apache can do this too, but Nginx does it more efficiently.

5. Static File Handling

Nginx is extremely fast at serving:

  • Images

  • CSS

  • JavaScript

  • Downloads

Apache can serve static files well, but Nginx uses fewer resources.

6. Dynamic Content (PHP, Node, APIs)

  • Apache often runs PHP directly via modules

  • Nginx delegates dynamic content to:

    • PHP-FPM

    • Node.js

    • Python apps

This separation makes Nginx:

  • More modular

  • Easier to scale

  • Better suited for microservices

When Apache Is a Better Choice

Apache may be better if:

  • You rely heavily on .htaccess

  • You use shared hosting

  • You want simple per-folder rules

  • You manage many legacy PHP apps

Apache is still a solid and reliable choice.

When Nginx Is a Better Choice

Nginx is usually better if:

  • You use a VPS or cloud server

  • You host modern web apps

  • You run Node.js or APIs

  • You need reverse proxy or load balancing

  • You care about performance and scalability

For most DevOps setups, Nginx is the default choice.

Can You Use Both Together?

Yes — and many setups do.

A common architecture:

  • Nginx as a reverse proxy

  • Apache handling dynamic content behind it

This combines:

  • Nginx’s speed

  • Apache’s flexibility

However, this setup is more complex and not always necessary.

Security Considerations

Both web servers are secure when configured properly.

Best practices:

  • Keep software updated

  • Disable unnecessary modules

  • Use HTTPS

  • Apply rate limiting

  • Monitor logs

Security depends more on configuration than the web server choice.

Which One Should You Choose for a VPS?

Quick Recommendation

Use CaseRecommended
Personal VPSNginx
Node.js / APINginx
High trafficNginx
Legacy PHP appsApache
Simple shared hostingApache

For most modern VPS users, Nginx is the better long-term option.

Conclusion

Both Nginx and Apache are excellent web servers, but they are designed for different workloads.

Apache focuses on flexibility and compatibility, while Nginx prioritizes performance, scalability, and efficiency.

If you are building modern applications on a VPS, working with APIs, or planning to scale, Nginx is usually the smarter choice.

Understanding these differences helps you choose the right tool and avoid performance issues later.

Labels:

Comments

Post a Comment

Popular posts from this blog

Why Your React App Shows a Blank Page (And How to Fix It)

Introduction One of the most frustrating problems when working with React JS is opening your app and seeing… nothing . No error message. No UI. Just a blank page . This issue happens frequently, especially after deployment or routing changes. In this article, we’ll explain why React apps show a blank page , the most common causes , and how to fix them step by step . What a “Blank Page” Usually Means in React A blank page usually means: React failed to render the UI JavaScript error stopped execution Routing or build configuration is broken Most of the time, the issue is not React itself , but how the app is configured. 1. JavaScript Error in the Console The first thing you should always check is the browser console. How to Check Open the app Right click → Inspect Open the Console tab If you see a red error message, React stopped rendering. Common Examples Cannot read property of undefined Unexpected token Module not found Fix Read the...
Post a Comment
Read more

React Build vs Development Mode: What’s the Difference?

Introduction Many React developers are surprised when their app works perfectly during development — but behaves differently after deployment. Features break, routing fails, environment variables disappear, or performance changes dramatically. Most of these issues come from not understanding the difference between React’s development mode and production (build) mode . In this article, we’ll explain: What development mode really does What changes in production builds Why bugs appear only after deployment How to avoid common build-related mistakes What Is Development Mode in React? Development mode is what you use when running commands like: npm start npm run dev In this mode, React prioritizes developer experience , not performance. Key Characteristics of Development Mode Detailed error messages Helpful warnings Hot reloading (instant updates) Slower performance (on purpose) Extra checks for unsafe patterns Development mode helps you find bugs e...
Post a Comment
Read more