Is there only 1 HTML page (index.html) on a Single Page Application website?-CodePudding

I am new to web development with minimal experience in HTML/CSS and some JavaScript. I recently started looking into the front-end framework Vue.js and was confused about the Single Page Application concept.

While browsing the Vue.js documentation website, I noticed that every time I click on a different documentation guide link (see below) they all seem to have different HTML pages in the URL.

For instance, the 'Installation' has the URL https://v1.vuejs.org/guide/installation.html and 'List Rendering' has the URL https://v1.vuejs.org/guide/list.html. They both seem to have different HTML pages as seen from the URL, but shouldn't there only be 1 HTML page on a SPA website?

https://v1.vuejs.org/guide/installation.html
https://v1.vuejs.org/guide/list.html

CodePudding user response：

Yes, technically there is only 1 HTML page - the index.html. Vue generates so-called single-page applications. Vue has a router that, roughly speaking, simulates subpages by manipulating the URL. The content of www.example.com/about/us is still displayed via the index.html. Under the hood, of course, it's much more complex.

However, other Vue frameworks such as Nuxt can also generate static pages in the build process (not in "realtime") to improve SEO. These in turn are "real" HTML pages.

CodePudding user response：

Early SPAs tended to have a single index.html file which contained a skeleton HTML document and then populated it (using client-side JS) with content based on the URL.

Modern approaches prefer to have each different URL serve up a useful HTML document and then use JavaScript to change it as the user navigates through the app.

This tends to render content on the user's screen faster (as the content is just there and doesn't need to be fetched as a second step with JS), is better food for search engines, and works even if the JS fails for some reason.

There are two general approaches for this:

Sever side rendering (in which server side code generates the HTML, typically using the same code as would run in the browser). This approach is most useful for content that is updated frequently (e.g. with a CMS).
Static rendering (in which the HTML documents are generated at build time before the app is deployed. This approach is useful for deploying to servers which doesn't support server side programming (e.g. Amazon S3 or Github Pages) so is good for the budget.

Both these approaches are supported by Nuxt (which uses Vue) and Next.js & Gatsby (which use React).

Note that server-side rendering gives you multiple URLs that serve up different HTML documents, while static rendering gives you multiple HTML files.

CodePudding user response：

Different url route doesn't mean different files. Single page application means you can navigate through all the pages without refreshing the website. It just renders different views according to user preference. YouTube is a fine example of single page application.

Index.html in single page apps are generated from index.js in such cases which further get associated with different routes and components. Technically, there is a single html page: index.html

CodePudding user response：

Technically, a SPA is not complicated and is actually a very simple concept. Javascript takes over the rendering of a certain section of the DOM and the manipulation of the browser history and modfication of the url. So that the end user has the feeling that he is always loading new HTML pages as usual. But this is not the case, because technically the user is only on one HTML page. In most cases index.html.

Of course, with a framework like VueJs or AngularJS, there is much more going on in the backround. So it is also about the concept of webcomponents. Reusability of elements etc.

Here is a short js example to briefly introduce the simple concept. A specific area in the HTML is selected. This is then re-injected by javascript with every action.

const app = document.querySelector('div');
const as = document.querySelectorAll('a');

as.forEach(a => {
  a.addEventListener('click', (e) => {
    app.innerHTML = a.innerHTML
  })
})

div {
  height: 100vh;
  text-align: center;
  font-size: 50px;
  margin-top: 15%;
}

<a href="#index">INDEX</a>
<a href="#contact">Contact</a>

<div>
  INDEX
</div>