Octana Changelog

Content Authoring apps

v2.0 Editor Mode app

June 30, 2022

  • The new Editor Mode allows you to:

    • Direct access to the Page, Page Content and App Layout from any page

    • new Inspect mode to drill down into components

    • preview draft/changed content in the live site

Feature

v1.0 Docs feature

June 17, 2022

  • Ability to create Docs pages with sidebar navigation

Component update

v1.0 Docs feature

June 17, 2022

  • Ability to create Docs pages with sidebar navigation

Component update

v5.1 Image gallery

May 17, 2022

  • 2 column masonry gallery layout added

  • Improved modal UX / UI

Component update

v3.1 Vertical Tab Carousel

Apr 22, 2022

  • UX / UI change - hover states introduced to improve usability. "As a user, I can hover and click on a slide to change the primary content"

  • Icon field added

  • Description field added

  • Tab body field added

  • Learn more accordion UI added

  • Mobile responsiveness improved

Development update

Server-Side Rendering

Jan 21, 2022

When the website is first loaded, the page for the URL that was requested is rendered to HTML on the server. Once the React/Next.js framework is loaded on the client, the page is re-rendered transparently to give it full interactivity and function mostly like a regular React app from then on - this is called hydration.

The first time a page is rendered on a client browser it’s safe to assume that React components have been rendered twice: First on the server-side, then again during hydration on the client-side.

  1. Browser: requests Page by URL

  2. Server (Express): Caching layer determines if the page has already been rendered. If a cached page exists it is returned and the request ends.

  3. Server (Next.js): App component data is initialised

    1. App getInitialProps requests the App Layout from the App Content Handler API

    2. Content Handler: App content entries are fetched from CMS Provider

  4. Server (Next.js): Page component data is initialized

    1. Next.js: Page getInitialProps requests the Page from the Page Content Handler API

    2. Content Handler: Page content entries are fetched from the CMS Provider

    3. Content Handler: Entries collection is sent down the Entry Filter pipeline

    4. Content Handler: Entries collection is pruned and returned to the client

  5. Server (Next.js): App component is rendered

  6. Server (Next.js): Page component is rendered

    1. Next.js: Page content is iterated and CMS Components are rendered as React components.

  7. Server (Express): Caching layer caches the rendered HTML, and returns the HTML to the browser.

  8. Browser: Renders the response.