There’s still some controversy over the exact meanings of these terms and the relationship between them, but many people use them interchangeably. The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like iconv-lite, which provides transform streams for transcoding text.
Hydration refers to browser Javascript initializing and attaching event listeners to the HTML sent by the server. There are several variants, including progressive rehydration and partial rehydration. The HTTP Response body sent from the web server to the browser must be streamed, byte by byte, in order to maximize performance.
ssr 节点 地址 specifically refers to front-end frameworks that support running the same application in Node.js, pre-rendering it to HTML, and finally hydrating it on the client. If you are looking for integration with traditional server-side frameworks, check out the Backend Integration guide instead. It is also possible to implement the fetching of HTML content and HTTP headers from micro frontends using HTTP requests. In this setup, each micro frontend must run as a deployed web server.
This setup, while perhaps less ideal for copy-and-pasting, should allow us to discuss issues and their solutions as they happen. The problem is that despite Google’s foggy claims, many machines can’t or aren’t willing to run JavaScript, affecting heavily our ability to move markup and content creation to the client. Indeed, mobile devices get more powerful seemingly every day. They also run an ever increasing number of demanding applications, all of which consume RAM, CPU and battery.
SSR apps offer faster initial load times and better SEO performance compared to client-side rendered apps, there are some downsides. First, every request leads to a new page being re-rendered from the server to the browser. This means all the scripts, styles, and templates will be reloaded on the browser each time a request is sent to the server, resulting in a poor user experience. The method of fetching the headers and HTML content can vary, since single-spa-layout allows for any arbitrary, custom method of fetching. However, in practice, there are two popular approaches, which are described below. We generally recommend dynamic module loading as the primary method, since it requires less infrastructure to set up and has arguably better performance.
We’re going to go through a simple, but limited, implementation of server-side rendering just to get you an idea on how it works. If you’re starting a new project and are serious about performance and SEO you should definately look into SSR. I’d recommend using one of the React frameworks tailored for SSR if they fit your needs.
In the context of single page applications , server-side rendering refers to dynamic generation of the HTML page that is sent from web server to browser. In a single page application, the server only generates the very first page that the user requests, leaving all subsequent pages to be rendered by the browser. This setup is enough for a simple example, but falls down pretty quickly with a more complext app. For example, it has no support for routing, which means we would render the same HTML no matter which URL the user is loading.
There are a number of things you need to pay attention to when writing universal code, as we will discuss below. The API routes are all served by Next.js, which packs an internal server similar to connect and Express. It makes sense to migrate them over to the Fastify server, where they can benefit from fast serialization and also validation when needed. Note that it also required the route component to be wrapped in an element with the suppressHydrationWarning attribute. At this stage, this application is better off delegating rendering to the browser for scaling.
For example, with a typical PHP or WordPress site, the page is loaded from content that is coming via HTTP, which was rendered on the server and comes as fully rendered HTML. // If something errored before we started streaming, we set the error code appropriately. Before Vite 2.7, this was informed to plugin hooks with a positional ssr param instead of using the options object.
Such simplicity and ubiquity, however, are what possibly became the undoing of the static page – the sea of information became too hard to navigate, identify and sift through. The demand for personalized, dynamic and up-to-date content grew together with the web. These patterns are often established through a different look at the mainstream techniques, a paradigm shift, convergence with an external concept, or just a better implementation. If you need to specify that you want to import a resource only on the client-side, you need to use the process.client variable.