# 简介
在单页面应用程序（SPA）的上下文中，服务器端呈现（SSR）是指从Web服务器发送到浏览器的HTML页面的动态生成。在单页面应用程序中，服务器仅生成用户请求的第一页，而所有后续页面都将由浏览器呈现。
为了完成SPA的服务器端渲染，在NodeJS中执行javascript代码以生成初始HTML。在浏览器中，在“添加（注水）”过程中执行相同的javascript代码，该过程将事件侦听器附加到HTML。大多数流行的UI框架（Vue，React，Angular等）都可以在NodeJS和浏览器中执行，并提供API来生成服务器HTML并在浏览器中进行混合。此外，还有一些流行的框架（如NextJS和Nuxt）可简化开发人员对服务器端呈现的体验。
在微前端的上下文中，服务器端渲染是指从多个单独的微前端组装HTML。每个微前端控制从Web服务器发送到浏览器的HTML片段，并在浏览器中初始化它们后将其片段合并。
# 目的
服务器端渲染的主要目的是提高性能。服务器渲染的页面通常比静态页面更快地向用户显示其内容，因为在初始化javascript资源之前向用户显示了内容。SSR的其他原因包括改进的搜索引擎优化（SEO）。
服务器渲染的应用程序通常更难构建和维护，因为代码必须同时在客户端和服务器上运行。此外，SSR通常会使运行您的应用程序所需的基础架构复杂化，因为许多SPA + SSR解决方案都需要NodeJS，而纯客户端SPA的生产中并不需要NodeJS。
# 示例
在 isomorphic-microfrontends 例子显示React服务器呈现的微前端。您可以在isomorphic.microfrontends.app上查看代码的实时演示。
# 实施概述
服务器端呈现的最终目标是生成HTTP响应，当javascript运行时，浏览器将向用户显示该响应。大多数微前端服务器端渲染实现（包括single-spa推荐的方法）都是通过以下步骤实现的：
- 布局-标识要为传入的HTTP请求呈现的微前端，以及将它们放置在HTML中的位置。这通常是基于路由的。
- fetch-开始将每个微前端的HTML呈现到流中。
- headers -从每个微前端检索HTTP响应标头。将它们合并在一起，然后将结果作为HTTP响应标头发送到浏览器。
- body-将HTTP响应正文发送到浏览器，该浏览器是由静态和动态部分组成的HTML文档。这涉及等待每个微前端的流结束，然后再继续进行HTML的下一部分。
- 添加（注水）-在浏览器中，下载所有需要的JavaScript，然后添加（注水）HTML。
# 1.布局
要定义用于布局页面的HTML模板，请首先选择“微前端布局中间件”：
- single-spa-layout：单spa的官方布局引擎。
- Tailor：一种流行的，经过测试的布局引擎，早于 single-spa-layout ，并且未正式与 single-spa 关联。
- TailorX：一个主动维护的Tailor分支，Namecheap在其 single-spa 网站中使用它。在编写 single-spa-layout 时，single-spa 核心团队与TailorX的创建者合作，从中汲取了一些灵感。
我们通常建议使用 single-spa-layout，尽管选择其他选项之一可能会适合您的情况，因为单spa布局较新且使用量少于Tailor / TailorX。
使用 single-spa-layout，您可以定义一个处理所有路由的模板。完整的文档。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Isomorphic Microfrontends</title>
<
