Multi-page app architecture in No-Code - Deep Dive

Overview - Multi-page app architecture

What is it?

Multi-page app architecture is a way to build websites or applications where each page is a separate document or screen. When you click a link or button, the whole page reloads to show new content. This is different from single-page apps, which update parts of the page without reloading. Multi-page apps are common for websites with many different pages, like online stores or news sites.

Why it matters

This architecture exists because it is simple and works well for many websites. Without it, users would have to wait for complex loading or might get confused by changing content. Multi-page apps make navigation clear and easy, and they work well with search engines. Without multi-page apps, many websites would be slower or harder to use, especially on older devices or slow internet.

Where it fits

Before learning multi-page app architecture, you should understand basic web pages and how links work. After this, you can learn about single-page apps, which are more complex and use different techniques to update content without reloading. Knowing multi-page apps helps you understand how websites evolved and how to choose the right approach for your project.

Mental Model

Core Idea

A multi-page app is like a book where each page is separate, and turning a page reloads the whole view to show new information.

Think of it like...

Imagine a photo album where each photo is on a different page. To see a new photo, you turn the page and see a completely new picture, not just a part of the old one changing.

┌───────────────┐     Click link     ┌───────────────┐
│   Page 1     │ ───────────────▶ │   Page 2     │
│ (Home page)  │                  │ (New page)   │
└───────────────┘                  └───────────────┘

Each arrow means the whole page reloads to show new content.

Build-Up - 6 Steps

1

Foundation

Understanding Web Pages and Links

Concept: Learn what a web page is and how clicking links moves you between pages.

A web page is a document shown in your browser. Links are special parts you click to go to another page. When you click a link, the browser loads a new page from the internet.

Result

Clicking a link loads a new page, replacing the old one completely.

Knowing that each page is a separate document helps you understand why the whole screen reloads in multi-page apps.

2

Foundation

Page Reloads and Navigation Basics

Concept: Explore what happens when a page reloads and how navigation works in multi-page apps.

When you click a link, the browser asks the server for a new page. The server sends the new page, and the browser shows it. This means the entire page content is replaced, and the browser resets things like scroll position.

Result

Users see a full new page each time they navigate.

Understanding full page reloads explains why multi-page apps can feel slower but are simpler to build.

3

Intermediate

Structure of Multi-page Apps

Concept: Learn how multi-page apps organize content into separate pages and files.

Each page in a multi-page app is usually a separate file or route on the server. For example, the home page might be 'index.html', and the about page 'about.html'. The server sends these files when requested.

Result

The app is divided into clear, separate pages, each with its own content and URL.

Knowing this structure helps you plan and organize your app for easy navigation and maintenance.

4

Intermediate

Advantages and Limitations of Multi-page Apps

🤔Before reading on: do you think multi-page apps load faster or slower than single-page apps? Commit to your answer.

Concept: Understand the benefits and drawbacks of multi-page apps compared to other architectures.

Multi-page apps are simple and work well with search engines. They also handle large amounts of content easily. However, because each page reloads fully, navigation can feel slower and less smooth than apps that update parts of the page without reloading.

Result

You can decide when multi-page apps are the right choice based on your needs.

Knowing the trade-offs helps you choose the best architecture for user experience and development effort.

5

Advanced

Server Role in Multi-page Apps

🤔Before reading on: do you think the server sends the whole page or just parts of it in multi-page apps? Commit to your answer.

Concept: Learn how the server delivers pages and handles requests in multi-page apps.

In multi-page apps, the server sends the entire page each time the user navigates. It processes the request, prepares the full page content, and sends it back. This means the server controls what the user sees on each page load.

Result

The server is responsible for delivering complete pages, ensuring content is up-to-date and consistent.

Understanding the server's role clarifies why multi-page apps are easier to secure and manage content-wise.

6

Expert

Optimizing Multi-page App Performance

🤔Before reading on: do you think caching helps multi-page apps load faster or slower? Commit to your answer.

Concept: Explore techniques to make multi-page apps feel faster and more responsive.

Developers use caching to store pages or parts of pages on the user's device or in the network. This reduces loading time when revisiting pages. Other techniques include minimizing page size and using fast servers. These optimizations help multi-page apps compete with single-page apps in speed.

Result

Users experience quicker page loads and smoother navigation despite full reloads.

Knowing optimization methods helps you improve user experience without changing the basic architecture.

Under the Hood

When a user clicks a link, the browser sends a request to the server for a new page. The server processes this request, often running code to prepare the page content, then sends the full HTML document back. The browser discards the old page and renders the new one from scratch, including loading images, styles, and scripts anew.

