Isomorphic Pages - PageAmp/pageamp GitHub Wiki

Much like a traditional server-side technology for the Web, PageAmp handles page requests to generate dynamic HTML. But like a modern reactive framework, it doesn't treat your source pages as text-based templates: it loads them into a virtual DOM and processes their presentation logic there, just like the browser does. Hence the "isomorphic" term.

This behaviour is also called "server-side rendering" in the context of modern reactive frameworks like React. These frameworks were born for the browser, where they can provide a modern user experience. This makes them great for web apps, but ill suited for web sites: search engines don't get complete, indexable pages, because they're designed to be populated dynamically in the client.

With React & co you can mitigate the problem by generating static pages expressly for search engines, or use a server-side rendering technique. But the former is cumbersome, and the latter involves a pretty complex setup. Plus it requires Node.js for hosting, which isn't an option for most projects.

With PageAmp you get the good and are spared the bad of a reactive framework. It was designed from the ground up to support server-side rendering out of the box on a variety of server-side environments.

An example

This source page:

<html>
  <body :count=[[10]] :event-click=[[count++]]>
    Count: [[count]]
  </body>
</html>

generates this output HTML:

<html data-id="0">
  <body data-id="1">
    Count: 10
    <script>...</script>
    <script src="/.pageamp/client/pageamp.js" defer></script>
  </body>
</html>

As you can see:

  1. Logic attributes are removed
  2. Logic expressions are replaced with their values
  3. Some elements are given a data-id attribute
  4. A couple <script> tags are added.

The page is initially processed in the server so the output includes the actual content and is ready for indexing. At the same time, information is added to allow capable clients to pick up logic execution themselves: on click, the text will become "Count: 11" and so on.

⚠️ **GitHub.com Fallback** ⚠️