Question

我正在构建一个服务器端渲染的react，redux应用程序。我正在使用Firebase云功能上的快速应用程序返回http请求。

我使用此行启用了缓存：

res.set('Cache-Control', 'public, max-age=1200, s-maxage=1200');

当我清除浏览器缓存并点击重新加载时，如何从CDN缓存加载，而不是再次运行该功能？我怎么知道它有效？

本地cli是否与我期望完全部署的版本一样有效？

firebase serve --only functions,hosting

服务器端index.js文件

import React from "react";
import ReactDOMServer from 'react-dom/server';
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
// import { StaticRouter } from "react-router";
import express from "express";
import * as functions from "firebase-functions";

// Import Components, Reducers, Styles
//import App from "../shared/components/App";
import News from "../shared/containers/News";
import reducers from "../shared/reducers";

// Prepare our store to be enhanced with middleware
const middleware = [thunk];
const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore);

// Create store, compatible with REDUX_DEVTOOLS (chrome extension)
const store = createStoreWithMiddleware(reducers);

const app = express();
app.get('**', (req, res) => {
  const html = ReactDOMServer.renderToString(
    <Provider store={store}>
      <News />
    </Provider>
  );
  const preloadedState = store.getState();
  res.set('Cache-Control', 'public, max-age=1200, s-maxage=1200');
  res.send(renderFullPage(html, preloadedState));
});

function renderFullPage(html, preloadedState) {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>React Server Side Rendering - Firebase Hosting</title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>
        <script type="text/javascript" src="bundle.js"></script>
      </body>
    </html>
  `
}

export let ssrapp = functions.https.onRequest(app);

Answer 1

即使加载URL触发云功能，该文件也将始终从CDN提供。因此，虽然您可以检查标题（via和x-served-by，以防您感到好奇）是否确实来自边缘缓存（以及哪一个），您可以从您会看到它是否触发了Cloud Functions。

我能想到的最佳选择是检查云功能日志，看看该功能是否已运行。

Firebase功能 - 如何验证从CDN缓存加载静态内容？

1 个答案: