Server-Rendered Microfrontends

Most JavaScript frameworks, including React, are primarily used to build client-side-rendered (CSR) applications. Client-rendered apps are great for certain use cases, such as admin dashboards or banking apps where users interact with the app in a logged-in area. CSR apps are not ideal for use cases where users access a site via a search engine or for anonymous short user journeys, such as news sites, blogs, or guest checkouts on e-commerce sites. This is because many search engine bots are not capable of indexing CSR-based web apps. CSR apps also have a poor Largest Contentful Paint (LCP) score – that is, their first-time page load performance scores are bad, leading to higher bounce rates.

To overcome these drawbacks, it is now an accepted practice to have a web app’s pages rendered on a Node.js server and serve the rendered HTML pages to the browser. This is commonly known as Server-Side Rendering (SSR), or a Server-Side-Rendered ...

Technical requirements

As we go through the code examples in this chapter, we will need the following:

• A PC, Mac, or Linux desktop/laptop with at least 8 GB of RAM (16 GB is preferred)
• An Intel chipset i5+ or a Mac M1 + chipset
• At least 256 GB of free hard disk storage
• A basic understanding of Next.js and Turborepo would be ideal
• A basic understanding of Node.js would be helpful

You will also need the following software installed on your computer.

• Node.js version 18+ (use nvm to manage different versions of Node.js if you have to).
• Terminal: iTerm2 with OhMyZsh (you will thank me later).
• IDE: We strongly recommend VS Code, as we will make use of some of the plugins that come with it for an improved developer experience.
• NPM, Yarn, or PNPM; we recommend PNPM because it’s fast and storage-efficient.
• Browser: Chrome, Microsoft Edge, or Firefox.

The code files for this chapter can be found here: https://github.com/PacktPublishing...

How do Client Rendered and Server Rendered Apps differ?

When it comes to building web apps with JavaScript, there are two primary methods in terms of how a user interface gets built and served to the user. They are referred to as Client-Side-Rendered (CSR) and Server-Side-Rendered (SSR).

From a development standpoint, coding a CSR or an SSR app predominantly remains the same, except for some additional steps for SSR. However, there are differences in the internal working of these apps in terms of how they are rendered, and also in how they can be deployed on the cloud.

In this section, we will look a bit deeper into these differences.

Client Side Rendered Apps (CSR)

Let us have a look at how a Client Side app works. As its full name suggests, the CSR app is “rendered” on the client. In short, the app runs within the user’s browser, makes a call to fetch data, and the page is generated on the browser. The following diagram illustrates this better:

...

Building out our Server Rendered Microfrontend

In this section, we will look at how to build SSR apps using a meta framework such as Next.js, and then we will take it further to build a module-federated microfrontend using webpack’s module federation plugin. While doing so, we will explore another monorepo tool called Turborepo.

Important Note

At the time of writing this book the Module Federation Plugin doesn’t support Next.js 13 and the App Router and hence for this chapter we will use Next.js version 12

When it comes to building an SSR app in React, there are two common approaches:

• A custom build using Node.js: Here, we set up a Node.js server, render the React app on Node.js, stringify the response using the renderToString or renderToPipeableStream methods, and then use the hydrateRoot method, which are all part of the react-dom/server module to attach React to the rendered HTML
• Use an SSR meta-framework: Meta-frameworks such as Next.js, Remix...

Summary

We’ve come to the end of this chapter, where we learned about the differences between Client side rendered and server side rendered apps, and which one is suitable for which type of application. We looked at the various options to build an SSR app and zeroed in on Next.js and Turborepo to build out our module-federated app. We then saw how to set up module federation using the next.js-mf plugin, and we went about setting up our remote and host apps. Finally, we saw how to import these modules dynamically into the host app and set up routing between the different apps.

As a stretch goal for this chapter, you can explore setting up a shared state management solution or a shared component library, following the same approach we took in Chapter 5.

In the next chapter, we will learn how to go about deploying our apps to the cloud. See you on the other side!