Multi-page app architecture in No-Code - Step-by-Step Execution

Concept Flow - Multi-page app architecture

User opens app URL

↓

Browser requests page 1

↓

Server sends full HTML page 1

↓

User interacts with page 1

↓

User clicks link/button

↓

Browser requests page 2

↓

Server sends full HTML page 2

↓

User interacts with page 2

↓

Repeat for each page

↓

User closes app

The app loads a full new page from the server each time the user navigates, showing one complete page at a time.

Execution Sample

No-Code

1. User opens homepage URL
2. Server sends full homepage HTML
3. User clicks 'About' link
4. Browser requests About page
5. Server sends full About page HTML

This shows how each page is loaded fully from the server when the user navigates.

Analysis Table

Step	User Action	Browser Request	Server Response	Page Displayed
1	Open app URL	Request homepage	Send homepage HTML	Homepage
2	Click 'About' link	Request About page	Send About page HTML	About page
3	Click 'Contact' link	Request Contact page	Send Contact page HTML	Contact page
4	Click 'Home' link	Request homepage	Send homepage HTML	Homepage
5	Close app	No request	No response	App closed

💡 User closes app, no further requests made

State Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Current Page	None	Homepage	About page	Contact page	Homepage	App closed

Key Insights - 3 Insights

Why does the whole page reload when I click a link?

Because in multi-page apps, each navigation sends a new request to the server, which responds with a full new page, as shown in execution_table rows 2 and 3.

Does the app keep any data in memory between pages?

No, each page is loaded fresh from the server, so any data in memory is reset unless stored externally (like cookies). This is seen as the page changes completely in execution_table.

Is the user experience slower because of full page reloads?

Yes, because the browser must load the entire page again from the server each time, unlike single-page apps that update parts dynamically.

Visual Quiz - 3 Questions

According to the execution_table, what page is displayed after step 3?

A Contact page

B Homepage

C About page

D No page

💡 Hint

Look at the 'Page Displayed' column in row 3 of the execution_table.

At which step does the browser request the About page?

A Step 1

B Step 2

C Step 4

D Step 3

💡 Hint

Check the 'Browser Request' column in the execution_table for the About page request.

If the user never clicks any link, how many server requests are made?

A Two

B Zero

C One

D Multiple

💡 Hint

Refer to the execution_table row 1 where the homepage is requested once.

Concept Snapshot

Multi-page apps load a full new page from the server on each navigation.
Each page is a separate HTML document.
User actions cause browser requests for new pages.
Server responds with complete HTML pages.
This causes full page reloads and resets app state.
Simple but can be slower than single-page apps.

Full Transcript

Multi-page app architecture means the app shows one full page at a time. When the user opens the app, the browser asks the server for the homepage. The server sends the full homepage HTML. When the user clicks a link, the browser requests the new page from the server. The server sends the full new page HTML. This repeats for each page the user visits. Each page load resets the app state because the browser loads a new document. This is simple but can feel slower because the whole page reloads every time.

Practice

1. What is a key characteristic of a multi-page app architecture?

easy

A. Each page is a separate file loaded individually

B. All content loads on a single page without refresh

C. Pages are created dynamically using JavaScript only

D. Navigation happens without changing the URL

Solution

1. Step 1: Understand multi-page app structure

   Multi-page apps have separate files for each page, so each page loads individually.

2. Step 2: Compare options with definition

   Only Each page is a separate file loaded individually matches this description; others describe single-page apps or dynamic loading.

3. Final Answer:

   Each page is a separate file loaded individually -> Option A

4. Quick Check:

   Multi-page app = separate files per page [OK]

Hint: Remember: multi-page apps load new files per page [OK]

Common Mistakes:

• Confusing multi-page with single-page apps
• Thinking navigation happens without page reload
• Assuming all content is on one file

2. Which HTML element is commonly used to navigate between pages in a multi-page app?

easy

A. <div>

B. <button>

C. <a>

D. <span>

Solution

1. Step 1: Identify navigation element in HTML

   The <a> tag creates links that users click to load new pages.

2. Step 2: Check other options

   <button> triggers actions but not page navigation by default; <div> and <span> are containers without navigation behavior.

3. Final Answer:

   <a> -> Option C

4. Quick Check:

   Links use <a> tags [OK]

Hint: Use <a> tags for page links in multi-page apps [OK]

Common Mistakes:

• Using <button> instead of <a> for navigation
• Confusing container tags with navigation elements
• Not understanding default link behavior

3. Consider a multi-page app where clicking a link loads a new page file. What happens to the browser URL when navigating?

medium

A. The URL stays the same

B. The URL changes to the new page's address

C. The URL disappears

D. The URL shows a popup message

Solution

1. Step 1: Understand navigation in multi-page apps

   When a new page loads, the browser updates the URL to match the new page's file address.

2. Step 2: Evaluate other options

   URL does not stay the same or disappear; it also does not show popup messages.

3. Final Answer:

   The URL changes to the new page's address -> Option B

4. Quick Check:

   New page loads update URL [OK]

Hint: New page load updates URL in browser [OK]

Common Mistakes:

• Thinking URL stays static in multi-page apps
• Confusing with single-page app behavior
• Assuming URL disappears or hides

4. You created a multi-page app but clicking links does not load new pages. What is a likely cause?

medium

A. The link's href attribute is missing or empty

B. The pages are all in separate files

C. The browser does not support HTML

D. The app uses multiple files for pages

Solution

1. Step 1: Check link setup

   If the <a> tag's href attribute is missing or empty, clicking it won't load a new page.

2. Step 2: Review other options

   Having separate files or multiple files is normal; browser support for HTML is standard; these do not cause links to fail.

3. Final Answer:

   The link's href attribute is missing or empty -> Option A

4. Quick Check:

   Missing href means no navigation [OK]

Hint: Always set href in <a> tags for navigation [OK]

Common Mistakes:

• Ignoring missing href attribute
• Blaming file structure instead of link syntax
• Assuming browser lacks HTML support

5. You want to build a multi-page app that loads a homepage, about page, and contact page. Which approach best fits this architecture?

hard

A. Use a single file and update content dynamically without page reload

B. Load all pages content in one file and show/hide sections with JavaScript

C. Use only one page and rely on popups for other content

D. Create separate HTML files for each page and link them with <a> tags

Solution

1. Step 1: Define multi-page app structure

   Multi-page apps have separate files for each page, so creating separate HTML files fits this model.

2. Step 2: Compare other options

   The other options describe single-page app or popup approaches, not multi-page architecture.

3. Final Answer:

   Create separate HTML files for each page and link them with <a> tags -> Option D

4. Quick Check:

   Separate files + links = multi-page app [OK]

Hint: Separate files + <a> links = multi-page app [OK]

Common Mistakes:

• Mixing single-page app methods with multi-page apps
• Using JavaScript to hide/show instead of separate pages
• Relying on popups instead of page navigation