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...