Cache hashed assets forever in fullstack (#3928)

* Cache hashed assets forever in fullstack

* fix clippy

* fix fullstack test port

* fix fullstack clippy

* fix double insertion of meta in fullstack test

* pull out head element changes

* Fix cli-optimization test when interrupted

* remove tests for raw assets

* fix playwright tests

* look for hash in asset name instead of building a manifest

* undo changes to cli

* fix clippy

* fix test_file_name_looks_immutable

packages/server/src/server.rs

@@ -8,10 +8,15 @@ use axum::{
     http::{Request, Response, StatusCode},
     response::IntoResponse,
 };
+
 use dioxus_lib::prelude::{Element, VirtualDom};
 use http::header::*;
 use server_fn::ServerFnTraitObj;
+use std::path::Path;
 use std::sync::Arc;
+use tower::util::MapResponse;
+use tower::ServiceExt;
+use tower_http::services::fs::ServeFileSystemResponseBody;
 
 /// A extension trait with utilities for integrating Dioxus with your Axum router.
 pub trait DioxusRouterExt<S>: DioxusRouterFnExt<S> {
@@ -72,9 +77,7 @@ impl<S> DioxusRouterExt<S> for Router<S>
 where
     S: Send + Sync + Clone + 'static,
 {
-    fn serve_static_assets(mut self) -> Self {
-        use tower_http::services::{ServeDir, ServeFile};
-
+    fn serve_static_assets(self) -> Self {
         let public_path = crate::public_path();
 
         if !public_path.exists() {
@@ -82,38 +85,7 @@ where
         }
 
         // Serve all files in public folder except index.html
-        let dir = std::fs::read_dir(&public_path).unwrap_or_else(|e| {
-            panic!(
-                "Couldn't read public directory at {:?}: {}",
-                &public_path, e
-            )
-        });
-
-        for entry in dir.flatten() {
-            let path = entry.path();
-            if path.ends_with("index.html") {
-                continue;
-            }
-            let route = path
-                .strip_prefix(&public_path)
-                .unwrap()
-                .iter()
-                .map(|segment| {
-                    segment.to_str().unwrap_or_else(|| {
-                        panic!("Failed to convert path segment {:?} to string", segment)
-                    })
-                })
-                .collect::<Vec<_>>()
-                .join("/");
-            let route = format!("/{}", route);
-            if path.is_dir() {
-                self = self.nest_service(&route, ServeDir::new(path).precompressed_br());
-            } else {
-                self = self.nest_service(&route, ServeFile::new(path).precompressed_br());
-            }
-        }
-
-        self
+        serve_dir_cached(self, &public_path, &public_path)
     }
 
     fn serve_dioxus_application(self, cfg: ServeConfig, app: fn() -> Element) -> Self {
@@ -469,3 +441,90 @@ fn report_err<E: std::fmt::Display>(e: E) -> Response<axum::body::Body> {
         .body(body::Body::new(format!("Error: {}", e)))
         .unwrap()
 }
+
+fn serve_dir_cached<S>(
+    mut router: Router<S>,
+    public_path: &std::path::Path,
+    directory: &std::path::Path,
+) -> Router<S>
+where
+    S: Send + Sync + Clone + 'static,
+{
+    use tower_http::services::ServeFile;
+
+    let dir = std::fs::read_dir(directory)
+        .unwrap_or_else(|e| panic!("Couldn't read public directory at {:?}: {}", &directory, e));
+
+    for entry in dir.flatten() {
+        let path = entry.path();
+        // Don't serve the index.html file. The SSR handler will generate it.
+        if path == public_path.join("index.html") {
+            continue;
+        }
+        let route = path.strip_prefix(public_path).unwrap();
+        let route = path_components_to_route_lossy(route);
+
+        if path.is_dir() {
+            router = serve_dir_cached(router, public_path, &path);
+        } else {
+            let serve_file = ServeFile::new(&path).precompressed_br();
+            // All cached assets are served at the root of the asset directory. If we know an asset
+            // is hashed for cache busting, we can cache the response on the client side forever. If
+            // the asset changes, the hash in the path will also change and the client will refetch it.
+            if file_name_looks_immutable(&route) {
+                router = router.nest_service(&route, cache_response_forever(serve_file))
+            } else {
+                router = router.nest_service(&route, serve_file)
+            }
+        }
+    }
+
+    router
+}
+
+fn file_name_looks_immutable(file_name: &str) -> bool {
+    // Check if the file name looks like a hash (e.g., "main-dxh12345678.js")
+    file_name.rsplit_once("-dxh").is_some_and(|(_, hash)| {
+        hash.chars()
+            .take_while(|c| *c != '.')
+            .all(|c| c.is_ascii_hexdigit())
+    })
+}
+
+#[test]
+fn test_file_name_looks_immutable() {
+    assert!(file_name_looks_immutable("main-dxh12345678.js"));
+    assert!(file_name_looks_immutable("style-dxhabcdef.css"));
+    assert!(!file_name_looks_immutable("index.html"));
+    assert!(!file_name_looks_immutable("script.js"));
+    assert!(!file_name_looks_immutable("main-dxh1234wyz.js"));
+    assert!(!file_name_looks_immutable("main-dxh12345678-invalid.js"));
+}
+
+fn path_components_to_route_lossy(path: &Path) -> String {
+    let route = path
+        .iter()
+        .map(|segment| segment.to_string_lossy())
+        .collect::<Vec<_>>()
+        .join("/");
+    format!("/{}", route)
+}
+
+type MappedAxumService<S> = MapResponse<
+    S,
+    fn(Response<ServeFileSystemResponseBody>) -> Response<ServeFileSystemResponseBody>,
+>;
+
+fn cache_response_forever<
+    S: ServiceExt<Request<Body>, Response = Response<ServeFileSystemResponseBody>>,
+>(
+    service: S,
+) -> MappedAxumService<S> {
+    service.map_response(|mut response: Response<ServeFileSystemResponseBody>| {
+        response.headers_mut().insert(
+            CACHE_CONTROL,
+            HeaderValue::from_static("public, max-age=31536000, immutable"),
+        );
+        response
+    })
+}