ℹ️ In this article, the new standard published site infrastructure introduced after the platform overhaul is referred to as the "new infrastructure," and the standard published site infrastructure used before June 11, 2026 is referred to as the "legacy infrastructure."
Overview of the new infrastructure
As of June 11, 2026, Studio.Design's published site infrastructure has been redesigned to return fully rendered HTML from the server. This new infrastructure is designed to make it easier to achieve better page load speeds, stability, and SEO performance.
For projects created on or after June 11, 2026, this published site infrastructure (the new infrastructure) is the standard.
Projects created before June 11, 2026 will continue to be published on the legacy infrastructure until you manually switch them over. Studio.Design will not force a switch to the new infrastructure at this time.
New features and improvements going forward will be built on the new infrastructure. We recommend reviewing the differences in specifications and considering switching to the new infrastructure as needed.
💡 For instructions on how to switch to the new published site infrastructure, see Switching the published site infrastructure from legacy to new.
💡 If you'd like to improve the display speed of your published site, see also the following articles.
Differences between the new and legacy infrastructure
Here's an overview of the characteristics and structural differences between the legacy and new published site infrastructure.
Note: Behavioral differences when switching to the new infrastructure
Implementations that rely on the page transitions or JavaScript execution patterns of the legacy infrastructure may behave differently on the new infrastructure.
Aspect | New infrastructure | Legacy infrastructure |
Page structure | MPA composed of multiple HTML files | SPA built around a single HTML file |
Where HTML is generated | Rendered on the server (SSR) | Generated in the browser (CSR) |
Delivery method | Pre-generated HTML delivered from a CDN | Updated within the browser after the initial load |
Characteristics | Better display speed on initial and repeat visits, and stronger SEO/AEO performance | Lightweight screen transitions when navigating within the site |
How the new infrastructure works and its strengths
The new infrastructure publishes sites using a combination of MPA, SSR, and caching.
MPA (Multi Page Application):
The site is composed of multiple HTML pages. Each page transition fetches new HTML from the server and reloads the page.
SSR (Server Side Rendering):
HTML is rendered on the server, and the completed HTML is returned to the browser.
Caching (CDN cache):
HTML generated by SSR is cached on the CDN. On subsequent visits, the cached HTML is accessed, so revisiting the same page displays faster.
The new infrastructure outputs HTML that already includes text and meta information. This improves page load speed and display stability. It's also advantageous from an SEO and AEO standpoint.
In addition, by serving pre-generated HTML from the CDN cache, response times for repeat visits are faster. Even sites with high traffic can maintain stable display performance.
When the cache is generated on the new infrastructure
On the new infrastructure, HTML for major pages is generated in advance and cached on the CDN when the site is published or updated. This helps pages display quickly from the very first visit.
The cache is regenerated mainly at the following times:
Triggered by user actions
When you publish or update the site
When Studio.Design CMS content is published, updated, or deleted
Triggered by Studio.Design
When a system update related to the published site is rolled out
Content excluded from pre-generated caching
The following content is not included in pre-generated caching.
Because the HTML is generated on the first visit, the initial display may be temporarily slower. On subsequent visits, the content is delivered quickly from the generated cache.
Data fetched after clicking the Dynamic List [Load More] button
Content that is not cached
The following content is not cached.
Because the latest data is fetched on each visit, the display timing may differ from the rest of the page.
External data fetched via Data Connect API (reflected in dynamic pages, dynamic modals, and dynamic lists)
Content filtered by URL queries
Results from search pages
How the legacy infrastructure works and its strengths
The legacy infrastructure combines SPA (Single Page Application) and CSR (Client Side Rendering). Once the initial load is complete, screen transitions are lightweight, making it well-suited for interactive experiences even when navigating across multiple pages within the site.
Here's more detail on SPA and CSR:
SPA (Single Page Application):
Built around a single HTML file, the page content is dynamically swapped using JavaScript, making screen transitions appear seamless.
CSR (Client Side Rendering):
JavaScript in the browser assembles the HTML and renders it on screen.
Areas most likely to be affected when switching infrastructure
This section outlines areas you should review before switching to the new infrastructure. For specific specification changes, see the main specification changes on the new infrastructure below.
Impact on SEO and AEO
On the new infrastructure, HTML that already includes page content and meta information is delivered. This makes it easier for search engines to understand page structure and content, which is a plus for SEO.
Some AI tools can also more easily reference text retrieved as HTML, which is expected to benefit AEO (AI Engine Optimization) as well.
That said, you'll still need to properly set up SEO-related elements such as titles, descriptions, heading structure, and alt text.
Google Analytics and GTM
If you've set up Google Analytics through Studio.Design's Apps integration, it should generally continue to work as is.
However, if you're using Google Tag Manager or custom code for your own tracking setup, virtual pageviews or History Change triggers that were set up for the legacy infrastructure may become unnecessary or may cause double counting.
Review your settings before switching.
Custom code and external scripts
Implementations that rely on the legacy infrastructure's page transitions or JavaScript re-execution may behave differently on the new infrastructure.
If you're embedding external scripts using the Embed box or using custom code, make sure they work as intended, including after page transitions.
Main specification changes on the new infrastructure
There are differences in behavior and specifications between the legacy and new infrastructure. This section summarizes the main changes most likely to affect your site. For details and workarounds for each item, see the sections below.
Affected feature | Conditions / prerequisites | What happens |
When filtering with the URL query filter | Toggle state, open/close state, focus, and scroll position are reset every time | |
When clicking "Previous" or "Next" buttons rapidly in succession | The animation to the final slide may look different from the legacy infrastructure | |
API integration (Beta) | When displaying data fetched via the old "API integration (Beta)" | Fetched data is not output on the page in the new infrastructure |
When displaying a GIF in Box mode | GIFs may not play on reload | |
When clicking an anchor link inside a modal while the modal is open | The modal may close at the same time as scrolling to the link destination | |
Site title and social cover in Site settings | When site title or social cover is not set in Site settings | The project name and project cover image are output instead of being left blank |
Placeholder text on Form parts | When using certain TypeSquare fonts | The font may not be applied to placeholder text |
When placing an anchor link inside a box with a fixed position | The anchor link doesn't work |
URL query filter: Toggle state resets when filtering
If you've placed a URL query filter UI inside a toggle box, the entire page reloads each time you apply a filter, which resets the toggle's open/close state, focus, and scroll position. (Filter results themselves, such as AND conditions, are still applied correctly.)
Workaround: Consider placing the filter UI directly outside the toggle.
Carousel: Transition animation looks different when "Previous/Next" is clicked rapidly
To respond instantly to repeated clicks, the animation to the last slide begins from a midpoint of the previous transition.
Data fetched via API integration (Beta) is not output on the page
The new infrastructure does not support displaying data fetched via the old "API integration (Beta)." After switching to the new infrastructure, data retrieved using that feature will not be output on the page.
Workaround: Consider switching to the official version of the API integration feature, Data Connect API, for fetching data. (Requires a Business plan or higher.)
Image box Box mode: Animated GIFs may not play depending on the viewing environment
If you're displaying an animated GIF in the image box Box mode, the animation may not play from the start when the page is reloaded, depending on the viewing environment.
Modal closes when an anchor link is clicked while the modal is open
While a modal is open, clicking an anchor link inside the modal may cause the modal to close at the same time as scrolling to the link destination.
This behavior depends on the anchor link format.
Link format | Example | Modal behavior |
Relative anchor |
| Does not close |
Page link |
| Closes |
Workarounds:
Consider restructuring your layout, such as placing the content on the main page instead of inside a modal.
Consider controlling the behavior using a script in the custom code (end of Body). (Requires a paid plan.)
Site settings: Display when site title or social cover isn't set
If the site title or social cover isn't set in Site settings, the output will be left blank (unset). (On the legacy infrastructure, the project name and cover image from Project settings are used when these fields aren't set, so they're never output as blank.)
Workaround: Set the site's meta information properly in Site settings.
Form parts: Some TypeSquare fonts are not applied to placeholders
Some TypeSquare fonts may not be applied to placeholder text in form parts.
Workaround: Since this depends on TypeSquare's specifications and compatibility, for now consider switching to a different font. (We may address this in the future.)
Anchor links inside boxes with a fixed position don't work
Anchor links placed inside boxes with a fixed position setting will not work on the new infrastructure. If this applies to your "↑ Page top" link setup, you'll need to update the settings.
Workaround: For example, consider the following:
Move the anchor link ID to an element that isn't fixed in place, such as a Base box.
If the ID "top" isn't already used on the same page, change the link setting to "#top".