Why designed this way?

This design comes from the early web, where simplicity and compatibility were key. Sending full pages ensures that every navigation starts fresh, avoiding complex state management in the browser. Alternatives like single-page apps came later to improve speed and interactivity but require more complex programming.

User Clicks Link
      │
      ▼
┌───────────────┐
│ Browser sends │
│  request to   │
│    server     │
└───────────────┘
      │
      ▼
┌───────────────┐
│ Server prepares│
│ full page HTML │
└───────────────┘
      │
      ▼
┌───────────────┐
│ Browser receives│
│ new page and   │
│ renders it     │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does clicking a link in a multi-page app update only part of the page or reload the whole page? Commit to your answer.

Common Belief: Clicking a link only changes part of the page without reloading everything.

Reality: In multi-page apps, clicking a link reloads the entire page, replacing all content.

Why it matters: Believing only part of the page changes can lead to confusion when the whole page reloads, causing unexpected delays or loss of scroll position.

Quick: Do multi-page apps always load slower than single-page apps? Commit to yes or no.

Common Belief: Multi-page apps are always slower because they reload the whole page each time.

Reality: While multi-page apps reload fully, good server performance and caching can make them fast and responsive.

Why it matters: Assuming they are always slow may prevent developers from choosing a simpler, more reliable architecture when it fits the project.

Quick: Can multi-page apps work well with search engines? Commit to yes or no.

Common Belief: Multi-page apps are bad for search engines because they reload pages.

Reality: Multi-page apps are actually very good for search engines because each page has its own URL and content.

Why it matters: Misunderstanding this can lead to poor SEO decisions and reduced website visibility.

Quick: Do multi-page apps require complex browser programming to work? Commit to yes or no.

Common Belief: Multi-page apps need complex JavaScript to function properly.

Reality: Multi-page apps can work with very little or no JavaScript, relying on basic browser behavior.

Why it matters: Thinking they need complex code can discourage beginners from building simple, effective websites.

Expert Zone

1

Multi-page apps naturally reset JavaScript state on each page load, which can simplify debugging but requires careful state management for user sessions.

2

URL structure in multi-page apps directly reflects the file or route organization on the server, making routing transparent and easier to manage.

3

Caching strategies in multi-page apps can be finely tuned per page, allowing selective updates without affecting the entire site.

When NOT to use

Multi-page apps are not ideal when you need very fast, seamless interactions without full reloads, such as in complex web applications or games. In those cases, single-page apps or progressive web apps are better alternatives.

Production Patterns

In real-world websites like e-commerce or news portals, multi-page apps are used to organize content into categories and articles, with server-side rendering for SEO and performance. They often combine with partial updates using AJAX for better user experience.

Connections

Single-page app architecture

Opposite approach to multi-page apps, updating content dynamically without full reloads.

Understanding multi-page apps clarifies why single-page apps need complex client-side code to manage state and navigation.

Book publishing

Both organize content into separate pages or chapters for easy navigation and reference.

Knowing how books are structured helps understand why multi-page apps separate content into distinct pages with clear URLs.

Caching in computer networks

Caching techniques improve performance by storing copies of pages or data to avoid repeated full loads.

Understanding caching helps optimize multi-page apps to feel faster despite full page reloads.

Common Pitfalls

#1 Expecting instant page changes without reload delays.

Wrong approach:

Designing a multi-page app with heavy images and scripts on every page without optimization.

Correct approach:

Optimize images and scripts, use caching and minimize page size to reduce reload time.

Root cause:

Not realizing that full page reloads mean all resources load again, causing delays.

#2 Trying to keep user input or scroll position after navigation without special handling.

Wrong approach:

Assuming form data or scroll stays after clicking a link in a multi-page app.

Correct approach:

Use techniques like saving state in cookies or local storage to restore input or scroll after reload.

Root cause:

Misunderstanding that full reload clears all page state by default.

#3 Using multi-page app structure for highly interactive apps needing fast updates.

Wrong approach:

Building a complex dashboard as a multi-page app expecting smooth, instant updates.

Correct approach:

Use single-page app architecture or hybrid approaches for interactive, real-time updates.

Root cause:

Not matching architecture to app needs, leading to poor user experience.

Key Takeaways

Multi-page app architecture organizes websites into separate pages, each loaded fully when accessed.

This approach is simple, reliable, and works well for many traditional websites and SEO.

Each navigation reloads the entire page, which can feel slower but ensures a fresh start.

Understanding server roles and caching helps optimize multi-page apps for better performance.

Choosing between multi-page and single-page apps depends on the project’s complexity and user experience needs.