ℹ️ In this article, we refer to the updated standard published site infrastructure as the "new infrastructure," and the standard published site infrastructure from before June 11, 2026 as the "previous infrastructure."
About 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 setup is designed to improve page load speed, stability, and SEO performance.
For projects created on or after June 11, 2026, this new published site infrastructure (the "new infrastructure") is the default.
Projects created before June 11, 2026 will continue to be published on the previous infrastructure until you manually switch over. Studio.Design does not currently force-switch projects to the new infrastructure.
Future new features and improvements will be built on the new infrastructure. Review the differences in specifications and consider switching to the new infrastructure as needed.
💡 For instructions on switching to the new infrastructure, see Switching your published site infrastructure from the previous to the new one.
💡 If you want to improve the loading speed of your published site, also check out the articles below.
Differences between the new and previous infrastructure
Here we explain the characteristics and structural differences between the previous and new published site infrastructure.
Note: Behavior changes when switching to the new infrastructure
Implementations that rely on the previous infrastructure's page transitions or JavaScript execution may behave differently on the new infrastructure.
Aspect | New infrastructure | Previous infrastructure |
Page structure | MPA built from multiple HTML files | SPA based on a single HTML file |
Where HTML is generated | Rendered on the server (SSR) | Generated in the browser (CSR) |
Delivery method | Pre-generated HTML delivered via CDN | After the first load, updates happen inside the browser |
Strengths | Better performance on first load and return visits, plus advantages for SEO and AEO | Lightweight screen transitions when navigating within the site |
How the new infrastructure works and its key features
The new infrastructure publishes your site using a combination of MPA, SSR, and caching.
MPA (Multi Page Application):
A setup that uses multiple HTML pages. When you navigate between pages, the browser fetches a new HTML file from the server and reloads.
SSR (Server Side Rendering):
HTML is rendered on the server, and the fully built HTML is returned to the browser.
Caching (CDN cache):
HTML generated by SSR is cached on a CDN. From the second visit onward, the browser fetches the cached HTML, making repeat visits to the same page much faster.
The new infrastructure includes text and meta information in the HTML output. This improves page load speed and display stability, and it's also beneficial from an SEO and AEO perspective.
In addition, delivering pre-generated HTML from the CDN cache speeds up responses on return visits. Even high-traffic sites can maintain stable performance.
When the new infrastructure generates cache
On the new infrastructure, HTML for key pages is pre-generated and cached on the CDN whenever you publish or update your site. This helps your pages load quickly even on the first visit.
The cache is regenerated at the following main times:
Triggered by user actions
When you publish or update your site
When you publish, update, or delete content in Studio.Design CMS
Triggered by Studio.Design
When system updates related to published sites are released
Content not included in pre-generated cache
The following content is not pre-generated in the cache.
Since HTML is generated on the first visit, the display may be temporarily slower at that moment. From the second visit onward, it's delivered quickly from the generated cache.
Data fetched after clicking the [Load more] button in dynamic lists
Content that isn't cached
The following content isn't cached.
Since the latest data is fetched on every visit, the timing of its display may differ from the rest of the page.
External data fetched through Data Connect API (reflected in dynamic pages, dynamic modals, and dynamic lists)
Content filtered using URL queries
Search results on a search page
How the previous infrastructure works and its key features
The previous infrastructure combines SPA (Single Page Application) and CSR (Client Side Rendering). Once the site has loaded, switching between screens is lightweight, making it well-suited for interactive experiences across multiple pages within a site.
Here are the details of SPA and CSR:
SPA (Single Page Application):
A setup that starts from a single HTML file and uses JavaScript to dynamically swap content within the page, making transitions feel seamless.
CSR (Client Side Rendering):
JavaScript in the browser assembles the HTML and draws it on the screen.
Areas most likely to be affected by the switch
Here we summarize the areas you should review before switching to the new infrastructure. For specific specification changes, see the main spec changes for the new infrastructure below.
Impact on SEO and AEO
On the new infrastructure, HTML is delivered with the page content and meta information already included. This makes it easier for search engines to understand your page's structure and content, which is beneficial for SEO.
Some AI tools can also more easily reference text that's available as HTML, which is also expected to benefit AEO (AI Engine Optimization).
That said, you still need to properly set SEO-related items like titles, descriptions, heading structures, and alternative 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 to track analytics on your own, virtual pageviews or History Change triggers that were set up for the previous infrastructure may no longer be needed, or could cause duplicate tracking.
Be sure to review your setup before switching.
Custom code and external scripts
Implementations that depend on page transitions or JavaScript re-execution from the previous infrastructure may behave differently on the new infrastructure.
If you're embedding external scripts using an Embed box or using custom code, make sure everything works as intended, including after page transitions.
Main spec changes on the new infrastructure
There are differences in behavior and specifications between the previous and new infrastructure. Here we summarize the main changes most likely to affect your site. For details on each item and workarounds, see the explanations following the table.
Affected feature | Conditions/prerequisites | What happens |
(1) URL query filter + toggle box | Filtering using a URL query filter | Toggle state, open/closed state, focus, and scroll position reset every time |
(2) Carousel | Clicking the "Previous" or "Next" buttons in rapid succession | The animation when reaching the last slide may look different from the previous infrastructure |
(3) API integration (Beta) | Showing data fetched via the previous "API integration (Beta)" | On the new infrastructure, the fetched data won't be output on the page |
(4) Image box (Box mode) | Displaying a GIF using Box mode in an image box | The GIF may not replay on page reload |
(5) Modal + anchor link | Clicking an anchor link inside a modal while it's open | The modal may close at the same time as the page scrolls to the linked location |
(6) Site title and social cover in site settings | Site title or social cover is left unset in site settings | They are output as blank (unset) |
(7) Form part placeholders | Using certain TypeSquare fonts | The font may not be applied to placeholder text |
(8) Fixed position + anchor link | An anchor link is placed inside a box with its position set to fixed | The anchor link won't work |
(1) 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 filter, resetting the toggle's open/closed 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 box.
(2) Carousel "Previous/Next" animation looks different when clicked rapidly
Because the carousel responds immediately to repeated clicks, the animation to the final slide may start partway through the previous transition.
(3) Data fetched via API integration (Beta) isn't output on the page
On the new infrastructure, displaying data fetched through the previous "API integration (Beta)" is not supported. After switching to the new infrastructure, if a list is connected to data fetched via this feature, that data won't appear on the page.
Tip: Data fetched via API integration (Beta) is marked with a [Beta] tag in the data list.
Workaround: Consider switching to the official version of API integration (Beta), the Data Connect API, for fetching data. (Requires a Business plan or higher.)
(4) Image box Box mode: animated GIFs may not play depending on the viewing environment
If you're displaying an animated GIF in an image box's Box mode, the animation may not play from the beginning when the page reloads, depending on the viewing environment.
(5) Modal closes when clicking an anchor link inside it
When a modal is open, clicking an anchor link inside it may close the modal at the same time the page scrolls to the link's destination.
This behavior depends on the type of anchor link.
Link format | Example | Modal behavior |
Relative anchor |
| Stays open |
Page link |
| Closes |
Workarounds:
Consider revising your structure, for example, by placing content directly on the page instead of in a modal.
Consider using a script in custom code (end of Body) to control the behavior. (Requires a paid plan.)
(6) Site settings: display when site title or social cover is unset
If site title and social cover are left unset in site settings, they will be output as blank (unset). (On the previous infrastructure, the project name and cover image from project settings were used when these were unset, so they were never output as blank.)
Workaround: Set your site's meta information properly in site settings.
(7) Form parts: some TypeSquare fonts aren't applied to placeholders
Some TypeSquare fonts may not be applied to placeholder text in form parts.
Workaround: Since this depends on TypeSquare's own specifications and compatibility, for now consider replacing it with another font. (We may revisit support for this in the future.)
(8) Anchor links inside boxes with fixed position don't work
Anchor links placed inside a box with its position set to fixed won't work on the new infrastructure. If your "↑Pagetop" link applies to this case, you'll need to update its setting.
Workaround: For example, consider one of the following:
Move the anchor link's ID to a non-fixed element, such as a Base box.
As long as the ID "top" isn't already used elsewhere on the page, change the link setting to "#top".