La meilleure façon d'accélérer un gros projet React en utilisant des "Snapshots" de routes critiques (rendus statiques)

Question

Nous avons une application React traditionnelle, vaste et complexe, que nous construisons depuis deux ans. Elle charge un index.html, injecte du javascript et obtient des données d'une API comme d'habitude. Malheureusement, les temps de chargement à froid sont assez mauvais (5 à 7 secondes en moyenne). Une fois que tout est chargé, c'est rapide comme d'habitude, mais les temps de chargement à froid nous tuent dans certaines pages "critiques". Il s'agit de nos pages utilisateurs publiques, au format : https://mywebsite/userId

Nous cherchons un moyen d'accélérer considérablement les temps de chargement pour ces itinéraires, avec des méthodes qui vont au-delà de la division du code ou de l'optimisation des ressources. Nous le faisons déjà, et nous servons notre application à partir d'un CDN.

Nous avons envisagé de créer des "instantanés" statiques de ces pages utilisateur, que nous devons charger très rapidement en utilisant quelque chose comme react-static, et de les servir en tant que versions statiques pour les hydrater plus tard. Réécrire notre projet en utilisant quelque chose comme next.js ou gatsby n'est pas une option car cela impliquerait trop de travail. SSR n'est pas non plus une option car tout notre backend est codé en Django plutôt qu'en Node.js.

Sommes-nous sur la bonne voie ? Est-il possible / utile d'utiliser react-static (ou un outil similaire) pour faire cela ? Il y a beaucoup de documentation sur la façon de créer des projets react-static à partir de zéro, mais rien sur la façon de convertir un projet existant, même s'il s'agit juste d'un petit sous-ensemble de routes comme nous en avons besoin.

De même, lorsque les données changent sur nos pages utilisateur, comment déclencher une "reconstruction" de l'instantané approprié ? Les utilisateurs ne mettent pas leurs données à jour très souvent, environ 3 ou 4 fois par mois, mais nous avons 3 000 utilisateurs, ce qui fait une moyenne de 15 mises à jour par heure. Pouvons-nous déclencher uniquement une reconstruction des itinéraires qui ont réellement changé ?

Answer 1

Comme vous l'avez dit, vous pouvez utiliser react-static.
Ils ont une fonction qui répond exactement à votre besoin (pages spécifiques à l'utilisateur).

Dans leur exemple, ils utilisent un tableau de messages pour générer un fichier statique spécifique pour chacun d'entre eux.
Le temps de chargement est beaucoup plus court, car il s'agit uniquement de fichiers html statiques.

Imaginez le scénario suivant :

[
  {
    id: 'foo',
    ...
  },   
  {
    id: 'bar',
    ...
  },
  ...
]

En suivant l'exemple ci-dessous, on obtiendrait quelque chose comme ceci (au moment de l'exécution) :

- src
  - pages
    - blog
      - posts
        - foo // Specific post page
        - bar // Specific post page

Examinez l'exemple :

//static.config.js
export default {

  // resolves an array of route objects 
  getRoutes: async () => {

    // this is where you can make requests for data that will be needed for all
    // routes or multiple routes - values returned can then be reused in route objects below

    // ATTENTION: In here, instead of posts you'd fetch your users json data
    const { data: posts } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );

    return [
      // route object
      {
        // React Static looks for files in src/pages (see plugins below) and matches them to path
        path: "/blog",
        // function that returns data for this specific route
        getData: () => ({
          posts
        }),
        // an array of children routes
        // in this case we are mapping through the blog posts from the post variable above
        // and setting a custom route for each one based off their post id
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          // location of template for child route
          template: "src/containers/Post",
          // passing the individual post data needed
          getData: () => ({
            post
          })
        }))
      },
    ];
  },
  // basic template default plugins
  plugins: [
    [
      require.resolve("react-static-plugin-source-filesystem"),
      {
        location: path.resolve("./src/pages")
      }
    ],
    require.resolve("react-static-plugin-reach-router"),
    require.resolve("react-static-plugin-sitemap")
  ]
};

Answer 2

Vous pouvez utiliser un Service Worker. Chargez les pages importantes et rapides en tant que pages statiques, puis en arrière-plan, à l'aide du Service Worker, chargez les ressources plus longues.

Vous pouvez également utiliser un Service Worker pour une mise en cache intelligente. Par exemple, le serveur peut placer un cookie avec la version actuelle de la ressource (fournie avec la première page), et le Service Worker peut comparer cette version à sa propre version de la ressource, et décider s'il faut l'extraire du cache ou l'envoyer au serveur.