Octana Changelog

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

Component update

v5.1 Image gallery

May 17, 2022

• 2 column masonry gallery layout added

• Improved modal UX / UI

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.