Как отключить кэширование браузером index страницы?

Question

[Егор Тельнов]

Есть приложение на React. Столкнулся с проблемой, что браузер кэширует страницу, если она добавлена в закладки. Т.е. выкатывается новый релиз, но пользователи видят старые стили и скрипты, до того, пока не обновят страницу. Именно обновят (без сброса кэша). После этого загружаются последние версии файлов.

В связи с этим вопрос - как можно отключить это кэширование?

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Если вставить в index.html этот код, то будут ли кэшироваться скрипты со стилями, или браузер будет грузить их каждый раз?

Answer 1

[Александр Смирнов]

Вам нужно добавлять hash в названия файлов. При изменении содержимого будет меняться hash рядом с именем файла скриптов/стилей и после нового релиза пользователи без сброса кэша будут видеть обновления. Совсем отключать кэш нежелательно, т.к. тогда постоянным пользователям нужно будет каждый раз грузить файлы и каждый раз ждать окончание загрузки.
Для реализации такого подхода нужно настроить Webpack, подробнее можно глянуть в документации или в пример ниже для Webpack 5 с одного из рабочих проектов:

const path = require('path');
const htmlPlugin = require('html-webpack-plugin');

const publicPath = path.join(__dirname, 'build');

module.exports = {
    entry: './source/index.tsx',
    output: {
        path: publicPath,
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[chunkhash].js',
        publicPath: '/',
    },
    devServer: {
        static: publicPath,
        historyApiFallback: true,
        hot: true,
        port: 6790,
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', 'ttf'],
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                include: path.resolve(__dirname, 'source'),
                loader: 'ts-loader',
                options: {
                    transpileOnly: true,
                },
            },
        ]
    },
    plugins: [
        new htmlPlugin({
            publicPath: '/',
            template: './source/index.html',
            favicon: './source/assets/images/favicon.png'
        }),
    ],
};

Answer 2

[Владимир Коротенко]

сделайте корневой локатион без кэша, в nginx он по умолчанию кэшируется.

https://stackoverflow.com/questions/41631399/disab...

Comments

[Егор Тельнов]

Если бы nginx кэшировал корневой маршрут, то проблема бы повторялась всегда и не лечилась простой перезагрузкой страницы. В моем случает поведение распространяется на пользователей, у которых приложение добавлено в закладки

[Владимир Коротенко]

Егор Тельнов, попробуйте без теста не узнаете, по ссылке окружение очень похоже на ваше.

Answer 3

[sasmoney]

.load на крайний случай при каждой загрузке страницы