After deployment page not latest

[newcc845]

Hi All,

I not sure this question be ask before, but the issue I face is after I compile the code and deploy into nginx server. Every time I need to manual refresh the page to get the latest content. I feel is weird.

Normally once hit by the browser it should get the latest and not the previous copy.

I using gatsby 3.12.0

Thank you in advance for the helps.

[kzsa]

You have given too little information.

The browser follows this caching order when requesting resources:

1. service worker cache: the service worker checks if the resource is in its cache and decides whether to return the resource based on its caching strategies (CacheFirst / StaleWhileRevalidate / ... / ...). This is not automatic, you need to create a request event handler in the service worker and accept network requests so that requests are served from the service worker cache and not from the network.
   https://web.dev/offline-cookbook/#serving-suggestions
   https://www.npmjs.com/package/gatsby-plugin-offline

e.g.:

// gatsby-config.js > gatsby-plugin-offline settings

    {
      resolve: `gatsby-plugin-offline`,
      options: {
        workboxConfig: {
          cacheId: `gatsby-plugin-offline`,
          // Don't cache-bust JS or CSS files, and anything in the static directory,
          // since these files have unique URLs and their contents will never change
          dontCacheBustURLsMatching: /(\.js$|\.css$|static\/)/,
          runtimeCaching: [
            {
              urlPattern: /(\.js$|\.css$|static\/)/,
              handler: `StaleWhileRevalidate`,
            },
            {
              urlPattern: /^https?:.*\/page-data\/.*\.json/,
              handler: `StaleWhileRevalidate`,
            },
            {
              urlPattern:
                /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
              handler: `StaleWhileRevalidate`,
            },
            {
              urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
              handler: `StaleWhileRevalidate`,
            },
          ],
          skipWaiting: true,
          clientsClaim: true,
          globPatterns: [`**icon.svg*`],
        },
      },
    },

That's how I ask the user to clear the cache if necessary. (You are not allowed to poke around in the user's browser cache for security reasons. Users can clear their browser's outdated cache. Of course there are more stylish ways to do this, but for the sake of simplicity, I'll show you the simplest way without styling.) :

// gatsby-browser.js

export const onServiceWorkerUpdateReady = () => {
  const answer = window.confirm(
    `Ez az alkalmazás frissítésre került. / Diese Anwendung ist aktualisiert worden. / This application has been updated. / Это приложение было обновлено. / ` +
      `Újratöltés a legújabb verzió megjelenítéséhez? / Reload to display the latest version? / Neu laden, um die neueste Version anzuzeigen? / Перезагрузить для отображения последней версии?`
  );

  if (answer === true) {
    window.location.reload();
  }
};

2. HTTP cache / Browser cache: If the resource is found in the HTTP cache (and has not expired), the browser will automatically use it from the HTTP cache.
   https://web.dev/http-cache/

3. Server-side: If nothing is found locally (in the Service Worker cache / HTTP cache), the browser retrieve the resources from the internet. If the resource is not in the CDN cache, the request goes to the original server.
   https://www.nginx.com/blog/nginx-caching-guide/

Hope this helps you!
Br: Zsolt

https://www.youtube.com/watch?v=ZCVgDKjtgl0&t=13s

[newcc845]

Hi Zsolt,

Apologize, I totally new to this so not sure how should I ask however thank you for your response and let me go thru you message 1st.

Thank you again!

[kzsa]

Hi Zsolt,

Apologize, I totally new to this so not sure how should I ask however thank you for your response and let me go thru you message 1st.

Thank you again!

Hi David,

there is nothing wrong with your question, I was just in a hurry and tried to be short and to the point.
The wrong question is the one you don't ask.
If I sounded harsh, I apologise, English is only the third language I "speak" ( let's just say I'm trying xD ), so I can't always be subtle.
As you see above, the problem you are facing could be due to many things.
If you want a quick and accurate answer to a question, it is inevitable that you share some of the code involved.
As a beginner, it is difficult to determine which part of the code is affected and which part you can safely share.

What you can safely share:

1. from the package.json file:

"dependencies": {
    // from this section you can share everything
    // e.g.:
    ...,
    "gatsby": "^5.6.0",
    "gatsby-plugin-canonical-urls": "^5.6.0",
    "gatsby-plugin-image": "^3.6.0",
    "gatsby-plugin-layout": "^4.6.0",
    "gatsby-plugin-manifest": "^5.6.0",
    "gatsby-plugin-offline": "^6.6.0",
    "gatsby-plugin-robots-txt": "^1.8.0",
    "gatsby-plugin-sass": "^6.6.0",
    "gatsby-plugin-sharp": "^5.6.0",
    "gatsby-plugin-sitemap": "^6.6.0",
    "gatsby-source-filesystem": "^5.6.0",
    "gatsby-transformer-sharp": "^5.6.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.58.0",
    ...
  },

"devDependencies": {
     // from this section you can share everything
    // e.g.:
    ...
    "@babel/core": "^7.20.12",
    "@babel/eslint-parser": "^7.21.8",
    "@babel/eslint-plugin": "^7.19.1",
    "@babel/node": "^7.20.7",
    "@babel/plugin-transform-typescript": "^7.20.13",
    "@babel/runtime": "^7.20.13",
    "@lerna/prompt": "3.18.5",
    ...

3. from the gatsby-config.js:

plugins[
// !!! but here you need to remove all private information !!! 
// Remove all: company / person names, file paths containing private informations, sensitive file names (<companyName>.jpg), siteURL, etc.
// e.g.:
...
// Add canonical links to HTML pages
    {
      resolve: `gatsby-plugin-canonical-urls`,
      options: {
        siteUrl: `<Private, do not share>`,
        stripQueryString: true,
      },
    },
    
    ...

// PWA
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: `<Private, do not share>`,
        short_name: `<Private, do not share>`,
        start_url: `/`,
        lang: `hu`,
        description: `<Private, do not share>`,
        display: `standalone`,
        icon: `src/icon.svg`, // This path is relative to the root of the site.
        theme_color: `#ff0000`,
        //theme_color_in_head: false,
        background_color: `#ffffff`,
        localize: [
          {
            start_url: `/de/`,
            lang: `de`,
            description: `<Private, do not share>`,
          },
          {
            start_url: `/en/`,
            lang: `en`,
            description: `<Private, do not share>`,
          },
          {
            start_url: `/ru/`,
            lang: `ru`,
            description: `<Private, do not share>`,
          },
        ],
      },
    },
    ...
] 

for development:
gatsby develop <-- Start development server. Watches files, rebuilds, and hot reloads if something changes
( weird behaviour? => gatsby clean && gatsby develop )

before deployment:
gatsby clean && gatsby build && gatsby serve

gatsby clean <--- Wipe the local gatsby environment including built assets and cache (this can also be useful during development and before deployment)

gatsby build <--- Build a Gatsby project. (After this step you can check if your code works locally. You can use the following command to do this.)

gatsby serve <--- Serve previously built Gatsby site. (This runs the already production ready code as if it were on a server somewhere on the Internet.)

Does using "gatsby serve" work as expected?
YES = The problem is on the server side (you need to check the settings at your hosting provider)
NO = You need to check the settings for gatsby and its plugins

Be especially careful not to accidentally share API keys, passwords, etc. !
Never use a piece of code, that someone has recommended as a solution until you understand what it does!
Do not install a lot of dependencies, go step by step!
Version 3.x is quite old. Are you sure you want to use that old version for your new project?

Br: Zsolt