This content originally appeared on Bits and Pieces - Medium and was authored by Pavindu Lakshan
Improve user experience and performance in server-side rendering with React suspense
Server-side rendering is increasingly becoming popular among web developers. However, implementing server-side rendering in React applications did not meet the expectations and caused a lousy developer and user experience.
As a result, React included React Suspense in their upcoming React 18 release to improve the performance of server-side rendering in React applications.
This article will discuss what React Suspense is and how developers can take advantage of it to improve their React applications.
Introduction to React Suspense
React Suspense is a React component that pauses (suspends) an element’s rendering unless all the data it requires is available. It assures that data is ready before rendering components and helps avoid loading components with pending data.
Your child component should implement lazy loading via React.Lazy to use React Suspense. You can even specify multiple lazy loading components with a single Suspense component as well.
import React from "react"
import Spinner from "components/Spinner"
const SomeComponent = React.lazy(() => import('components/SomeComponent'));
export default function App(){
return (
<React.Suspense fallback={<Spinner />}>
<SomeComponent />
</React.Suspense>
)
}
As shown above, all you have to do is wrap the component tree with the Suspense component specifying a fallback UI. React then will prioritize rendering based on the availability of the child React components. If some elements are not yet ready, Suspense will continue to show a fallback UI in place of those React components until they are ready.
A Primer on Server-side Rendering
Server-side rendering is a technique where React components are compiled into HTML server-side and sent to clients. So, end-users will not have to wait till the client-side JavaScript is executed and the application is rendered.
Server-side rendering is increasingly becoming popular because it solves some major problems with client-side rendering. When a single page application is rendered on the client-side, the user sees a blank screen until JavaScript is executed and the UI is rendered. The larger the size of the application is, the longer the time it takes to render, causing a bad user experience. Also, search engines can only access JavaScript bundles in client-side rendering. Therefore, they cannot crawl and index the web app, which negatively affects the SEO performance.
In the current method of server-side rendering, the app fetches all data required for the entire application. After data is received, the whole application is compiled to HTML on the server, using the renderToString method. The produced markup is then sent in the response. Finally, the JavaScript is loaded for the entire application on the client-side and connected to the generated HTML.
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './components/app';
module.exports = function render(initialState) {
let content = renderToString(<App />);
return content
};
Challenges in Server-side rendering in React
Server-side rendering in React indeed brings many advantages, but it is not a silver bullet. In the current way of implementing server-side rendering, the whole React application is compiled to HTML and then sent to the client. That is, the application should have all data fetched beforehand.
This process will not cause issues in small projects since the response size is small. But as the application grows, the response size will increase. And, it will take more time to reach and render on the client side.
Though the whole application is compiled and sent to the client, most of the time, the user will only interact with several components. Therefore, it would be faster and more efficient to compile and send those key components first and the rest on-demand.
React Suspense to the rescue
React Suspense can resolve the above problems with server-side rendering in React. Instead of the traditional renderToString method, React 18 introduces renderToPipeableStream, that support React Suspense and lazy loading out-of-the-box.
// express.js route
const express = require("express")
const app = express()
app.get('/', async function(req, res) {
render(res);
});
//render function
import { renderToPipeableStream } from 'react-dom/server';
import DataProvider from "components/DataProvider"
import App from "./App"
const API_DELAY = 2000;
const ABORT_DELAY = 10000;
module.exports = async function render(res) {
let isError = false;
res.socket.on("error", (error) => {
console.error("Error: ", error);
});
const data = await mockServerDataFetching();
const { pipe, abort } = renderToPipeableStream(
<DataProvider data={data}><App /></DataProvider>,
{
// get script names from webpack stats
bootstrapScripts: [assets["main.js"]],
onCompleteShell() {// Set error status code, if an error happened before starting streaming
res.statusCode = isError ? 500 : 200;
res.setHeader("Content-type", "text/html");
pipe(res);
},
onError(error) {
isError = true;
console.error(error);
}
}
);
// Abandon and switch to client rendering if enough time passes.
setTimeout(abort, ABORT_DELAY);
};
// Simulate a delay caused by data fetching.
function mockServerDataFetching() {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, API_DELAY);
});
}
With this new method, the data-ready components will be compiled to HTML on the server-side as usual. Then, they will replace the components with pending data with the fallback element. Finally, when each child component receives the data, it is compiled to HTML and streamed to the client, along with a small JS script to replace the initially rendered fallback element with the new markup content.
React Suspense helps reduce the downloaded bundle size. Because it only contains the compiled React components ready to be rendered and the JavaScript needed for the hydration. Also, it reduces the initial response time as there is no need to wait for the data required for the whole application.
Tip: Build with independent components for speed and scale
Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.
Bit offers a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components.
Give it a try →
Learn More
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- The Composable Enterprise: A Guide
Conclusion
Server-side rendering React applications has become popular since it helps avoid some significant disadvantages with client-side rendering. However, it was not without its challenges due to the inefficiency of how server-side rendering currently works.
React 18 has solved most of these issues with its new Suspense architecture for server-side rendering. In addition, it includes new methods to compile React code to HTML, along with full support for lazy loading and streaming the compiled content on-demand.
I hope this article has helped you better understand the new React Suspense architecture for server-side rendering. Thank you for reading.
Using React Suspense for Better Server-Side Rendering was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Pavindu Lakshan
Pavindu Lakshan | Sciencx (2022-03-10T07:33:33+00:00) Using React Suspense for Better Server-Side Rendering. Retrieved from https://www.scien.cx/2022/03/10/using-react-suspense-for-better-server-side-rendering/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.