Containers

容器是一种将应用程序分解为较小部分的方法。我们称这些部件为容器。容器带来了几个好处。页面上的每个容器可以独立地是：

resumed: Each container can be resumed independently from all other components on the page. Independent resumability further reduces the amount of state which resume deserializes.
updated: Each container can be updated/replaced at any point using innerHTML. This allows a portion of the page to update without forcing a full re-fetch of a complete HTML document without downloading or executing JavaScript.
compiled: Each container can be compiled and deployed separately from other containers. Separate compilation is especially useful for large-scale applications and large-scale teams working on the applications.
versioned: Each container can run a different version of the Qwik framework. Allowing for the composability of the website from many small containers.

容器可以嵌套在树中，并且可以通信和共享数据。组件间通信要求组件有明确的边界，我们称之为容器协议。

Containers vs. Components

容器听起来与组件非常相似。有什么区别？您可以将容器视为更受限制的组件。即，组件可以做一些容器不能做的事情。

容器只能将只读属性传递给它们。此限制是因为容器输入可能需要针对 SSR 请求进行序列化。
容器不理解 projection.
容器不能修改已传递给它们的状态。

Components have restrictions:

Components must be compiled together and, as a result, share the same bundle artifacts and same Qwik version.
On pause, all of the components in the container are serialized together (and then they are resumed together).

What do containers solve?

Containers allow multiple independent Qwik applications to run on the page and behave as a single application to the user. There are two most common use cases:

Routing
Micro-frontend architecture

Routing

一个典型的站点由两个逻辑部分组成：

The navigation that tends to stay constant across many pages.
The outlet, which is the part of the page that changes based on which route the user navigated to.

We can model the two parts as two navigation and outlet containers. When the user first navigates to a route, the server responds with HTML, that contains containers for both the navigation and the outlet. Once the user navigates to the second route, there are three ways to solve the navigation:

The simplistic approach is to make a full round trip and download an entirely new page. The main downside is that the application loses all of its states on the client.
The classical approach is to treat any further navigation in JavaScript. We replace the current outlet component with the new outlet component and let the new component render. The disadvantage is that we need to download and execute the JavaScript.
The Qwik approach treats the navigation and the outlet as two different containers. The first navigation downloads HTML representing the full page (with both containers). The subsequent navigation fetches the HTML only for the outlet container. This approach is the best of both worlds. The navigation is fast (no JavaScript download or execution), and the application keeps its state in the parent container.

微前端 Micro-frontend

当应用程序变得非常大时，将其视为单个应用程序变得不切实际。一个更好的心智模型是许多应用程序协同工作，让用户觉得这是一个应用。

对于大型应用程序，团队也会变大。大型团队通常有不同的目标，因此有不同的发布时间表。

容器允许大型团队将应用程序分解为许多较小的部分，并将每个部分视为一个具有单独部署、测试和版本升级计划的单元。

团队将应用分解为容器，并明确定义容器之间的协议。只要满足协议，每个团队都可以独立部署这两个容器。