Guide: Javascript/React - SSR & Performance
Description
👉 This guide is part of the Javascript/React Guides. Please follow the order:
- Fundamentals
- SPAs
- SSR & Performance
As you just experienced, React is a great tool to create dynamic applications. But there will be times when we want to use its power along with statically generated pages, for performance and SEO reasons, for example. This process is called Server-Side Rendering (SSR), and there are many tools that help you accomplish this task.
In this Guide you will explore Gatsby, a static page generator for React. Gatsby uses a data layer heavily connected to GraphQL, an up-and-coming technology for data querying, so you'll also learn about that.
After this, you will go through Progressive Web Apps topics and general performance enhancement techniques.
Knowledge
- Understand what is Server-Side Rendering
- Understand what is GraphQL
- Understand what is a Progressive Web App (PWA)
Skills
- Be able to create a static site with React
- Be able to use GraphQL to query data
- Be able to create a Progresssive Web App
- Be able to run performance checks and act on the results
Topics
- Gatsby, GraphQL & Apollo
- PWAs / Background jobs & Service Workers
- Google Lighthouse (or similar)
Action Points
- Study about GatsbyJS
- Create a Gastby demo
- Connect the Gatsby demo to an external data source
- Try Apollo (or similar) to create requests to the API you are using to fetch data
- Transform your Gatsby app into a Progressive Web App
- Make performance audits with Google Lighthouse (or similar)
Deliverable: Gatsby application
- Submit:
- Glitch Project URL or Github Repository + Github Pages URLs
- Project description and details in the README.md file
- Minimum requirements:
- Create a Gatsby website using data from an external resource
- Make use of the in-built GraphQL data layer
- Make sure the application is a PWA (Gatbsy provides support)
- Provide a Google Lighthouse (or similar) audit summary (PDF) and a list of next steps to improve the application’s performance and/or accessibility
- Theme ideas:
- Private books/movies library with search
- Portfolio website