Summary

In this chapter, we first learned how to benchmark web applications using Lighthouse and Chrome DevTools. We also learned about useful metrics for such benchmarks, called Core Web Vitals. Then, we learned about rendering React components on the server and the differences between client-side rendering and server-side rendering. Next, we implemented server-side rendering for our app using Vite and React Router. Then, we implemented server-side data fetching using React Query. We then benchmarked our app again and saw an improvement in the performance of more than 40%. Lastly, we learned about getting our server-side rendering server ready for production and concepts that a more sophisticated server-side rendering framework needs to deal with.

In the next chapter, Chapter 8, Making Sure Customers Find You with Search Engine Optimization, we are going to learn how to make our web app more accessible to search engine crawlers, increasing the SEO score that we saw in the Lighthouse...